I am using Rahael.js library.

If I have a path:

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

I would like to implement the feature that when mouse drag one side of the path line, the other side of the path line keep in the original position while the dragged side will move with mouse. That's like a drag and pin feature. How to implement it?

I am not sure how to update a path attribute by using raphael drag() function.

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);

I am using Rahael.js library.

If I have a path:

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

I would like to implement the feature that when mouse drag one side of the path line, the other side of the path line keep in the original position while the dragged side will move with mouse. That's like a drag and pin feature. How to implement it?

I am not sure how to update a path attribute by using raphael drag() function.

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);

• raphael
• javascript

Share Follow asked Aug 2, 2011 at 7:40 MellonMellon 39k7979 gold badges193193 silver badges265265 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

You need a second element that acts like a "handle", make that element draggable and then update your line path:

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/TfE2X/

​

Mask the end of the path with a transparent rect element and animate the coordinates from the current x,y to the translated x,y position of the rect element and keep updating the path simultaneously on mousemove.