javascript - 更改旋转或比例时在 Raphaeljs 中拖动路径

Question

我对 Raphael JS 库(2.0.0 版)和拖动路径的能力有疑问。我让拖动功能与我的路径一起工作，但是当我改变我的路径的比例或旋转时，拖动功能失去所有控制并且我的元素到处乱飞。

我曾尝试使用可拖动库，但据我所知，它不支持 Raphael 2.0.0，因此我无法使用它，因为我在我的代码中使用了 Catmull-Rom curveto，这是一个新的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);

Answer 1

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

请注意，以上代码未经测试。