Raphael.js 获取旋转后集合中单个元素的位置

Posted 2023-03-28

【中文标题】Raphael.js 获取旋转后集合中单个元素的位置

【英文标题】：Raphael.js get Positions of Individual Elements in a Set after Rotation

【发布时间】：2018-06-18 05:11:06

【问题描述】：

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

【参考方案1】：

这是我最终得到的结果...调用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/ 我还从这篇文章中收集了一些很好的信息。 What is a "matrix" for in raphael