拉斐尔.js旋转后获得集合中单个元素的位置



我有一组点和线。这些点只是圆圈,对我来说跟踪它们的位置很重要。如果我旋转我的集合,集合中的所有元素都会改变画布上的位置。我需要能够检索每个点的位置信息。如果我进入我的观点并做point.attr('cx'),我可以看到什么都没有改变。我尝试了一种方法,在我调用var bb = point.getBBox()的点上,这似乎拉动了更新的点,但是如果我尝试在给定的点上设置更新的点信息,例如point.attr('cx',(bb.x + (bb.width / 2))这会导致我的对象移动似乎是相同的旋转;所以我的 15 度变成了 30 度旋转。(我认为这就是发生的事情,但不确定)我还注意到我可以控制台.log一个对象并看到一个 point.attrs.cx 它也没有更新,所以我尝试手动更新它,它导致了其他奇怪的行为。我知道如果不看到它就很难理解这一点,但也许有一些一般信息或一些最佳实践来操作一组并确保您可以跟踪其中的对象;似乎是应该内置的东西;但也许有一种方法可以轻松添加它。谢谢。

这是我最终得到的...调用getBBox()获取新坐标,这些坐标将更新为每个点的属性。transform()的呼唤是我缺失的部分,也是回答我问题的关键。它会重置对象上的转换数据,以便点位置可以与画布的坐标为真。

for (i = 0; i < points.length; i++) {
var bb = tools.points[i].getBBox();
points[i].attr('cx',bb.cx);
points[i].attr('cy',bb.cy);
points[i].transform('1 0 0 1 0 0');
}

感谢以下帖子,以便更好地了解 SVG 转换 https://www.sarasoueidan.com/blog/svg-transformations/我还从这篇文章中收集了一些很好的信息。 拉斐尔的"矩阵"是什么

相关内容

  • 没有找到相关文章

最新更新