Rotating image unwanted turn at the beginning

Question

I 'm trying to improve some code from: http://www.htmldrive.net/items/show/1114/-Rotating-hover-Image-with-JQuery

So the problem is: - When i click the image (hold down mouse) the image will rotate in the beginning. How can i stop the first rotate.

Fiddle

 r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x)));
        rDiff = r - rTmp;
 if(isFirst != 1) {  
            r = img.rotation + rDiff;
            img.css("transform","rotate(-"+r+"deg)");
            img.css("-moz-transform","rotate(-"+r+"deg)");
            img.css("-webkit-transform","rotate(-"+r+"deg)");
            img.css("-o-transform","rotate(-"+r+"deg)");
            img.rotation = img.rotation + rDiff;
 } else {
           isFirst = 0;
           // rDiff should be small next time?
 }
 rTmp = r;

I'm trying to filter the first rotation. For better code view please try the fiddle.

Answer 1

Finaly, i fixed some problems...

$(document).mousemove(function(e) {
if(drag == 1) { 
        img = selectedImg;
        x1 = e.pageX;
        y1 = e.pageY;
        x = x1 - img.x0;
        y = y1 - img.y0;
        r = 180 - Math.round(((180/Math.PI) * Math.atan2(y,x)));       
        img.rotation = (img.rotation - ((tmpR - r))) ;          
        img.rotation = img.rotation % 360;
        if(img.rotation <= 0)
            img.rotation = 360;

        img.css("transform","rotate(-"+ img.rotation +"deg)");
        img.css("-moz-transform","rotate(-"+ img.rotation +"deg)");
        img.css("-webkit-transform","rotate(-"+ img.rotation +"deg)");
        img.css("-o-transform","rotate(-"+ img.rotation +"deg)");
        tmpR = r;
         $("#1").html("image.rotation -> " + img.rotation);
}});

I started all over.

Improvements: - Image rotation cant be negative - Image wil turn from last position when you start dragging

Fiddle final working

Tnx to Jacob and Coromba for thinking with me...

Answer 2

You should add the angle relative to the x-axis and the point where user clicked at the beginning of the rotation. Your current version works fine (no unwished rotation happens) if you click on the three o'clock of your picture. Just calc this angle and put in into this line:

r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x)));

I've added rShift variable that is storing initial angle shift. Looks like it helped.

var rShift = 0;
$(document).mousemove(function(e) {
    if (drag == 1) {
        img = selectedImg;
        x1 = e.pageX;
        y1 = e.pageY;
        x = x1 - img.x0;
        y = y1 - img.y0;
        r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x))-rShift);
        rDiff = r - rTmp;
        if(isFirst != 1) {  
            r = img.rotation + rDiff-rShift;
            img.css("transform","rotate(-"+r+"deg)");
            img.css("-moz-transform","rotate(-"+r+"deg)");
            img.css("-webkit-transform","rotate(-"+r+"deg)");
            img.css("-o-transform","rotate(-"+r+"deg)");
            img.rotation = img.rotation + rDiff;
        } else {
           isFirst = 0;
           // rDiff should be small next time?
        }

        rTmp = r;
    }
});

img.mousedown(function(e) {
    selectedImg = img;
    drag = 1;

    x1 = e.pageX;
    y1 = e.pageY;
    x = x1 - img.x0;
    y = y1 - img.y0;
    rShift = Math.round(((180/Math.PI) * Math.atan2(y,x))); 
});

fiddle

Answer 3

You want to limit the maximum amount an image can rotate at any one time. This doesn't fix the initial calculation, but it does add the idea of a max rotation speed. Add a global var called maxRotate. This will control how fast the image rotation can change at any one time. See the code below:

var selectedImg;
var drag = 0;
var isFirst = 0;
var rTmp = 0;
var maxRotate = 15;

$(document).ready(function() {
    $("#content").myrotate();
    $("#fire").myrotate();

});

$(document).mousemove(function(e) {
        if (drag == 1) {
            img = selectedImg;
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - img.x0;
            y = y1 - img.y0;
            r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x)));
            rDiff = r - rTmp;
            if(isFirst != 1 && Math.abs(rDiff) < maxRotate) {  
                r = img.rotation + rDiff;
                img.css("transform","rotate(-"+r+"deg)");
                img.css("-moz-transform","rotate(-"+r+"deg)");
                img.css("-webkit-transform","rotate(-"+r+"deg)");
                img.css("-o-transform","rotate(-"+r+"deg)");
                img.rotation = img.rotation + rDiff;
                $("#1").html("rDiff " + rDiff);
                $("#4").html("tmp r " + r);
                $("#5").html("img rot " + img.rotation);
            } else {
               isFirst = 0;
               // rDiff should be small next time?
            }

            rTmp = r;
        }
});

If you would like for the image to be able to rotate faster, increase the value of maxRotate. Here's a fiddle.