raphael - Raphael.js で更新された円の位置を取得できません

Question

で円の周りをドラッグしようとしていますが、円の正しい新しい位置を設定するために円が更新されないようですraphael.js。cxcy

コードは次の場所で確認およびテストできます: 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);

jsフィドル