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）确实存在数十个SO主题 - 但我找不到任何可以回答此问题的内容，除了一条评论中提到需要交叉产品的评论，我并不完全理解。

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角度”。

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

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

1 个答案: