试剂帆布上的Quil素描

Question

我有一个html画布，并希望在上面显示一个Quil草图。大多数Quil示例使用defsketch在静态html页面上定义的画布上绘制。我想在这个Reagent组件的画布上这样做：

(defn my-component []      
  (reagent/create-class
    {:component-did-mount (fn [this]
                            (let [canvas (reagent/dom-node this)
                                  width (.-width canvas)
                                  height (.-height canvas)]
                              (u/log (str "On canvas with width, height: " width " " height))))
     :component-will-mount #(u/log "component-will-mount")
     :display-name "my-component"
     :reagent-render (fn [] [:canvas {:width 400}])}))

(defn graph-panel []
  [v-box
   :gap "1em"
   :children [[my-component]]])

我找到的最好的文档是这里，但我不知道如何将它应用到上面的画布上。在上面的画布上画一条线的实际代码是很棒的。

事实上，静态和始终运行的defsketch将是好的-困难将是让它访问这种动态的画布。

如果不能这样做，那就很高兴知道，我将直接使用Processing.js，假设这是下一个最好的主意。

Answer 1

为了让Quil很好地使用Reagent，我认为您需要一个sketch函数，它(a)创建画布，(b)在Reagent卸载时销毁草图。(如果你不破坏这个草图，它就会消耗掉CPU周期。)

我在- see reagent.cljs试过一次。

我的代码使用的函数不是Quil的API的一部分，所以我提出了一个问题，希望能够得到解决。(见https://github.com/quil/quil/issues/186)

如果一切顺利，我会把它变成一个迷你图书馆。