Question

我试图在Raphael.js中做一个简单的动画，其中paper.text对象从当前位置移动到另一个位置。以下是我的一些代码（发布所有代码的内容太多了）：

songPos = getSongPosition(this, charIndex);
letter.path.animate({x: songPos.x, y: songPos.y, "font-size": this.correctFontSize}, 500, onAnimationComplete);

以下是上述代码中引用的Letter对象：

function Letter(args)
{
    this.letter = args.letter || "A";
    this.correct = args.correct || false;
    this.transformation = args.transformation || "";
    this.initX = args.x || 0;
    this.initY = args.y || 0;
    this.path = null;
}

Letter.prototype.buildPath = function()
{
    this.path = paper.text(this.initX, this.initY, this.letter);
    if(this.transformation)
    {
        this.path.transform(this.transformation);
    }
    return this;
};

问题是我打印x返回的y和getSongPosition值，并且它们是正确的，但是animate方法正在发送我的文本对象屏幕外的某个地方。我还尝试将动画属性设置为{x: 0, y: 0}，但我仍然得到相同的结果。如果有必要，我可以发布更多代码。

非常感谢任何帮助。

更新1： 我的程序的一部分要求我能够将对象移动到特定的坐标。有些物体会旋转而其他物体则不会旋转，所以我写了这个：

Letter.prototype.getMoveTransform = function(x, y)
{
    var bbox = this.path.getBBox(true);
    var dx = x - bbox.x;
    var dy = y - bbox.y;
    return "T" + dx + "," + dy + (this.transformation == null ? "" : this.transformation);
};

我相信这是我问题的根源。该函数应该生成将旋转对象移动到（x，y）所需的变换。我不确定为什么我必须在每个动画上重新旋转对象。

更新2： 我以某种方式解决了我的问题。我会发布我的解决方案，但我不明白为什么其中任何一个工作/不再起作用。

Answer 1

this.path.getBBox（真）;应该是this.path.getBBox（）或this.path.getBBox（false）;

每次都需要变换位置来计算dx和dy

Raphael.js为什么要设置不正确的坐标？

1 个答案: