無法通過Raphael.js獲取更新圈位置

Question

我正在嘗試用raphael.js拖動一圈，但似乎cx和cy未針對圈子進行更新以設置圈子的正確新位置。

的代碼可以看出，在這裏進行測試：http://jsfiddle.net/MXFWW/

Answer 1

正如你已經發現，應用變換到拉斐爾對象不改變它的位置屬性。

查看transform method中的省略號語法。因爲轉換非常頭疼，所以我更喜歡在簡單情況下直接改變屬性。您只需記住使用.data（）方法存儲任意數據的dragStart函數的起始位置。

var paper = Raphael(0, 0, 320, 320); 
var innerC = paper.circle(320/2, 320/2, 20); 
innerC.attr("stroke", "#000"); 
innerC.attr("fill", "#000"); 


var dragMove = function (dx, dy, x, y, e) { 
    console.log(innerC.attr('cx')); 
    this.attr("cx", this.data("ox") + dx); 
    this.attr("cy", this.data("oy") + dy); 
    this.animate({ 
     "fill-opacity": 1 
    }, 500); 
}, 
dragStart = function (x, y) { 
    this.data("ox", this.attr("cx")); 
    this.data("oy", this.attr("cy")); 
}, 

dragEnd = function() { 
    this.animate({ 
     "fill-opacity": 1 
    }, 500); 
}; 

innerC.drag(dragMove, dragStart, dragEnd); 

jsFiddle