Raphael.js：在我的情况下，如何拖动路径的一侧？

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到rect元素的平移x，y位置的坐标进行动画处理，并在mousemove上同时更新路径。