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")。

这种转换是如何工作的？我阅读此变换的方式是将圆围绕 320,450 旋转 30 度，然后水平（向右）移动 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 点钟位置围绕点 (0,0) 旋转 30 度。