Raphael JS: Get Point when Animation stops

0
votes

I'm programming a small psychological experiment with Javascript and Raphael.

It's my first time using Raphael, and I'm not as good with it, as I want to be ;)

Basically, there is a clock and a small point which is running around it. When the test subject presses the space bar, the point should stop and its absolute X and Y position should be saved.

The animation and the reaction to the space bar press works just fine, but I have my problems with getting the absolute position of the point. I'm using a relative transform to move the point within the clock.

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

You can look up the experiment here: http://narda.bplaced.net/

If you press the space bar, a new point is drawn at the position which is given by matrix.x(x,y) and matrix.y(x,y).

Is there a way to translate a relative transform into an absolute position? Or can I move the point with an absolute transform instead of a relative?

Thank you for any new approach.

2
javascriptanimationraphaeltransform
Break the problem down into a smaller chunk and post it on a jsfiddle. I haven't look over the code (other than to see there is too much of it for a concise question). My first instinct would be that I don't understand why you need matrix.x/y. You position the circle, so take control of the positioning and understand exactly where it will be before positioning it. – Ian

2 Answers

0
votes

Raphael buries the animation parameters in the object. It takes some nosing around, and I cannot run your code, but I think you'll find the current animation settings here:

 console.log(clock._.transform)

It'll be an array, but you should be able to spot the "t" and then two floats might be your x and y.

0
votes

Just use getBBox()

here is as example:

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

And if you need absolute position add jquery offset

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