0

我使用公式来计算两点之间的距离，以确定当我将鼠标移到图像上时旋转图像的程度。

  1. 点击，我捕捉到我点击的点
  2. 鼠标移动拖动，我记录鼠标移动到的点的位置
  3. 我计算起点和终点之间的距离
  4. 我使用从 1 开始的这个值来旋转图像。

所以假设我点击图像的中心，我开始向右拖动鼠标，我的图像完美旋转，然后不松开点击我将鼠标拖回我的图像上，我的图像现在反向旋转，这是完美的。现在，一旦鼠标到达该中心（我最初单击的位置），它就会强制我的图像向相反方向旋转，因为距离达到了它的极限（0）并且新值都是正的，即使我向左移动。

我知道两点之间的距离应该是正的，但是一旦它回到（0），我需要一些东西来做负，这样我就可以正确地旋转我的图像。

4

2 回答 2

0

最快的方法是使用简单的if语句。

if (x2 < x1)
    dist = -dist;

您需要考虑是否只想绕 Y 轴旋转，正如我从您所写的内容中猜测的那样，还是绕 X 轴旋转，在这种情况下，旋转的方向将由是否(y2 < y1)（两个旋转的组合）决定。

于 2012-10-01T20:18:16.093 回答
0

http://jsfiddle.net/wRexz/4/

var dragging = false, startpoint, endpoint, midpoint = $("#center").position();
midpoint = {x:midpoint.left - 2, y:midpoint.top-2};

$("#stage").mousedown(function(e){
    dragging = true;
    startpoint = {x:e.offsetX, y:e.offsetY};
});

$("#stage").mouseup(function(e){
    dragging = false;
});

$("#stage").mousemove(function(e){
    if (dragging){
        var angle = 0, sp = startpoint, mp = midpoint;
        var p = {x:e.offsetX, y:e.offsetY};
        var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x));
        var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));        

        angle = (pAngle - sAngle) * 180/Math.PI;

        $("#display").text(angle);
        $('#rotateme').css({ rotate: '+=' + angle });

        startpoint = {x:p.x, y:p.y};
    }
});​

这将找到两点之间的相对旋转角度。每次mousemove触发事件时它都会更新，因此它一次不会超过 180 度（除非在中点拖动时）。Math.atan2与后者相比，简化了逻辑，Math.atan因为后者不适用于坐标系。

于 2012-10-03T15:44:42.707 回答