如何从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;
    }
});

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

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

在与主题相关的主题上有几十个SO线程(如何在从枢轴点旋转矩形后获取矩形的方向(角度),如何从鼠标坐标获取基本鼠标方向,在方向上移动旋转元素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};

这里的概念是基本的三角形.您可以从"起始点"的0开始找到角度,并对"终点"或"当前点"执行相同的操作.从第二个减去第一个,这就是你的"delta角度".

由于角度可以快速变化的性质,您仍然会在中点附近出现不稳定的行为.对此的一个解决方案是在中点的一定距离内停止旋转.