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

标签 javascript svg raphael

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

最佳答案

这是我最终得到的...调用 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

关于javascript - Raphael.js 获取旋转后集合中单个元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48163580/

相关文章:

javascript - 为 raphael 对象制作动画

javascript - YUI 富文本编辑器在最新的 Firefox 上损坏

javascript - 可以关联的数字的基数是否有限制?

javascript - 如何动态加载和编译指令?

javascript - D3.js - 如何解决拖动折线图时出现 NAN 错误(Jsfiddle 提供)

javascript - 当传递给循环中的函数时,Raphael 元素不会转换

javascript - 更新字符串子数组

javascript - 在 Enyo 2.0 中使用 SVG 控件处理事件(对象或嵌入标记)

javascript - 从字符串创建 svg 元素

javascript - 更改莫里斯线性图中 X 轴的值