3

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

更新
我所做的是我取了 3 个 XY 坐标并计算了第一个点和最后一个点之间的角度，正如本文和这篇文章所建议的那样。

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

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

请有任何建议。

4

2 回答 2

4

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

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

由此，可以找到从第一个点到圆心，再到最后一个点的角度，旋转方向取决于它是正还是负。

于 2013-01-25T10:31:59.113 回答
4

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

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

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

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

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

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

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

|一个| = 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 < thetaEnd。

你也想检查 这个链接

于 2016-06-25T14:11:45.013 回答