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. Затем применяется преобразование, например («r30 320 240»), когда угол равен 30.

Как это преобразование работает? То, как я прочитал это преобразование, - это поворот круга на 30 градусов вокруг 320,450, затем перемещение 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 часа, повернут на 30 градусов от исходного положения 3 часа относительно точки (0,0).