CODEWITHSUNDEEP
rotationkineticjsgeometry
Bartek Kosa
Bartek Kosa

Reputation: 842

Kineticjs rotate a circle

I want to rotate circle around the center of the canvas.

I was trying to do it like in this tutorial: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/ (redRect - like this rectangle) but when I set offset, my circle is shifted from its original position.

How can I rotate my circle to make it orbit araund center of canvas without using offset?

Upvotes: 0

Views: 280

Answers (1)

markE
markE

Reputation: 105015

You can use "old-fashioned" trigonometry:

Demo: http://jsfiddle.net/m1erickson/ZdZR4/

You can use javascript's requestAnimationFrame to drive the animation (or Kinetics internal animation if you prefer):

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

Upvotes: 1

Related Questions