如何在javascript中检查鼠标指针是顺时针还是逆时针移动答案

【问题标题】：how to check if mouse pointer is moving clockwise or anticlockwise in javascript如何在javascript中检查鼠标指针是顺时针还是逆时针移动
【发布时间】：2013-01-25 10:25:28
【问题描述】：

我想用 javascript 检查鼠标是在 html5 画布上顺时针还是逆时针移动，但不知道如何继续。

更新
我所做的是我按照 this 和 this 帖子中的建议获取了 3 个 XY 坐标并计算了第一个点和最后一个点之间的角度。

var resultX = p2x - p1x;
var resultY = p2y - p1y;
var angle = Math.atan2(resultY, resultX) * 180 / Math.PI;

但是发生的情况是，当我顺时针移动鼠标时，结果为正，直到鼠标向东南移动，但是当鼠标在顺时针移动的同时向西南移动时，角度变为负，这不应该发生，因为鼠标仍在顺时针移动。

请给点建议。

【问题讨论】：

我会将指针的位置转换为极坐标，然后检查角度是不断增加还是减少。
@Blender，要做到这一点，您需要找到旋转的中心，如果您转换为极坐标的基点在圆外，它将不起作用。
这只有在圆的上半部分是 y > 0 并且圆的下半部分是 y 时才有效

标签： javascript html canvas

【解决方案1】：

我假设您知道 mousemove 事件，并在浏览器窗口中获取鼠标的 X/Y 位置？

我将采取的方法是将鼠标的最后 5-6 个坐标存储在一个数组中，然后执行圆拟合算法以找到正在旋转的点。

由此可以求出从第一个点到圆心到最后一个点的角度，旋转方向是根据正负来判断的。

【讨论】：

【解决方案2】：

首先，您可能需要一个函数来提供两个向量之间的角度。写法如下：

两个向量的叉积的大小等于向量的大小乘以它们之间夹角的正弦的乘积。

令 A = 来自 P1 的向量 --> P2; 令 B = 来自 P2 的向量 --> P3；设θ为角度

|A × B| = |A| |B|罪（θ）因此 sin(θ) = ( |A × B| ) / (|A| |B| )

两个二维向量的叉积的大小是这样计算的： |A×B| = Ax By - Bx Ay

并且两个向量的点积的大小等于向量的大小乘以它们之间夹角的余弦的乘积。 A·B = |A| |B|余弦(θ) 因此 cos(θ) = (A·B) / ( |A| |B| )

点积的计算如下： A·B = Ax Bx + Ay By

|A| = sqrt( Ax Ax + Ay Ay ) |B| = sqrt( Bx Bx + By By )

给你 sin(θ) 和 cos(θ)。

您可以调用 atan2 从 sin(θ) 和 cos(θ) 中获取 θ。 θ = atan2( sin(θ), cos(θ) )

现在在代码中：

/// <summary>
/// Calculates the angle between two 2-D vectors.
/// </summary>
/// <returns>angle in radians</returns>
static double AngleBetweenVectors( double Ax, double Ay, double Bx, double By )
{
    double magA = Math.Sqrt( Ax * Ax + Ay * Ay );
    double magB = Math.Sqrt( Bx * Bx + By * By );
    double magAmagB = magA * magB;
    if( magA * magB == 0 ) throw new Exception( "Vectors must be non-zero length" );
    double sinTheta = (Ax * By - Bx * Ay) / magAmagB;
    double cosTheta = (Ax * Bx + Ay * By) / magAmagB;
    double theta = Math.Atan2( sinTheta, cosTheta );
    return theta;
}

结果以弧度表示。乘以 180/Math.PI 即可获得学位。如果您发现由于您的坐标系而使顺时针和逆时针方向相反，只需将结果取负即可。

圆弧绘制函数使用 x 轴作为其参考点，因此您需要找到向量与 x 轴 (1,0) 之间的角度。您必须提供开始和结束角度。可能需要进行一些条件检查以验证弧线是否朝着您想要的方向前进，并且您可以根据需要调整角度，使 thetaStart > thetaEnd 或 thetaStart

您还想查看this link

【讨论】：