Путь с Рафаэлем

Question

Как я могу изменить положение пути с Raphael JS?

очень странно, что очевидный способ не работает:

var p = paper.path("some path string");

p.attr("fill","red");
p.attr({x:200,y:100});  //not working

Answer 1

Используйте

var p = paper.path("M10 10L90 90L10 90");

p.attr("fill","red");
p.translate(300, 100);

Answer 2

Чтобы переместить путь в Raphael 2.0+, установите или анимируйте атрибут transform с помощью translate ('t'), например так:

// animate
someElement.animate({transform: ['t',100,100]}, 1000);

// set
someElement.attr({transform: ['t',100,100]});

Это заменяет любой существующий перевод. Итак, это ...

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50,50]}, 1000);
});

... переместится вниз на 100 пунктов вправо, затем вернется на 50 пунктов вверх влево, заканчивая вниз на 50 пунктов вправо от того места, где оно началось. (если оно было повернуто, оно будет учитывать это вращение - используйте «T» вместо «t», чтобы игнорировать предыдущее вращение)

---

Если вы хотите, чтобы он перемещался на основе относительных, а не абсолютных координат , исходя из того, где он сейчас находится не там, где он был при первом переводе, вам нужно получить предыдущий перевод -координировать и применять их.

Это сложнее, чем вы могли ожидать. Есть два способа, о которых я знаю:

1: сохранить данные преобразования в someElement.data()*:

someElement.data('t',[100,100]);
// stuff happens...
var translate = someElement.data('t');

2: получить данные преобразования, используя someElement.transform(), а затем разобрать их, например *:

var transform = someElement.data();
for (var i = transform.length - 1; i >= 0; i--) {
  if(transform[i][0].toLowerCase() == 't') {
    var translate = [ transform[i][1], transform[i][2] ];
    break;
  }
};

* Отрегулируйте, если вам нужно отличить 't' от 'T'

Затем, чтобы оживить движение и продолжать идти ...

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50+translate[0],50+translate[1] ]}, 1000);
});

Не поддавайтесь искушению использовать getBBox() для этого ( стандартный способ получить позиции элемента Рафаэля для любого типа элемента). getBBox() будет включать любое нетранслируемое движение, например, перемещение M в определении пути.

Answer 3

Я сделал это, используя что-то вроде этого:

p.attr({path:"M10 10L90 90L10 90"});

Answer 4

translate является абсолютным, если вам нужно относительное позиционирование, вы можете использовать p.attr`, чтобы изменить параметр «M»