0

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

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 中旋转） - 但我找不到任何可以回答这个问题的东西，除了一个评论提到这个需要交叉产品，我不完全理解。

4

1 回答 1

6

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 处找到角度，并对“终点”或“当前点”执行相同的操作。从第二个中减去第一个，这就是你的“三角角”。

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

于 2012-09-27T23:19:53.473 回答