Question

我正在使用Rahael.js库。

如果我有路径：

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

我想实现当鼠标拖动一侧时的功能路径线，路径的另一边保留在原始路径中拖动的一侧将与鼠标一起移动。那就像一个拖放功能。怎么实现呢？

我不知道如何更新使用raphael drag（）函数的路径属性。

var start = function () {

},
move = function (dx, dy) {
    //How to update the attribute of one side of the path here
},
up = function () {

};
mypath.drag(move, start, up);

Answer 1

你需要第二个元素，就像一个“句柄”，使该元素可拖动，然后更新你的行路径：

var paper = Raphael('canvas', 300, 300);
var path = paper.path("M10 10L90 90");
var pathArray = path.attr("path");
handle = paper.circle(90,90,5).attr({
    fill: "black",
    cursor: "pointer",
    "stroke-width": 10,
    stroke: "transparent"
});

var start = function () {
  this.cx = this.attr("cx"),
  this.cy = this.attr("cy");
},
move = function (dx, dy) {
   var X = this.cx + dx,
       Y = this.cy + dy;
   this.attr({cx: X, cy: Y});
   pathArray[1][1] = X;
   pathArray[1][2] = Y;
   path.attr({path: pathArray});
},
up = function () {
   this.dx = this.dy = 0;
};

handle.drag(move, start, up);

http://jsfiddle.net/TfE2X/

Answer 2

使用透明的rect元素屏蔽路径的末端，并将当前x，y的坐标设置为矩形元素的平移x，y位置的动画，并在mousemove上同时保持更新路径。

Raphael.js：如何在我的案例中拖动路径的一侧？

2 个答案: