CODEWITHSUNDEEP
raphaeljavascript
Mellon
Mellon

Reputation: 38932

Raphael.js : How to drag one side of the path in my case?

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

Upvotes: 1

Views: 3154

Answers (2)

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

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.

Upvotes: 1

methodofaction
methodofaction

Reputation: 72465

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

​

Upvotes: 7

Related Questions