Kineticjs旋转一圈

Question

我想围绕画布的中心旋转圆圈。

我试图像本教程中那样做：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/（redRect - 就像这个矩形）但是当我设置偏移量时，我的圆圈会从原来的位置移开。

如何在不使用偏移量的情况下旋转圆圈使其成为轨道的中心轨道？

Answer 1

你可以使用“老式”三角学：

演示：http://jsfiddle.net/m1erickson/ZdZR4/

您可以使用javascript的requestAnimationFrame来驱动动画（如果您愿意，还可以使用Kinetics内部动画）：

function animate(){

    // request a new animation frame

    requestAnimationFrame(animate);

    // change the angle of rotation (in radians)

    rotation+=Math.PI/180;

    // use trigonometry to calculate the circle's new X/Y

    var newX=cx+radius*Math.cos(rotation);
    var newY=cy+radius*Math.sin(rotation);

    // use circle.setPosition to move the circle
    // into its new location

    circle1.setPosition(newX,newY);

    // redraw the layer so the changes are displayed

    layer.draw();
}