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에서 반경 20 인 450을 만듭니다. 그런 다음 각도가 30 일 때 변형이 적용됩니다 (예 : "r30 320 240").

이 변환은 어떻게 작동합니까? 이 변환을 읽는 방법은 320,450 주위에서 원을 30도 회전시킨 다음 수평으로 (오른쪽으로) 320을 수직으로 아래로 이동하는 것입니다.

하지만 분명히이 변환은 잘못된 것입니다. 왜냐하면이 일이 일어나지 않기 때문입니다.

내가 무엇이 누락 되었습니까?

감사

Answer 1

은 30 °로 설정 "r30 320 240" 점 (320,240)에 대한 대상물의 회전 변환. 회전에 추가되지 않습니다. 이전의 모든 변환을 덮어 씁니다.

이 예를 보면 :

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

당신은 내가 점 (0,0)에 대한 원의 회전을 설정하고 있음을 볼 수 있습니다. 점 (0,0)을 시계의 중심으로 간주하면 원이 3시에 시작됩니다. 변환 "r90 0 0"을 사용하면 원이 3시 방향에서 6시 방향으로 회전합니다. 나중에 변환을 "r30 0 0"으로 설정하면 원은 4시 방향에 있고 점 (0,0)을 기준으로 원래의 3시 위치에서 30 도로 회전합니다.