KonvaJS如何处理画布上的绘图

Question

我真的很喜欢Konva语法

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

但是源代码使我感到困惑。我对<Circle />的理解 实际上不会在其渲染中返回DOM元素。相反，它使用在其上方定义的Canvas。

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

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从该节点开始绘制图形。