RaphaelJS轮换不起作用 [英] RaphaelJS rotation not working

问题描述

我正用这个把头撞在墙上。我有raphael js版本2.0，我需要让图像以跨浏览器的方式旋转。我很乐意在CSS3中做到这一点，但并非所有的浏览器都支持我需要做的事情。

所以，在绞尽脑汁之后，我去了拉斐尔游乐场并尝试过那里有一些代码。在那里也不起作用。这里发生了什么？

去游乐场： http：/ /raphaeljs.com/playground.html
运行此代码，应该看到正方形的轮廓。
paper.rect（100,100,300,300）.animate（{rotation： - 45}，2000）;

使用转换工作：

paper.rect（100,100,300,300）.animate（{transform：r45}，2000）;

但不幸的是，转换时，我似乎无法指定一个中心点。我希望对象从左下角旋转。我可以用这段代码做到这一点：

paper.rect（100,100,300,300）.rotate（45,0,300）

但是没有动画，或者接受缓和，或者有任何回调。

我看过几个例子中的轮换，包括： / p>

http：//www.irunmywebsite .com / raphael / additionalhelp.php #PAGETOP
http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

谢谢，
- keith

解决方案

旋转属性似乎从2.0规范。它存在于1.x.我不知道为什么会这样，但我在新文档中找不到它。我希望这是一个疏忽，将在未来的小修订中得到纠正。

在此期间，您可以创建自己的动画处理程序并在每个刻度线上调用.rotate根据你自己的宽松政策。

I'm banging my head against a wall with this one. I have raphael js version 2.0 and I need to make images rotate in a way that's cross-browser. I would love to do it in CSS3, but not all browsers support what I need to do.

so, after racking my brain, I went to the Raphael playground and tried out some code in there. Doesn't work there either. What's going on here?

go to playground: http://raphaeljs.com/playground.html run this code, should see an outline of a square. paper.rect(100, 100, 300,300).animate({rotation:"-45"}, 2000);

using transform works:

paper.rect(100, 100, 300,300).animate({transform:"r45"}, 2000);

but unfortunately with transform, I can't seem to specify a centerpoint. I want the object to rotate off the bottom-left corner. I can do that with this code:

paper.rect(100, 100, 300,300).rotate(45,0,300)

but that doesn't animate, or accept easing, or have any callbacks.

I've seen "rotation" in several examples including these:

http://www.irunmywebsite.com/raphael/additionalhelp.php#PAGETOP http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

thanks, - keith

解决方案

The rotation attribute seems to be missing from the 2.0 specification. It existed in 1.x. I don't know why this is so, but I can't find it in the new documentation. I expect this is an oversight that will be corrected in a minor revision going forward.

In the meantime, you can create your own animation handler and call .rotate on each tick based on your own easing.

这篇关于RaphaelJS轮换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！