Question

我有一个关于Raphael JS库（版本2.0.0）的问题以及拖动路径的能力。我得到了拖拽功能来处理我的路径，但是当我改变路径的比例或旋转时，拖拽功能失去了所有控制权，我的元素随处可见。

我曾尝试使用draggable-library，但我可以看到它不支持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

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

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

1 个答案: