时间戳

首页 > 解决方案 > KonvaJS 如何处理画布上的绘图

reactjs - KonvaJS 如何处理画布上的绘图

问题描述

我真的很喜欢 Konva 语法

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

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

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

标签： reactjskonvajskonvajs-reactjs

解决方案

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

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

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

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

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

所以当你这样做时

<Layer>
 <Circle />
</Layer>

它不会创建 DOM 元素，而是创建Konva节点。从那个节点Konva开始绘制。

推荐阅读