javascript - 旋转图像而不重置旋转

Question

我有一个带有图像的页面。单击并按住鼠标按钮，同时拖动光标可绕其中心旋转图像。这是通过以下 JavaScript 代码完成的(基于 this answer to a similar question ):

$(function() {
    var target = $('#david-hasselhoff'),
        originX = target.offset().left + target.width() / 2,
        originY = target.offset().top + target.height() / 2,
        dragging = false;

    target.mousedown(function(e) {
        dragging = true;
    });

    $(document).mouseup(function() {
        dragging = false
    }).mousemove(function(e) {
        var mouseX, mouseY, radians, degrees;

        if (!dragging) {
            return;
        }

        mouseX = e.pageX;
        mouseY = e.pageY;
        radians = Math.atan2(mouseY - originY, mouseX - originX),
        degrees = radians * (180 / Math.PI);

        target.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
        target.css('-ms-transform', 'rotate(' + degrees + 'deg)');
        target.css('transform', 'rotate(' + degrees + 'deg)');
    });
});

这有两个问题:

1) 如果我旋转图像，松开鼠标按钮，然后再次旋转图像，旋转就会重置。我希望能够稍微旋转它，然后单击并拖动以进一步旋转它。

2) 如果我单击图像的左侧并将其顺时针旋转几度，它会立即将旋转设置为 180 度(或更接近 -170 度)。我希望能够在拖动光标时旋转图像，无论图像从图像中心的哪一侧开始。

我希望这是有道理的。这是 fiddle :http://jsfiddle.net/C5QA9/

Answer 1

这里计算旋转的代码是获取图像的垂直中心与光标当前位置之间的 Angular 。为了让点击时图像能够顺利旋转，需要在旋转时减去这个 Angular 。此外，您需要跟踪上次拖动期间旋转离开的位置，并将该 Angular 添加到当前旋转中:

$(function() {
    var target = $('#david-hasselhoff'),
        originX = target.offset().left + target.width() / 2,
        originY = target.offset().top + target.height() / 2,
        dragging = false,
        startingDegrees = 0,
        lastDegrees = 0,
        currentDegrees = 0;

    target.mousedown(function(e) {
        dragging = true;
        mouseX = e.pageX;
        mouseY = e.pageY;
        radians = Math.atan2(mouseY - originY, mouseX - originX),
        startingDegrees = radians * (180 / Math.PI);
    });

    $(document).mouseup(function() {
        lastDegrees = currentDegrees;
        dragging = false;
    }).mousemove(function(e) {
        var mouseX, mouseY, radians, degrees;

        if (!dragging) {
            return;
        }

        mouseX = e.pageX;
        mouseY = e.pageY;
        radians = Math.atan2(mouseY - originY, mouseX - originX),
        degrees = radians * (180 / Math.PI) - startingDegrees + lastDegrees;

        currentDegrees = degrees;

        target.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
        target.css('-ms-transform', 'rotate(' + degrees + 'deg)');
        target.css('transform', 'rotate(' + degrees + 'deg)');
    });
});

这是 fiddle :http://jsfiddle.net/C5QA9/1/