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

まず、2 つのベクトル間の角度を求める関数が必要になるでしょう。書き方は次のとおりです。

2 つのベクトルの外積の大きさは、ベクトルの大きさにベクトル間の角度のサインを掛けた積に等しくなります。

A = P1 からのベクトルとする --> P2; B = P2 からのベクトルとする --> P3; 角度をθとする

|A×B| = |A| |B| sin(θ) したがって、sin(θ) = ( |A × B| ) / (|A| |B| )

2 つの 2D ベクトルの外積の大きさは次のように計算されます: |A × B| = Ax By - Bx Ay

また、2 つのベクトルの内積の大きさは、ベクトルの大きさにベクトル間の角度の余弦を掛けた積に等しくなります。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 に答える