如何使用拉斐爾js庫拖動旋轉的形狀

我已經做了大量關於拖動拉斐爾庫創建的對象的示例。現在我正在使用集合，並且還能夠編寫代碼來拖動它們。如何使用拉斐爾js庫拖動旋轉的形狀

現在當我旋轉一個物體然後拖動它時，出現了我的問題。

看看這個代碼示例：demo

var paper = Raphael('stage', 300, 300); 
var r = paper.rect(50,100,30,50).attr({fill:"#FFF"}).rotate(45), 
    t = paper.text(30, 140, "Hello"); 

var p = paper.set(r, t); 

r.set = p, t.set = p; 


p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false, 

start = function() { 

}, 
move = function (dx, dy) { 
    var a = this.set; 
    a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy; 
    if(a.reInitialize) 
    { 
     a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false; 
    } 
    else 
    { 
     a.newTX+=a.tAddX,a.newTY+=a.tAddY; 
     a.attr({transform: "t"+a.newTX+","+a.newTY}); 
    } 

}, 
up = function() { 
    this.set.reInitialize=true; 
}; 
p.drag(move, start, up);

通過檢查演示中，你可以看到集與旋轉矩形創建的，但一旦你拖動它，它會回到0度狀態。爲什麼？任何解決方案

來源

2013-05-28 Gago

我發現了一個簡單的解決方案來解決這個問題。因爲我需要有一個菱形而不是矩形，所以我創建了一條代表這顆鑽石的路徑。然後這條路徑變成45度旋轉的正方形。事實證明，這很容易，因爲我的程序拖動功能與路徑完美匹配。

來源

2013-07-07 06:47:43 armanxxx

問題是，無論何時通過應用包含移動，旋轉，縮放等指令的字符串來轉換元素，它都會重置轉換對象，因此之前的轉換會丟失。爲避免這種情況，請在轉換字符串的開頭添加「...」。像，

var el = paper.rect(10, 20, 300, 200); 
// translate 100, 100, rotate 45°, translate -100, 0 
el.transform("t100,100r45t-100,0"); 
// NOW, to move the element further by 50 px in both directions 
el.transform("...t50,50");

如果「t50,50」代替「...... t50,50" ，那麼‘t100,100r45t-100,0’丟失和」 T50變換效果變換效果， 50「規則。爲進一步研究

拉斐爾參考：http://raphaeljs.com/reference.html#Element.transform

希望這有助於。

來源

2013-05-30 11:27:12 NRC

可能不是OP使用的解決方案，但這解釋了爲什麼*。 – pjmorse

如何使用拉斐爾js庫拖動旋轉的形狀

回答

相關問題