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

在匿名函数圆最初绘制在半径为20的320,450处。然后例如在角度为30时应用变换（“r30 320 240”）。

该变换如何工作？我读这个变换的方式是将圆圈旋转30度到320,450，然后水平移动320（向右）和240垂直向下移动。

但我显然读这个转换错了，因为这不是发生了什么事情。

我在想什么？

由于

Answer 1

30度变换"r30 320 240"套绕点（320240）的对象的旋转。 它不会添加到旋转中。它覆盖任何以前的转换。

如果你看看下面这个例子：

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

你可以看到，我设置了有关该点（0,0）的圆的旋转。如果你认为点（0,0）是一个时钟的中心，那么这个圆从3点开始。如果我使用变换"r90 0 0"，圆圈将从3点钟旋转到6点钟。如果我稍后将变换设置为"r30 0 0"，圆圈将在4点钟位置，从原点（0,0）的3点钟位置旋转30度。