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度）。我希望能够在我拖动光标时旋转图像，无论它开始在图像中心的哪一侧。

我希望这是有道理的。这是小提琴：http://jsfiddle.net/C5QA9/

Answer 1

此处计算旋转的代码是获取图像垂直中心与光标当前位置之间的角度。为了在单击时使图像平滑旋转，您需要在旋转期间减去此角度。此外，您需要跟踪上一次拖动期间旋转的位置，并将此角度添加到当前旋转：

$(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)');
    });
});

这是小提琴：http://jsfiddle.net/C5QA9/1/

旋转图像而不重置旋转

1 个答案: