RaphaelJS - I need help understanding a transform

Question

I have a question about the following demo - http://raphaeljs.com/hand.html.

Here is code from the sample...

var r = Raphael("holder", 640, 480), angle = 0;
while (angle < 360) {
    var color = Raphael.getColor();
    (function(t, c) {
        r.circle(320, 450, 20).attr({
            stroke : c,
            fill : c,
            transform : t,
            "fill-opacity" : .4
        }).click(function() {
            s.animate({
                transform : t,
                stroke : c
            }, 2000, "bounce");
        }).mouseover(function() {
            this.animate({
                "fill-opacity" : .75
            }, 500);
        }).mouseout(function() {
            this.animate({
                "fill-opacity" : .4
            }, 500);
        });
    })("r" + angle + " 320 240", color);
    angle += 30;
}
Raphael.getColor.reset();
var s = r.set();
s.push(r.path("M320,240c-50,100,50,110,0,190").attr({
    fill : "none",
    "stroke-width" : 2
}));
s.push(r.circle(320, 450, 20).attr({
    fill : "none",
    "stroke-width" : 2
}));
s.push(r.circle(320, 240, 5).attr({
    fill : "none",
    "stroke-width" : 10
}));
s.attr({
    stroke : Raphael.getColor()
});

The question I have is about the following line of code...

("r" + angle + " 320 240", color);

In the anonymous function the circle is initially drawn at 320, 450 with a radius of 20. Then a transform is applied, for example ("r30 320 240") when the angle is 30.

How does this transform work? The way I read this transform is to rotate the circle 30 degrees around 320,450 , then move 320 horizontally (to the right) and 240 vertically down.

But i'm obviously reading this transform wrong because this is not what is happening.

What am i missing?

Thanks

Answer 1

The transform "r30 320 240" sets the rotation of the object about the point (320,240) by 30 degrees. It does not add to the rotation. It overrides any previous transformations.

If you look at this example:

http://jsfiddle.net/jZyyy/1/

You can see that I am setting the rotation of the circle about the point (0,0). If you consider the point (0,0) to be the centre of a clock, then the circle begins at 3 o'clock. If I use the transform "r90 0 0" the circle will be rotated from 3 o'clock to 6 o'clock. If I then later set the transform to be "r30 0 0" the circle will be at 4 o'clock, rotated 30 degrees from the original 3 o'clock position about the point (0,0).