Рафаэль 2 вращать и переводить - PullRequest
Новая
       0

Рафаэль 2 вращать и переводить

4 голосов
/ 11 октября 2011

Вот мой сценарий: 

<script>
Raphael.fn.polyline = function(pointString) {
    return this.path("M" + pointString);
};

window.onload = function() {

var paper = Raphael("holder", 500, 500);
paper.circle(100, 175, 70).attr({"stroke-width":10, "stroke":"red"});

var a = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(25, 100, 175);
var b = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(45, 100, 175);
var c = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(65, 100, 175);

var group = paper.set();
group.push(a, b, c);

group.translate(60);

};
</script>

Когда я использую Raphael-1.5.2, результат будет: enter image description here

Когда я использую Raphael 2.0, результат будет: enter image description here

В 1.5.2 он использует преобразование поворота для поворота объектов вокруг круга, а в 2.0 он использует матричное преобразование.Я предполагаю, что матричное преобразование преобразует систему координат для этого объекта, поэтому при последующем переводе объекта в направлении xy он переводит его в относительное для этого объекта значение xy.

Мне нужно добавитьзеленые объекты по краю красного круга, а затем сможете перетаскивать и перемещать все в одном направлении.Я застрял на 1.5.2 или мне просто не хватает, как изменился перевод в 2.0?

Ответы [ 2 ]

5 голосов
/ 01 декабря 2011

Используйте абсолютное преобразование вместо перевода.Скажем, вы хотите переместить 100 в x и 50 в y, сделайте следующее: 

Element.transform("...T100,50");

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

Существуют также альтернативные «абсолютные» перевод, вращение и масштаб: T, R и S. Они не будут учитывать предыдущее преобразование.Например, ... T100,0 всегда будет перемещать элемент на 100 пикселей по горизонтали, тогда как ... T100,0 может перемещать его по вертикали, если раньше было значение r90.Просто сравните результаты r90t100,0 и r90T100,0. См. Документацию

Что касается перевода, в соответствии с документацией Raphael JS 2.0 перевод делает это:

Добавляет перевод на заданную сумму в списокпреобразования элемента. См. Документацию

Итак, что происходит, это добавляет относительное преобразование, основанное на том, что уже применено к объекту (оно в основном делает "... t100,50").

0 голосов
/ 12 октября 2011

Я подозреваю, что с 1 ваше преобразование правильно обрабатывает набор как один объект, но с 2 маленькие зеленые вещи вращаются независимо друг от друга. Два - это полный редизайн, поэтому будут происходить небольшие разъединения, как это. Используйте getBBox и найдите центр вашего набора, затем1 команда поворота на весь набор, указывающая cx cy, полученную из getBBox

...