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