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

Question

我原以为这是 100% 的明智之举，但事实证明，我无法弄清楚 svg 的 x 和 y 属性是如何创建和用 Raphael.js 操纵意味着。我假设它们是对象左上角相对于 Canvas 的坐标，但现在我不太确定了。

在创建 Canvas (var paper = new Raphael(container,width,height)) 并向其添加图像或矩形之后，例如，如果我检索“x”和“y” "使用 attr 方法(例如 object.attr("x"))的属性，它们都为 0。但是，如果我旋转该对象然后检索x 和 y 的值，这些值不再反射(reflect)我的对象左上角相对于 Canvas 的位置。

谁能给我解释一下吗？

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