問題描述
Raphael.js：在我的情況下如何拖動路徑的一側？ (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);
‑‑‑‑‑
參考解法
方法 1:
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/
方法 2:
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.
(by Mellon、methodofaction、Ashwin Krishnamurthy)