Перетащите пути в Raphaeljs, когда вращение или масштаб изменяется - PullRequest
Новая
       24

Перетащите пути в Raphaeljs, когда вращение или масштаб изменяется

2 голосов
/ 20 октября 2011

У меня есть вопрос, касающийся библиотеки Raphael JS (версия 2.0.0) и возможности перетаскивать мои пути.Я использую функцию перетаскивания для работы с моим путем, но когда я изменяю масштаб или поворот моего пути, функция перетаскивания теряет все управление, и мои элементы летают повсюду.

Я пытался использоватьбиблиотека draggable, но, как я вижу, она не поддерживает Raphael 2.0.0, и поэтому я не могу ее использовать, так как я использую в своем коде кривую Catmull-Rom, которая является новой функцией в Raphael 2.0.0.

Любая помощь будет принята с благодарностью!Вот мой код: 

paper = Raphael(document.getElementById("holder"), 768, 1024);

var startPath = function () {
  this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
  this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
},
movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.translate(trans_x,trans_y);
  this.ox = dx;
  this.oy = dy;
},
  upPath = function () {
  // nothing special
};

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z";

shape = paper.path(drawing);;
shape.translate(0,0);
shape.scale(1,1);

shape.attr({
  'stroke': '#000000',
  'fill': 'blue',
  'stroke-width': '5',
});

shape.drag(movePath, startPath, upPath);

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

shape.scale(2,2);
shape.rotate(90);

1 Ответ

2 голосов
/ 21 октября 2011

Raphael 2.0 использует SVG-матрицу, а метод translate добавляет только translate к текущей матрице. Вместо этого вы должны использовать абсолютные координаты, например: 

movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.transform("T"+[trans_x,trans_y]);
  this.ox = dx;
  this.oy = dy;
}

Может быть, this.attr ("x") и this.attr ("cx") также являются точкой преобразования матрицы, и тогда вам нужно получить абсолютное значение, используя: 

x = this.matrix.e;
y = this.matrix.f

Обратите внимание, что приведенный выше код не проверен.

...