Raphael.js attr 函数设置了错误的值

我正在使用 Raphael.js 实现拖放系统。为此，我存储了 mousedown 上的原始 x 和 y 位置，如果 mouseup 上发生碰撞，我想将位置重置为原始位置。这是执行重置的代码（“this”指的是此处的 raphael 对象）：

    var transformString = "t" + this.original_x + "," + this.original_y;
    this.attr("transform", transformString);

奇怪的是，设置属性后，变换字符串改变了几个像素。我用以下方法调试了这个：

    var transformString = "t" + this.original_x + "," + this.original_y;
    this.attr("transform", transformString);
    console.log("transformString: " + transformString);
    console.log("transformAttrib: " + this.attr("transform"));

AFAIK，在任何情况下，两个记录的值都应该相等。但有时它们会偏离 20 像素之多。有谁知道这是怎么回事？

E：这是一个简化版本，没有碰撞测试，仍然重现了该错误：http://jsfiddle.net/6ozsfdaf

我不知道为什么会发生这种情况。我之前甚至尝试过捕获坐标onstart using onmousedown事件，即使这样也不起作用。 Raphael 还提供了不同的方法来获取坐标getBBox()，访问x and y直接，没有帮助。

所以我的想法是，我们应该维护和跟踪坐标手动。所以我用过你的original_x and original_y捕获位置的变量<path>创建并设置一些变换值后。下面是相同的代码

这是工作中的fiddle.

this.raph = R.path(svgPath).attr({
    stroke: "hsb(0, 1, 1)",
    fill: "#fff", 
    opacity: 1.0, 
    cx: 100, 
    cy: 900 
}).transform("t" + x + "," + y); 

this.raph.original_x = x;
this.raph.original_y = y;


//comment the lines in start method which captures original_x and original_y
//this.original_x = Raphael.parseTransformString(this.attr("transform"))[0][1];
//this.original_y = Raphael.parseTransformString(this.attr("transform"))[0][2];

有关跟踪坐标的更多信息：

我们还会有一个坐标说updated_x and updated_y，将在move方法。 onFinish/onUp 方法，我们可以检查是否应该更新新位置。在这里，它只是询问是否应该更新新位置，并根据我们的输入设置最终结果。

检查这个fiddle:

this.start = function() {
    if (this.reference.static) return;
    //this.original_x = Raphael.parseTransformString(this.attr("transform"))[0][1];
    //this.original_y = Raphael.parseTransformString(this.attr("transform"))[0][2];
    this.animate({r: 70, opacity: 0.25}, 500, ">");
    this.updated_x = this.original_x;
    this.updated_y = this.original_y;
};

this.move = function(dx, dy) {
    //var ts = Raphael.parseTransformString(this.attr("transform"));
    this.updated_x = this.original_x + dx;
    this.updated_y = this.original_y + dy;
    //ts[0][1] = this.original_x + dx; 
    //ts[0][2] = this.original_y + dy; 
    this.attr({transform: 't' + this.updated_x + ',' + this.updated_y});
};

this.up = function() {

    if(confirm("Shall I update the new position??")) {
        this.original_x = this.updated_x;
        this.original_y = this.updated_y;
    }

    var transformString = "t" + this.original_x + "," + this.original_y;
    this.attr("transform", transformString);    
    this.attr({fill: "#fff"});
    this.animate({r: 50, opacity: 1}, 500, ">");
};