Question

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

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

Answer 1

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

查看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

无法通过Raphael.js获得更新的圈子位置

1 个答案: