KonvaJS 如何处理画布上的绘图答案

【问题标题】：How does KonvaJS handle drawing on the canvasKonvaJS 如何处理画布上的绘图
【发布时间】：2018-12-04 19:53:56
【问题描述】：

我真的很喜欢 Konva 语法

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

但是源代码让我感到困惑。我理解的方式<Circle /> 实际上并没有在其渲染中返回 DOM 元素。相反，它在其上方定义的 Canvas 上绘制。

它实际上是如何做到这一点的。谁能指点我的代码

【问题讨论】：

【解决方案1】：

Konva 是一个 javascript 框架，允许您以面向对象的方式在画布中绘图。概述：https://konvajs.github.io/docs/

您可以将其视为“画布的 DOM（文档对象模型）”。因此，您无需手动绘制到画布中。你只是改变形状。

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

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

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

所以当你这样做时

<Layer>
 <Circle />
</Layer>

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

【讨论】：