Question

我正在使用Raphael JS试图围绕低于其中心点的点旋转图像形状。怎么办呢？

我尝试了以下但不起作用。

var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + playBBox.width/2;
var yPos = playBBox.y;
var animObject = Raphael.animation({
    transform: playButtonRef.attr("transform") + "R60," + (this.cx - 25) + "," + this.cy
}, 3000);
animObject = animObject.repeat(10); 
playButtonRef.animate(animObject);

我也在寻找一种将其旋转回原位的方法。如何让它追溯它的路径？

Answer 1

要围绕指定的点旋转，您可以使用已定义的xPos和yPos，并修改它们以通过增加Y值来引用中心下方的点。< / LI>
要追溯其路径，您可以使用callback参数调用另一个动画调用，该调用会将形状重置为原始位置。

这里是如何让它发挥作用：

var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + (playBBox.width / 2);
var yPos = playBBox.y + 25;

var animObject = Raphael.animation({
    transform: "R60," + xPos + "," + yPos
}, 3000, function() {
    playButtonRef.animate({
        transform: "R0," + xPos + "," + yPos
    }, 3000);
});
playButtonRef.animate(animObject);

我还设置了一个working example on jsFiddle来演示它是如何完成的。

如何围绕特定点来回旋转对象？

1 个答案: