Raphael.js attr函数设置了错误的值 [英] Raphael.js attr function sets wrong value

问题描述

我正在用Raphael.js实现一个拖放系统。为此，我将原始的x和y位置存储在mousedown上，如果鼠标上有碰撞，我想将位置重置为原始位置。以下是重置的代码（this指的是raphael对象）：

I'm implementing a drag and drop system with Raphael.js. For this, i'm storing the original x and y position on mousedown, and if there is a collision on mouseup, I want to reset the position to the original one. Here's the bit of code that does the resetting ("this" refers to the raphael object here):

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

在设置属性后，变换字符串会改变几个像素，这很奇怪。我调试了这个：

What's weird is that after setting the attribute, the transform string changes by a couple pixels. I debugged this with:

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

AFAIK，两种记录值在任何情况下都应相等。但它们有时会下降20px。有谁知道这里发生了什么？

AFAIK, both logged values should be equal in any case. But they are sometimes off by as much as 20px. Does anyone know what's going on here?

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

E: Here is a simplified version, without the collision testing, which still reproduces the bug: http://jsfiddle.net/6ozsfdaf

推荐答案

我不确定为什么会这样。我甚至尝试使用 onmousedown 事件在 onstart 之前捕获坐标，即使这不起作用。 Raphael提供的不同方法是使用 getBBox（）获取坐标，访问 x 和 y 直接，没有帮助。

I'm not sure why this is happening. I tried even capturing the co-ordinates before onstart using onmousedown event, even that didnt work. Also different methods provided by Raphael to get the co-ordinates using getBBox(), accessing x and y directly, didnt help.

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

So what I thought is, we should Maintain and Track the coordinates manually. So I have used your original_x and original_y variables which captures the position of the <path> after you create and set with some transform value. Below is the code of the same

这是工作的小提琴。

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 和 updated_y ，将在 move 方法中更新。 onFinish / onUp方法，我们可以检查是否应该更新新位置。在这里，它只是询问是否应该更新新位置，并根据我们的输入，设置最终结果。

We will have one more coordinate say updated_x and updated_y, which will be updated in the move method. onFinish/onUp method, we can have the check whether we should update the new position or not. Here, it just asks whether new position should be updated or not and based on our input, it sets the final result.

检查此小提琴：

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, ">");
};

这篇关于Raphael.js attr函数设置了错误的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！