시약 캔버스 구성 요소

Question

저는 시약 구성 요소를 작성하려고합니다. 시약 구성 요소는 HTML 캔버스 요소에 절대 픽셀 크기가 있어야한다는 사실을 요약합니다. 오히려 항상 최대 해상도에서 캔버스를 사용하고 싶습니다.

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

캔버스가 제대로 렌더링 할 것 해당 크기. 그러나 render 함수는 아무 것도 그리지 않습니다. 아무도 이것을 수정/처리하는 방법을 알고 있습니까?

Answer 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})) 
      })))