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

您的逻辑有问题，它仅依赖于 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 回答
-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 回答