我正在使用React (React of KonvaJS)绘制自定义形状,大部分是不规则多边形,并对其应用转换,比如移动、缩放和旋转。
现在,一旦多边形就位,我需要另一个特征的顶点坐标,但是即使我移动它并进行变换等等,形状看起来是正确的修改,但是顶点坐标仍然是最初的坐标。
例如,如果我的三角形位于(0,0),(1,0),(0.5,2),然后一直拖到右边,拖动结束后,三角形将出现在canva上的新位置,但是当打印顶点时,它仍然会输出(0,0),(1,0),(0.5,2)。
如何获得所有顶点的更新坐标?我使用 形状 类表示多边形, draggable 设置为 true 进行转换,而 变压器 类用于缩放和旋转。
draggable
true
发布于 2022-03-14 10:45:54
Canvas,因此Konva是画布功能的包装和增强器,它使用矢量图形。矢量图形的一个重要部分是“变换”的概念--当你旋转或缩放你的形状时。本质上,形状会告诉你它的位置在旋转或缩放时是不变的,但是重要的事实是它的变换,这就是旋转和缩放的方式。
长话短说,不需要理解矩阵数学,你就可以“得到”应用于你的形状的变换,并给它你的形状的顶点/角的x,y的位置,它将返回该点的x,y与应用的转换。
对于同样的问题,这里有一个较早的答案,但涉及矩形。 https://stackoverflow.com/a/65645262/7073944
这是香草JS,但希望你能做出反应。
关键函数是node.getTransform,其密切关系的node.getAbsoluteTransform方法将检索应用于节点(形状)的变换。
https://stackoverflow.com/questions/71466045