KonvaJS 如何处理 canvas 上的绘图

Question

我真的很喜欢 Konva 语法

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

但是源代码让我很困惑。我的理解方式 <Circle /> 在其渲染中实际上 return 一个 DOM 元素。相反，它利用了在其上方定义的 Canvas 。

它实际上是如何做到这一点的。有人可以指出代码

Answer 1

Konva 是一个 javascript 框架，允许您以面向对象的方式融入 canvas。概述：https://konvajs.github.io/docs/

你可以把它想象成"DOM (document object models) for the canvas"。所以你不需要手动绘制 canvas 。你只是改变形状。

该对象模型不是浏览器的 DOM（如 document.body、divs 和其他元素）。它只是普通的 javascript 个对象。

所以 react 用于管理应用程序的 DOM（所有元素）。所以我认为从 React 中管理 Konva 形状也是一个好主意（因为它与 DOM 心态太相似了）。所以我创建了 react-konva https://konvajs.github.io/docs/react/.

react-konva 是 react 和 konva 之间的桥梁。

所以当你这样做时

<Layer>
 <Circle />
</Layer>

它不会创建 DOM 个元素，而是创建 Konva 个节点。从该节点 Konva 将进行绘图。

How does KonvaJS handle drawing on the canvas