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/

​