Raphael.js：如何在我的情況下拖動路徑的一側？

我正在使用Rahael.js庫。Raphael.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);

來源

2011-08-02 Mellon

面膜用透明rect元素的路徑的端部，並從當前的X，Y向平移x時，rect元素的y位置動畫的座標和保持在鼠標移動同時更新路徑。

來源

2011-08-02 08:31:59

您的解決方案看起來不完整的香檳 –

啊，這只是一個想法。如果需要，我可以提供必要的代碼，但OP尚未回覆。 –

您需要一個就像一個「把手」的第二元素，使該元素可拖動，然後更新您的線路路徑：

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/

來源

2012-03-12 04:35:26 Duopixel

是的，這就是我所說的。然而@Duopixel使用了一個圓而不是rect元素。 +1 :) –

我有一種情況，我循環瀏覽JSON數據，併爲JSON數據中的每個元素創建相應的路徑和圓圈。我如何訪問被拖動的圓圈下的路徑？我已經設置了一個命名約定，其中圓圈下的路徑設置爲「路徑」+「circleNameValue」的標識。我已經嘗試了一些DOM腳本技巧，但似乎不太好用 –

鏈接到上面的代碼與'代碼'：http://stackoverflow.com/questions/9625286/making-one-side-of-a-path -draggable功能於拉斐爾-2-0 –

Raphael.js：如何在我的情況下拖動路徑的一側？

回答

相關問題