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

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