Raphael.js为什么动画不正确的坐标？

我想在Raphael.js中做一个简单的动画，其中paper.text对象从其当前位置移动到另一个位置。下面是我的一些代码（有太多张贴这一切）：Raphael.js为什么动画不正确的坐标？

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

这里是在上面的代码中所引用的信对象：

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; 
};

的问题是我” m打印由getSongPosition返回的x和y值，它们是正确的，但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： 我有办法解决我的问题。我会发布我的解决方案，但我不明白为什么这些工作/没有在第一个地方工作了。

来源

2013-08-29 SimpleJ

为了帮助您在这里的时间获得转化的位置，如果你能使用jsfiddle.net – Neil

我试图重现重建你的代码的动画部分将是有益的我在jsfiddle上的问题，但我不能。我相信我已经找到了我的问题，所以我会更新我的问题。 – SimpleJ

当你做一个新的变形时，Raphael不记得你以前的变形我不认为，你必须自己处理任何以前的变形 – Neil

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

你需要每计算dx和dy

来源

2013-09-01 05:11:36 Szhang

我实际上可以通过改变'dx = x - bbox.x来获得动画效果'到'dx = x - bbox.x - bbox.width/2'。 – SimpleJ

Raphael.js为什么动画不正确的坐标？

回答

相关问题