Как KonvaJS обращается с рисунком на холсте

Question

Мне очень нравится синтаксис Konva

 <Shape> 
   <Layer>
     <Circle />
    </Layer>
  </Shape>

Однако исходный код сбивает меня с толку. Как я понимаю <Circle />фактически не возвращает элемент DOM при его рендеринге. Вместо этого он рисует на холсте, который определен над ним.

Как это на самом деле это сделать. Может кто-нибудь указать мне код

Answer 1

Konva это фреймворк JavaScript, который позволяет рисовать на холсте объектно-ориентированным способом Обзор: https://konvajs.github.io/docs/

Вы можете думать об этом как "DOM (объектные модели документов) для холста". Таким образом, вы не рисуете на холсте вручную. Вы просто меняете формы.

Эта объектная модель НЕ является DOM браузера (как document.body, divs и другие элементы). Это просто объекты javascript.

Так react предназначен для управления DOM (всеми элементами) вашего приложения. Поэтому я подумал, что будет хорошей идеей также управлять формами Konva по реакции (так как это слишком похоже на мышление DOM). Итак, я создал react-konva https://konvajs.github.io/docs/react/.

react-konva это мост между react а также konva,

Итак, когда вы делаете

<Layer>
 <Circle />
</Layer>

он не будет создавать элементы DOM, он создаст Konva узлы вместо. Из этого узла Konva сделаю рисунок.