RaphaelJS - 我需要帮助理解变换

Question

我对以下演示有疑问 - http://raphaeljs.com/hand.html.

这是样本中的代码......

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

我的问题是关于以下代码行...

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

在匿名函数中,圆最初以320,450绘制,半径为20.然后,当角度为30时,应用变换,例如("r30 320 240").

这种转变如何运作？我读取此变换的方式是将圆圈旋转30度左右,然后向左移动320度,然后向下移动320(向右),向下移动240度.

但我显然错误地认为这种转变是错误的,因为这不是正在发生的事情.

我错过了什么？

谢谢

Answer 1

变换"r30 320 240" 将对象围绕点(320,240)的旋转设置 30度.它不会添加到旋转.它会覆盖以前的任何转换.

如果你看一下这个例子:

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

您可以看到我正在围绕点(0,0)设置圆的旋转.如果您将点(0,0)视为时钟的中心,则圆圈从3点开始.如果我使用变换"r90 0 0",圆圈将从3点钟旋转到6点钟.如果我稍后将变换设置为"r30 0 0"圆将在4点钟位置,从原点3点左右旋转30度左右点(0,0).