0

私はいくつかのコードを改善しようとしています：http ：//www.htmldrive.net/items/show/1114/-Rotating-hover-Image-with-JQuery

したがって、問題は次のとおりです。-画像をクリックすると（マウスを押したまま）、画像が最初に回転します。最初の回転を停止するにはどうすればよいですか。

フィドル

 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;

最初の回転をフィルタリングしようとしています。より良いコードビューについては、フィドルを試してください。

4

3 に答える 3

1

x軸と、回転の開始時にユーザーがクリックした点を基準にした角度を追加する必要があります。写真の3時をクリックすると、現在のバージョンは正常に機能します（不要な回転は発生しません）。この角度を計算して、次の行に入力するだけです。

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

初期角度シフトを保存するrShift変数を追加しました。役に立ったようです。

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

フィドル

于 2013-03-20T15:24:39.053 に答える
1

画像が一度に回転できる最大量を制限したい。これは最初の計算を修正しませんが、最大回転速度のアイデアを追加します。と呼ばれるグローバル変数を追加しmaxRotateます。これにより、画像の回転が一度に変化する速度が制御されます。以下のコードを参照してください。

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

画像をより速く回転できるようにする場合は、の値を大きくしますmaxRotate。これがフィドルです。

于 2013-03-20T16:05:28.017 に答える
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 = 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);
}});

私は最初からやり直しました。

改善点：-画像の回転を負にすることはできません-ドラッグを開始すると、画像が最後の位置から回転します

フィドル最終作業

私と一緒に考えてくれたジェイコブとコロンバへのTnx...

于 2013-03-21T11:19:47.380 に答える