RaphaelJS - мне нужна помощь в понимании преобразования - PullRequest
Новая
       48

RaphaelJS - мне нужна помощь в понимании преобразования

4 голосов
/ 01 апреля 2012

У меня вопрос по поводу следующей демонстрации - 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 по вертикали вниз.

Но я явно читаю это преобразование неправильно, потому что это не то, что происходит.

Что мне не хватает?

Спасибо

1 Ответ

6 голосов
/ 02 апреля 2012

Преобразование "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).

...