clojurescript - 试剂 Canvas 上的羽毛笔草图

Question

我有一个 html Canvas ，想在上面显示 Quil 草图。大多数 Quil 示例使用 defsketch 在静态 html 页面上定义的 Canvas 上进行绘制。我想在这个试剂组件中的 Canvas 上进行操作:

(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]]])

我找到的执行此类操作的最佳文档是 here ，但我不太清楚如何进入下一个级别并将其应用到上面的 Canvas 。在上面的 Canvas 上画一条线的实际代码会很棒。

事实上，静态且始终运行的 defsketch 就可以了 - 困难在于让它访问这种动态类型的 Canvas 。

如果无法完成，那么很高兴知道，我将直接使用Processing.js，假设这是下一个最佳想法。

Answer 1

您应该查看 Quil 的源代码并了解它是如何工作的。 defsketch 只是一个创建函数的宏，该函数调用 quil.sketch/sketch，最终返回 js/Processing.Sketch 对象。这就是您可以与 quil.sketch/with-sketch 宏一起使用的东西，它只使用绑定(bind)。这意味着，Quil 的大多数绘图函数都使用 quil.sketch/*applet* var。

我建议如下:像通常在 Quil 应用程序中那样使用 defsketch，但使用 :no-start true 选项。另外，使用一些固定的 :host 元素 ID，您将在试剂组件中使用它，即。 :canvas#wathever

此处的示例存储库:https://github.com/skrat/quil-reagent-test运行:lein Figwheel dev 然后打开 http://localhost:3449/

(ns ^:figwheel-always kil.core
  (:require [reagent.core :as reagent :refer [atom]]
            [quil.core :as q :include-macros true]
            [quil.middleware :as m]))

(enable-console-print!)

(def w 400)
(def h 400)

(defn setup []
  {:t 1})

(defn update [state]
  (update-in state [:t] inc))

(defn draw [state]
  (q/background 255)
  (q/fill 0)
  (q/ellipse (rem (:t state) w) 46 55 55))

(q/defsketch foo
  :setup  setup
  :update update
  :draw   draw
  :host "foo"
  :no-start true
  :middleware [m/fun-mode]
  :size [w h])

(defn hello-world []
  (reagent/create-class
    {:reagent-render (fn [] [:canvas#foo {:width w :height h}])
     :component-did-mount foo}))

(reagent/render-component
  [hello-world]
  (. js/document (getElementById "app")))