如何使用 Konva js 从直线绘制多边形？

Question

我想让用户能够从线条绘制多边形以创建他想要的形状并对其应用变换（旋转和调整大小）。

如何使用 Konvajs 实现它？

Answer 1

请参阅有关 Konva.Polygon 和 Konva.Transformer 的教程。

在 Konva 中，多边形是根据 Konva.Line 形状创建的，并位于您最初指定的特定 x,y 点处。所有 Konva 形状都具有此功能。

通常，对于多边形，将此设置保留为 0,0 会更容易。多边形的点存储为不同的属性。第一个点被解释为从多边形 x,y 位置开始的移动到命令。随后的 x,y 点被视为绘制命令，从而绘制多边形的线条。还有一个进一步的闭合属性，用于闭合形状，将最后一个点连接到第一个点。

这些点是 Konva.Line 的一个属性。当我们拖动多边形时，我们不需要更改点，因为它们是参考形状的位置属性绘制的。

要创建多边形，您必须创建代码来存储用户通过鼠标或触摸指示的点，然后在用户指示时关闭多边形。

所有 Konva 形状都可以使用 Konva.Transformer 进行视觉缩放和旋转 关于形状大小，Transformer 不会更改形状的宽度或高度形状 - 它会更改比例。

由于 Transformer 对形状的变换矩阵进行操作，并且点包含在形状内，因此无需执行任何操作即可影响 Transformer 引入的任何更改的点。

请参阅这篇博客文章，了解有关 Transformer 的更广泛讨论。