为什么Raphael.js的动画设置到不正确的坐标
Why is Raphael.js animating to incorrect coordinates?
我试图在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;
};
问题是,我正在打印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:我不知怎么解决了我的问题。我会发布我的解决方案,但我不明白为什么这些一开始就有效/不起作用了。
this.path.getBBox(true);应为this.path.getBBox()或this.path.getBBox)(false);
每次都需要得到变换后的位置来计算dx和dy
相关文章:
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Amazon S3 REST API大小不正确
- Javascript Reg Exp不正确匹配
- DIV并排,位置不正确
- 仅在IE中,javascript中的时区名称不正确
- 注意:wp_enqueue_script调用不正确.在 Wordpress 调试模式下
- 你能解释一下为什么这个javascript不正确吗
- 从int值来看,Javascript日期不正确
- jQuery-迭代不正确?(太长,无法执行)
- 字符串解析不正确
- 日历显示不正确
- 引导程序下拉列表显示不正确
- Node.js:多个然后'It’执行顺序不正确
- Highcharts热图显示不正确
- D3JS 图绘制在不正确的坐标处
- 开放层 - 像素坐标不正确
- 为什么Raphael.js的动画设置到不正确的坐标
- css缩放的谷歌地图点击不正确的坐标
- firefox中的Google地图mouseevent显示不正确的坐标
- 谷歌地图坐标不正确