Рафаэль 2.0 - как правильно установить точку поворота - PullRequest
Новая
       57

Рафаэль 2.0 - как правильно установить точку поворота

1 голос
/ 15 декабря 2011

Я не понимаю, как вращать мой объект в определенной точке.Это javascript, который у меня есть 

            // create needle 
            var rsr = Raphael('rsr', '320', '240'); 
            var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
            4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
            '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
            'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
            opacity": '1',"stroke-dasharray": 'none'}); 

            needle.rotate(0); 
            needle.transform("t0,-812.36218").data('id', 'needle'); 

            // get needle bounding box 
            var needleBox = needle.getBBox(); 

            // calculate rotation point (bottom middle)
            var x_rotate_point = needleBox.x + (needleBox.width/2); 
            var y_rotate_point = needleBox.y + needleBox.height; 

            // rotate needle
            needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
            +","+y_rotate_point}, 6000); 

            // Creates circle at rotation point 
            var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
            circle.attr("fill", "#f00"); 
            circle.attr("stroke", "#fff");

Я создал фиктивный круг, чтобы проверить, правильны ли мои координаты моей центральной точки, и он не вращается вокруг этой точки: - /

Когда я создавал датчики в разных системах, которые всегда казались подходящими, но эта логика, похоже, не очень хорошо подходит для Raphael 2.0.

Я сделал это для Google и нашел несколько записей, кромеКажется, проблема в старых версиях, которые плохо переводятся, потому что многое изменилось или устарело.

1 Ответ

7 голосов
/ 16 декабря 2011

Вы правильно устанавливаете центр вращения, но происходят некоторые другие вещи, которые вызывают некоторую путаницу.Я смог заставить это работать, изменив цель анимации на: 

{transform: needle.attr("transform") + "R45,"+x_rotate_point+","+y_rotate_point}

Я думаю, так, как вы это делали, анимация постепенно удаляла предыдущий перевод, а также выполняла вращение.Это дополнение позволяет ему накапливать преобразования.Кроме того, обратите внимание, что мне пришлось переключить «R» на «R».Мне не совсем понятно, что делает маленький 'r' в этом примере.

В любом случае, вот рабочая демо .

Кстати, я также прокомментировалнесколько вращений, которые, кажется, ничего не делают.

...