javascript - 如何从javascript中的鼠标移动获取相对于给定点的旋转方向？

Question

我使用以下函数来跟踪鼠标移动和旋转对象:

function getAngle(dx, dy) {
    var angle
    if (dx != 0) {
        var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0)
        angle = radiansToDegrees(radians);
        if (angle < 0) angle += 360;
    } else {
        angle = dy > 0 ? 90 : 270;
    }
    return angle;
}

function getAngleBetweenPoints(p1, p2) {
    var dx = p1.x - p2.x
    var dy = p1.y - p2.y
    return getAngle(dx, dy)
}

$(document).mousemove(function (e) {
    if (selectionBounds) {
        var midpoint = new pe.Classes.Point(selectionBounds.Left + (selectionBounds.Width / 2), selectionBounds.Top + (selectionBounds.Height / 2));
        var mousepoint = new pe.Classes.Point(e.pageX, e.pageY);
        var angle = getAngleBetweenPoints(midpoint, mousepoint);
        if (lastAngle) {
            var diff = angle - lastAngle;
            rotate(degreesToRadians(diff));
        }
        lastAngle = angle;
    }
});

只要我缓慢移动鼠标，并且鼠标不要太靠近原点(中点)，这种方法就很有效。移动太快会导致额外的旋转，而接近原点会导致意外的方向变化。

如何修复此代码？我真的只需要知道鼠标移动的方向(顺时针或逆时针)，因为我可以通过鼠标点的变化了解速度，然后根据该速度更新旋转。

实际上有几十个关于与此相关的主题的线程( How to get the direction (angle) of rectangle after rotating it from a pivot point 、 How to get cardinal mouse direction from mouse coordinates 、 Moving a rotated element in the direction of the rotation in JavaScript ) - 但我找不到任何可以回答这个问题的内容，除了一条评论提到这需要叉积，我并不完全理解。

Answer 1

http://jsfiddle.net/wRexz/3/ (单击并拖动以旋转矩形)

    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};

这里的概念是基本三 Angular 函数。您找到“起点”与 0 之间的 Angular ，并对“终点”或“当前点”执行相同的操作。用第二个值减去第一个值，这就是你的“三 Angular Angular ”。

由于 Angular 变化速度的快慢，您仍然会在中点附近出现不稳定的行为。解决此问题的一种方法是在距中点一定距离内时停止旋转。