问Konva-JS:在平移、缩放或旋转之后，如何获得自定义形状的更新顶点坐标？
EN

Stack Overflow用户

提问于 2022-03-14 10:12:58

回答 1查看 435关注 0票数 0

我正在使用React (React of KonvaJS)绘制自定义形状，大部分是不规则多边形，并对其应用转换，比如移动、缩放和旋转。

现在，一旦多边形就位，我需要另一个特征的顶点坐标，但是即使我移动它并进行变换等等，形状看起来是正确的修改，但是顶点坐标仍然是最初的坐标。

例如，如果我的三角形位于(0,0)，(1,0)，(0.5,2)，然后一直拖到右边，拖动结束后，三角形将出现在canva上的新位置，但是当打印顶点时，它仍然会输出(0,0)，(1,0)，(0.5,2)。

如何获得所有顶点的更新坐标？我使用形状类表示多边形，draggable设置为true进行转换，而变压器类用于缩放和旋转。

konvajs

javascript

reactjs

rotation

scale

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-14 10:45:54

Canvas，因此Konva是画布功能的包装和增强器，它使用矢量图形。矢量图形的一个重要部分是“变换”的概念--当你旋转或缩放你的形状时。本质上，形状会告诉你它的位置在旋转或缩放时是不变的，但是重要的事实是它的变换，这就是旋转和缩放的方式。

长话短说，不需要理解矩阵数学，你就可以“得到”应用于你的形状的变换，并给它你的形状的顶点/角的x，y的位置，它将返回该点的x，y与应用的转换。

对于同样的问题，这里有一个较早的答案，但涉及矩形。https://stackoverflow.com/a/65645262/7073944

这是香草JS，但希望你能做出反应。

关键函数是node.getTransform，其密切关系的node.getAbsoluteTransform方法将检索应用于节点(形状)的变换。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71466045

复制

相似问题

问Konva-JS:在平移、缩放或旋转之后，如何获得自定义形状的更新顶点坐标？
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Konva-JS:在平移、缩放或旋转之后，如何获得自定义形状的更新顶点坐标？EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Konva-JS:在平移、缩放或旋转之后，如何获得自定义形状的更新顶点坐标？
EN