在拉斐尔中将对象作为一个组旋转

Rotate objects as a group in Raphael

本文关键字:一个 旋转 对象      更新时间:2023-09-26

我是Raphael的新手,我正在尝试让两个圆在与画布中心相关的圆形轨道上移动。

在这里我做了省略号来说明这个情况。黑点是画布的中心。

http://jsfiddle.net/QCSb9/

我用set()对圆进行分组,但当试图旋转它们时,它们单独使用自己的中心进行旋转,我认为对这些圆进行分组时,组的新几何体会发生变化,变成黑点,即组的中心。

如何将这些圆作为一个对象连续旋转。

这是我正在使用的代码:

$().ready(function(){
                var paper = Raphael("canvas", 640, 480);
                paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});  
                paper.circle(320, 240,  1).attr({"fill":"#000000","stroke-width":0});                
                var circles = paper.set();
                circles.push(
                    paper.ellipse(200, 240, 30, 25),
                    paper.ellipse(440, 240, 30, 25)
                );
                circles.attr({"fill":"#e00000","stroke-width":0});
                var anim = Raphael.animation({"transform":"r360"},2000);
                circles.animate(anim.repeat(Infinity));
            });

已解决:问题是将旋转中心指定为"r360320240"

var anim = Raphael.animation({"transform":"r360,320,240"},2000);

rotate()被弃用,但解释了允许的参数:

http://raphaeljs.com/reference.html#Element.rotate

这里是jsfiddle.net 上更正的示例

http://jsfiddle.net/SW3sP/1/