Question

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

创建画布（var paper = new Raphael(container,width,height)）并向其添加图像或矩形后，例如，如果我使用attr方法检索“x”和“y”属性（例如{{ 1}}），它们都是0.但是，如果我旋转该对象然后再次检索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

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

2 个答案: