试剂画布组件答案

【问题标题】：Reagent Canvas Component试剂画布组件
【发布时间】：2017-03-07 20:02:00
【问题描述】：

我正在尝试编写一个试剂组件，它抽象出 HTML Canvas 元素需要具有一些绝对像素大小的事实。我宁愿始终以最大分辨率使用画布。

最后，我会像这样使用组件：

[Canvas {:width "100%"
         :height "100%"
         :render (fn [ctx [w h]]
                    (.fillRect ctx 0 0 (/ w 2) (/ h 2)))}]

这是我的方法：

(defn Canvas [{:keys [width height render]}]
  (let [state (r/atom {:size nil})
        update-size (fn [el]
                      (when el 
                        (let [size (get-real-size el)
                              ctx (.getContext el "2d")]
                          (swap! state assoc :size size)
                          (render ctx size))))]
    (fn []
      (let [{:keys [size]} @state]
         [:canvas {:style {:width width :height height} 
                   :ref update-size
                   :width (nth size 0)
                   :height (nth size 1)}]))))

而：

(defn get-real-size [el]
  (let [bb (.getBoundingClientRect el)]
    [(.-width bb) (.-height bb)]))

画布似乎以相应的大小正确渲染。但是渲染函数不绘制任何东西。有人知道如何解决/处理这个问题吗？

【问题讨论】：

标签： canvas clojurescript reagent

【解决方案1】：

您没有得到任何绘图的原因是您的组件是在安装之前渲染的。为了解决这个问题，您必须在安装后再次打开渲染。

这里是reagent manual explains this。虽然它提供了一个解决窗口尺寸更改后重绘问题的方法，但该解决方案也适用于您。

在您的情况下，您可以通过取消引用原子轻松触发重新渲染。

(defn Canvas [{:keys [width height render]}]
    (let [state (atom nil)]
        (reagent/create-class
            {:reagent-render      (fn []
                                      (let [update-size (fn [el]
                                                            (when el
                                                                (let [size (get-real-size el)
                                                                      ctx (.getContext el "2d")]
                                                                    (swap! state assoc :size size)
                                                                    (render ctx size))))]
                                          (fn [] (let [{:keys [size]} @state]
                                                     [:canvas {:style  {:width width :height height}
                                                               :ref    update-size
                                                               :width  (nth size 0)
                                                               :height (nth size 1)}]))))
             :component-did-mount (fn [] (reset! state {:size nil}))
             })))

【讨论】：