当旋转或缩放改变时，在Raphaeljs中拖动路径

Drag paths in Raphaeljs when rotation or scale is changed

本文关键字：Raphaeljs 拖动 路径 旋转 缩放 改变      更新时间：2023-09-26

我有一个关于Raphael JS库(版本2.0.0)和拖动路径的能力的问题。我让拖动函数与我的路径一起工作，但是当我改变路径的比例或旋转时，拖动函数失去了所有控制，我的元素到处飞。

我已经尝试使用拖拽库，但我可以看到它不支持拉斐尔2.0.0，因此我不能使用它，因为我在我的代码中使用Catmull-Rom曲线，这是拉斐尔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);

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
相关文章：