2

我有一个 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，假设这是下一个最好的主意。

4

2 回答 2

5

您应该查看 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")))
于 2015-10-26T17:57:39.230 回答
0

为了让 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）

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

于 2016-07-22T19:07:15.620 回答