RaphaelJS - Ich brauche Hilfe, um eine Transformation zu verstehen

Question

Ich habe eine Frage zu der folgenden Demo - http://raphaeljs.com/hand.html.

Hier ist Code aus der Probe ...

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

Die Frage, die ich habe über die folgende Codezeile ist ...

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

In der anonymen Funktion wird der Kreis zunächst gezeichnet bei 320, 450 mit einem Radius von 20. Dann wird eine Transformation angewendet, zum Beispiel ("r30 320 240") wenn der Winkel 30 ist.

Wie funktioniert diese Transformation? Die Art, wie ich diese Transformation lese, besteht darin, den Kreis um 30 Grad um 320 450 zu drehen, dann 320 horizontal (nach rechts) und 240 vertikal nach unten zu bewegen.

Aber ich lese offensichtlich diese Umwandlung falsch, weil dies nicht ist, was passiert.

Was fehlt mir? Die

Dank

Answer 1

Transformation "r30 320 240"Sätze die Drehung des Objekts um den Punkt (320.240) um 30 Grad. Es wird nicht zur Rotation hinzugefügt. Es überschreibt alle vorherigen Transformationen.

Wenn Sie in diesem Beispiel aussehen:

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

Sie können sehen, dass ich die Drehung des Kreises setzte um den Punkt (0,0). Wenn Sie den Punkt (0,0) als Mittelpunkt einer Uhr betrachten, beginnt der Kreis bei 3 Uhr. Wenn ich die Transformation "r90 0 0" verwende, wird der Kreis von 3 Uhr auf 6 Uhr gedreht. Wenn ich dann später die Transformation auf "r30 0 0" setze, wird der Kreis bei 4 Uhr um 30 Grad von der ursprünglichen 3-Uhr-Position um den Punkt (0,0) gedreht.