试剂上的羽毛素描 canvas

Question

我有一个 html canvas 并且想在上面显示一个 Quil 草图。大多数 Quil 示例使用 defsketch 绘制到静态 html 页面上定义的 canvas 上。我想在这个 Reagent 组件中的 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，最终 returns js/Processing.Sketch 对象。这是你可以与 quil.sketch/with-sketch 宏一起使用的东西，它只使用 binding。这意味着，大多数 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")))

Answer 2

为了让 Quil 与 Reagent 很好地配合使用，我认为您需要一个 sketch 函数来 (a) 创建 canvas 和 (b) 在 Reagent 卸载草图时销毁它。（如果不破坏草图，它将用完 CPU 个循环。）

我试过了 - 请参阅 https://github.com/simon-katz/nomisdraw/blob/for-quil-api-request/src/cljs/nomisdraw/utils/nomis_quil_on_reagent.cljs。

我的代码使用的函数不属于 Quil 的 API，因此我提出了一个问题，希望得到解决。（参见 https://github.com/quil/quil/issues/186）

如果成功了，我会把它变成一个迷你图书馆。

试剂上的羽毛素描 canvas

Quil sketch on a Reagent canvas

clojurescript

reagent

quil