如何检查鼠标指针是否在javascript中顺时针或逆时针移动

时间:2013-01-25 10:25:28

标签: javascript html5 canvas

我想检查鼠标是否在jtml5画布上顺时针或逆时针移动,但是没有获取如何继续操作。

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

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

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

请提出任何建议。

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:2)

首先,你可能想要一个能给你两个向量之间角度的函数。以下是编写它的方法:

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

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

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

两个2D矢量的叉积的大小计算如下: | A×B | = Ax By - Bx Ay

两个向量的点积的大小等于向量的大小乘以它们之间角度的余弦的乘积。 A·B = | A | | B | COS(θ) 因此 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&gt; thetaEnd或thetaStart&lt; thetaEnd必要。

您还要检查this link