如何在Raphael中正確設置可拖動設置

人們經常想在Raphael中設置一組對象，但使用.transform()這樣做可能令人發狂。假設你是這樣開始的：如何在Raphael中正確設置可拖動設置

var paper = Raphael(0, 0, 500, 500); 
var set = paper.set(); 
set.push(paper.circle(100,100,35), paper.circle(150,150,15));  
set.attr("fill", "orange"); 
set.data("myset", set); 

set.drag(
    function(dx, dy, x, y, e) { 
     this.data('myset').transform("T" + dx + "," + dy); 
    }, 
    function(x, y, e) {}, 
    function(e) {} 
);

如果你try this out，你會看到它工作一次。但是，如果您拖動，停止，然後再次拖動，它會將位置重置爲相對於原始位置的0,0,0，如您所期望的，從.transform().不會。

在here上已觸及此問題的一個變體，受訪者建議將變量預先加上「...」。這是一切優秀和良好，但兩件事情：

你還是要跟蹤先前的位置，因爲你不想由（DX，DY）上的dragmove每次調用，將發送翻譯從屏幕飛出的物體。
如果一個對象被拖動多次，我擔心會創建一個怪物轉換。（雖然也許我不應該。）

我試探性的解決方案是跟蹤從原來的定位偏差在另一個鍵/值對，就像這樣：

var paper = Raphael(0, 0, 500, 500); 

var set = paper.set(); 
set.push(
    paper.circle(100,100,35), 
    paper.circle(150,150,15) 
);  
set.attr("fill", "orange"); 
set.data("myset", set); 
set.data("position", [0,0]); 
var current_position = [0,0]; 

set.drag(
    function(dx, dy, x, y, e) { 
     this.data('myset').transform("T" + (this.data("position")[0] + dx) + "," + (this.data("position")[1] + dy)); 
     current_position = [dx,dy]; 
    }, 
    function(x, y, e) { 

    }, 
    function(e) { 
     this.data('myset').data("position", [ 
      this.data("position")[0] += current_position[0], 
      this.data("position")[1] += current_position[1] 
     ]); 
    } 
);

你可以看到它在行動here。

它的作品，但它感覺令人難以置信的馬虎。我必須錯過一些明顯的東西，對吧？

來源

2013-03-13 Chris Wilson

作爲上面提到的變體問題的答覆者，我想指出，我並沒有完全贊同我自己的建議=）我發現這是一個反覆出現的問題，我確信必須成爲更清潔的解決方案我只是不確定它會是什麼。 – 2013-03-13 21:16:51

我的回答是類似於你最後的變種：

var onmove = function (dx,dy){ 
    this.transform(this.default_transform+'T'+dx+','+dy); 
}, 
    onstart = function(){ 
    this.default_transform = this.transform(); 
}, 
    onend = function(){ 
    this.default_transform = this.transform(); 
}; 

set.drag(onmove, onstart, onend);

不要擔心，因爲拉斐爾轉換一切以一個完整的矩陣變換，因此不會建立它不會產生一個很長很長的變換線每次移動物體時都會移動。

來源

2013-03-23 09:58:27 oyatek

如何在Raphael中正確設置可拖動設置

回答

相關問題