Kineticjs вращать круг

Question

Я хочу повернуть круг вокруг центра холста.

Я пытался сделать это как в этом уроке: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/ (redRect - как этот прямоугольник), но когда я устанавливаю смещение, мой круг смещается из его исходного положения.

Как я могу повернуть свой круг, чтобы сделать его орбитальным центром холста без использования смещения?

Answer 1

Вы можете использовать "старомодный" тригонометрии:

Демо: http://jsfiddle.net/m1erickson/ZdZR4/

Вы можете использовать requestAnimationFrame JavaScript, чтобы управлять анимацией (или Кинетика внутренней анимации, если вы предпочитаете):

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(); 
}