raphael - 无法使用 Raphael.js 获取更新的圆圈位置

Question

我试图用 拖动一个圆圈raphael.js，但似乎cx并cy没有为圆圈更新，以便设置圆圈的正确新位置。

代码可以在这里查看和测试：http: //jsfiddle.net/MXFWW/

Answer 1

正如您所发现的，对 Raphael 对象应用变换不会改变其位置属性。

查看transform 方法中的省略号语法。因为转换是如此令人头疼，所以我更喜欢在简单的情况下直接更改属性。您只需要记住使用 .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