Question

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

点击，我抓住了点击的位置
鼠标移动拖动，我记录鼠标移动到的位置
我计算原点和结尾之间的距离
我使用此值从1开始旋转图像。

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

据我所知，两点之间的距离应该是正的，但是一旦它回到（0）我就需要做一些负面的事情，以便我可以正确地旋转我的图像。

Answer 1

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

if (x2 < x1)
    dist = -dist;

你需要考虑是否只想围绕Y轴旋转，我猜你写的是什么，或者围绕X轴旋转，在这种情况下，旋转的方向将取决于(y2 < y1)（两轮的组成）。

Answer 2

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简化了逻辑，因为后者不适用于坐标系。

两点之间的距离抛出负值

2 个答案: