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 度。