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

我发现做这类事情的最佳文档是here，但我无法确定如何转到下一级并将其应用于上面的画布。在上面的画布上画一条线的实际代码会很棒。

事实上，一个静态且始终在运行的defsketch会很好 - 难以让它访问这种动态类型的画布。

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

Answer 1

您应该查看Quil的源代码并了解它的工作原理。 defsketch只是一个创建函数的宏，它调用quil.sketch/sketch，最终返回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）创建画布，（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）

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

在试剂画布上的Quil草图

2 个答案: