1

マウスをドラッグするときにスピニングホイールを回転させようとしています。ホイールは3つのピースで構成されているため、回転させたいホイールのセクションをターゲットにするために、各画像を個別にマッピングしました。現在、それはかなりうまく機能しています。唯一の問題は、回転パラメータにevent.clientXを使用していることです。これは時々ランダムになる可能性があり、開始時にホイールがランダムな角度に移動することもありますが、ほとんどの場合は機能します。より良い回転パラメータをスクリプトにフィードする数式が欲しいだけです。これが私が現在持っているコードです：

var isDragging      = false;

var innerWheelActive    = false;
var middleWheelActive   = false;
var outerWheelActive    = false;

$(document).ready(function() {



    /*------------------------------------------*/

    $("#mapping map #middleArea").mousedown(function() {
            isDragging  = true;
            middleWheelActive   = true;

            return false;
    });

    $("#mapping map #innerArea").mousedown(function() {
            isDragging  = true;
            innerWheelActive    = true;

            return false;
    });

    $("#mapping map #outerArea").mousedown(function() {
            isDragging  = true;
            outerWheelActive    = true;

            return false;
    });

    $(document).mousemove(function(event) {
        if (isDragging) {       

            var rotateCSS = 'rotate(' + event.clientX + 'deg)';
            if(innerWheelActive)
                $('#innerWheel img').css({ '-webkit-transform': rotateCSS });
            else if(middleWheelActive)
                $('#middleWheel img').css({ '-webkit-transform': rotateCSS });
            else if(outerWheelActive)
                $('#outerWheel img').css({ '-webkit-transform': rotateCSS });

            return false;
        }
    });

    $(document).mouseup(function() {
        if (isDragging){
            console.log('stopped');
            isDragging  = false;
            innerWheelActive    = false;
            middleWheelActive   = false;
            outerWheelActive    = false;
            return false;
        }
    });

});
4

2 に答える 2

-1

コールバック関数にevent.preventDefaultとevent.stopPorpagationを追加してみてください：

$('img').draggable({
    drag: function(event, ui){
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
        $(this).css({ '-webkit-transform': rotateCSS });
        event.preventDefault();
        event.stopPropagation();
    }
});
于 2012-09-28T15:58:01.353 に答える
-1

あなたの論理には問題があります、それはあなたが物事を回転させるときに常に増加するとは限らないx縦座標のみに依存しています。

代わりにこれを試してください。マウスが初期点から移動した距離を計算するため、x座標とy座標の両方が考慮されます。正常に動作するはずです。

function getDistance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1));
}
var div = $("#mydiv");
var rotation = 0; 
var isDragging = false;
div.mousedown(function(event) {
    isDragging = true;
    lastX = event.clientX;
    lastY = event.clientY;
}).mouseup(function(event) {
    isDragging = false;
}).mousemove(function(event) {
    if (isDragging) {
        var curX = event.clientX;
        var curY = event.clientY;   
        rotation += getDistance(curX,curY,lastX,lastY); 
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });  
        lastX = curX;
        lastY = curY;
    }
})

</ p>

デモ

于 2012-09-28T18:35:05.927 に答える