當旋轉或縮放改變時在Raphaeljs中拖動路徑

我有一個關於Raphael JS庫（2.0.0版）的問題並且能夠拖動我的路徑。我得到了拖動功能來處理我的路徑，但是當我改變路徑的縮放比例或旋轉角度時，拖動功能失去了所有的控制權，而且我的元素在各處飛行。當旋轉或縮放改變時在Raphaeljs中拖動路徑

我試圖使用可拖動庫，但因爲我可以看到它不支持拉斐爾2.0.0，因此我無法使用它，因爲我在我的代碼中使用Catmull-Rom curveto Raphael 2.0.0中的新功能。

任何幫助將不勝感激！這裏是我的代碼：

paper = Raphael(document.getElementById("holder"), 768, 1024); 

var startPath = function() { 
    this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); 
    this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); 
}, 
movePath = function (dx, dy) { 
    var trans_x = (dx)-this.ox; 
    var trans_y = (dy)-this.oy; 

    this.translate(trans_x,trans_y); 
    this.ox = dx; 
    this.oy = dy; 
}, 
    upPath = function() { 
    // nothing special 
}; 

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z"; 

shape = paper.path(drawing);; 
shape.translate(0,0); 
shape.scale(1,1); 

shape.attr({ 
    'stroke': '#000000', 
    'fill': 'blue', 
    'stroke-width': '5', 
}); 

shape.drag(movePath, startPath, upPath);

所以，這是工作，但只要我添加例如下面的代碼是不工作：

shape.scale(2,2); 
shape.rotate(90);

來源

2011-10-20 HenrikSolberg

拉斐爾2.0使用SVG矩陣和翻譯方法僅將轉換添加到當前矩陣。你應該考慮使用絕對座標代替，如：

movePath = function (dx, dy) { 
    var trans_x = (dx)-this.ox; 
    var trans_y = (dy)-this.oy; 

    this.transform("T"+[trans_x,trans_y]); 
    this.ox = dx; 
    this.oy = dy; 
}

也許this.attr（「X」）和this.attr（「CX」）也是一個矩陣轉換點，然後你需要得到絕對值使用：

x = this.matrix.e; 
y = this.matrix.f

請注意，上述代碼未經測試。

來源

2011-10-21 09:33:02 Hogberg

感謝您的輸入！我只需更改一小部分代碼即可得到我想要的結果： this.transform（「... T」+ [trans_x，trans_y]）; – HenrikSolberg

當旋轉或縮放改變時在Raphaeljs中拖動路徑

回答

相關問題