无法通过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