Kinetic JS - image rotation based on rotating another object and counter-clockwise rotation

Question

I am trying to rotate an image using the mouse angle: First I calculate the mouse degree using:

                mouseX = parseInt(e.clientX - offsetX);
                mouseY = parseInt(e.clientY - offsetY);
                var mouse_x = e.pageX; var mouse_y = e.pageY;
                var radians = Math.atan2(mouse_y - crossY, mouse_x - crossX);
                if (radians < 0) radians += 2.0 * Math.PI;
                degree = (radians * 180 / Math.PI + 90) % 360;

Then I made a circle in the center of the stage (re calculate the offset depending where the circle is); when I drag the circle the image rotates, using the following:

  circle2.on('dragmove', function (event) {
            var newangle = dImage1.getRotation();
            $("#newangle").html(newangle);
            dImage1.rotate((degree - newangle) / 36000); // I used 36000 as a factor to calibrate the degree of rotation
            dlayerA1.draw();
        });

The first question is I could not figure out the correct factor to rotate the image based on the circle rotation. The second question is how I can rotate the circle counter-clockwise?

The complete demo is at http://jsfiddle.net/user373721/pz7W8/.

Would appreciate your assistance, thanks in advance.

Answer 1

I believe .rotate() only adds angles what you want is .setRotation(), that will allow rotation forwards and backwards;

http://jsfiddle.net/pz7W8/2/

    dImage1.setRotation((degree - newangle) / 180); // Keep experimenting what number to divide by