Как 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 сделает чертеж.