Question

我正在使用Javascript和Raphael编写一个小型的心理学实验。

这是我第一次使用拉斐尔，而且我不如我想的那样好;）

基本上，有一个时钟和一个小点在它周围运行。当测试对象按下空格键时，该点应该停止，并且应该保存其绝对X和Y位置。

动画和对空格键的反应很好，但是我在获得该点的绝对位置时遇到了问题。我正在使用相对变换在时钟内移动点。

    clock.customAttributes.along = function (v) {
        var point = p.getPointAtLength(v * len);
        return {
            transform: "t" + [point.x, point.y] + "r" + point.alpha
        };
    };

您可以在此处查找实验：http://narda.bplaced.net/

如果按空格键，将在matrix.x（x，y）和matrix.y（x，y）给出的位置绘制一个新点。

有没有办法将相对变换转换为绝对位置？或者我可以用绝对变换而不是相对变换来移动点吗？

感谢您采用任何新方法。

Answer 1

Raphael将动画参数隐藏在对象中。它需要一些注意力，我无法运行你的代码，但我认为你会在这里找到当前的动画设置：

 console.log(clock._.transform)

它将是一个数组，但你应该能够发现“t”，然后两个浮点数可能是你的x和y。

Answer 2

只需使用getBBox（）

即可

这里是例子：

var m = Raphael("canvas");
var c = m.circle(50,50,1).attr({fill: "#000", stroke: "none"});
c.transform("t150,50")
console.log(c.getBBox().x);

如果您需要绝对位置，请添加jquery offset

console.log(c.getBBox().x + $("#canvas").offset().left);

Raphael JS：当动画停止时获取Point

2 个答案: