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

Question

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

Answer 1

这是我最终得到的...调用 getBBox() 获取新坐标，这些坐标会更新到每个点的属性。对 transform() 的调用是我遗漏的部分，也是回答我问题的关键。它重置对象上的变换数据，因此点位置可以与 canvas.

的坐标一致

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');
}

感谢以下 post 更好地理解 SVG 转换 https://www.sarasoueidan.com/blog/svg-transformations/ 我还从这个 post 中收集到了一些有用的信息。 What is a "matrix" for in raphael

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

Raphael.js get Positions of Individual Elements in a Set after Rotation

javascript

svg

raphael