试剂画布上的羽毛笔草图

Question

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

(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，但我无法完全弄清楚如何进入下一个级别并将其应用到上面的画布。在上面的画布上画一条线的实际代码会很棒。

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

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

Answer 1

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

我建议如下：defsketch像通常在 Quil 应用程序中一样使用，但使用: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")))