javascript - Raphael 对象属性“x”和“y”是什么意思？

Question

我预计这将是 100% 的明智之举，但事实证明，我无法弄清楚使用 Raphael.js 创建和操作的 svg的x和y属性是什么意思。我假设它们是对象左上角相对于画布的坐标，但现在我不太确定。

在创建var paper = new Raphael(container,width,height)画布attr（object.attr("x")对象，然后再次检索 x 和 y 的值，这些值不再反映我的对象的左上角相对于画布的位置。

有人可以向我解释一下吗？

Answer 1

我担心@afaf12 的回答得意洋洋地走了一半。他绝对正确，转换逻辑发生在给定元素的基本属性之后并且不会影响它们，但是在应用转换之后当然可以检索该元素的 x 和 y。您需要使用getBBox方法，如下所示：

var bbox = elem.getBBox();
console.log("Transformed coordinates of element are %s,%s", bbox.x, bbox.y );

请注意，这涉及到一些技巧——这会返回元素的边界框，它通常是元素占用的空间的超集——因此不能保证返回的点会在元素中。

如果您使用路径，则会出现另一种选择——路径。getPointAtLength也适用于转换后的坐标，因此您可以通过调用获取路径开头的 x,y 偏移量

var coord = elem.getPointAtLength(0);
console.log("Transformed coordinates of path are %s,%s", coord.x, coord.y );

Answer 2

旋转是一种变换，它不会改变对象的 x 和 y。 http://raphaeljs.com/reference.html#Element.transform