raphaeljs克隆和拖動

我有一些圈子，我用拖動按鈕，我可以分配拖動事件到這些，它工作正常，但我想克隆和拖動它們，所以我結束了多個按鈕（儘可能多）。我如何克隆然後拖動克隆的對象？raphaeljs克隆和拖動

這是我

var a = r.circle(20, 50, 15) 
// drag handler 
     var start = function(x,y,event) { 
      this.ox = this.attr("cx"); 
      this.oy = this.attr("cy"); 
      this.animate({r: 20, opacity: .25}, 500, ">"); 
     }, 
     move = function(dx, dy) { 
      this.attr({cx: this.ox + dx, cy: this.oy + dy}); 
     }, 
     up = function() { 
      this.animate({r: 15, opacity: .5}, 500, ">"); 
     }; 
a.drag(move, start, up);

我曾嘗試過各種東西，克隆「A」，在開始克隆「這個」，但我的js知識有限，因此任何幫助，將不勝感激。

謝謝！

來源

2011-10-20 nickjb

不知道拉斐爾具有通用節點克隆功能，但克隆一個圓圈可以手動做這樣的事情

var circle = r.circle(x, y, r); 
var clone = r.circle(circle.cx, circle.cy, circle.r); 
clone.attr({ attr1: circle.attr1, ...);

編輯來完成： aparent你可以簡單地調用circle.clone（）代替（Element.clone）

至於克隆時拖動，它可能不是簡單的做，因爲一旦拖動開始我想你不能改變被拖動的對象。在這裏你的選擇可能是：

克隆拖動開始時圓，拖到原來的項目，並在其原來的地方離開副本（這是一個糟糕的主意，如果您有連接到原始項事件處理程序）
按照上述步驟操作，但是在拖動結束後切換原始位置和複製位置（可能會產生閃爍）
找到編程方式取消拖動原始項目並觸發拖動其副本的方法，而在同時注意這不會發展成無限遞歸

來源

2011-10-20 17:05:39 rsalmeidafl

嘗試使用對象。

我創建了一個對象來封裝Raphael對象和拖動函數。

function Button(ix,iy,ir) 
{ 
// grab a reference to the objects "this" 
var that = this; 
that.a = r.circle(ix, iy, ir).attr({"fill":"red"}) 
// drag handler 
    that.start = function(x,y,event) { 
     that.a.ox = this.attr("cx"); 
     that.a.oy = this.attr("cy"); 
     that.a.animate({r: 20, opacity: .25}, 500, ">"); 
    } 
    that.move = function(dx, dy) { 
     that.a.attr({cx: that.a.ox + dx, cy: that.a.oy + dy}); 
    } 
    that.up = function() { 
     that.a.animate({r: 15, opacity: .5}, 500, ">"); 
    }; 
that.a.drag(that.move,that.start,that.up); 
return that; 
}

這裏重要的是捕獲變量中的「this」引用，並使用變量在拖動函數中引用它。

這樣做的原因是當拖動調用「move」，「start」和「up」時，這個對象不會引用您的對象。「這個」經常變化。通過使用「that」，你鎖定了在這些方法中使用的對象。

Here's更好的解釋「that = this」。（請務必爲寂寞天提供一個絕佳的解釋）

這是一個fiddle，它創建兩個可以獨立拖動的按鈕。

希望幫助

來源

2011-10-20 21:16:28 amadan

謝謝，但拖是不是問題，如何克隆按鈕，然後拖動克隆？ – nickjb

我一定錯過了你的觀點。你想拖動按鈕，然後克隆它，然後能夠拖動兩個按鈕嗎？我更新了[小提琴]（http://jsfiddle.net/whMkT/3/）來做到這一點。 – amadan

感謝你的說法，也許我的描述不夠完美，但我想要的是在開始時有幾個按鈕。只要你點擊按鈕並拖動它，它就會創建一個新的按鈕，這個按鈕將被拖動，原來的位置和原始位置不變。我實際上經過多次試驗和錯誤發現了一個不同的解決方案，使用mousemove（在下面的答案中有詳細說明），但是我認爲使用克隆按鈕的方法也可以。再次感謝 – nickjb

我自己的解決方案使用鼠標移動，看到我jsfiddle

其複製在移動開始，鼠標按下，鼠標鬆開，單擊不工作，但這樣做

a.mousemove(clone_handler); 
var clone_handler = function() { 
var x = this.clone(); 
x.drag(move, start, up);

來源

2011-10-21 21:00:18 nickjb

raphaeljs克隆和拖動

回答

相關問題