html - html5キャンバスの特定の領域または領域の座標を取得するには?

Question

キャンバスを使用して円を作成し、線に分割しました。特定の領域の座標が必要です。特定の領域をクリックすると、その領域だけがクリック可能になるはずです。

円が座標の異なる多くの領域に分割され、分割された領域内にいくつかの文字が配置される単語ホイール ゲームの例を考えてみましょう。文字「A」の特定の領域をクリックしたい場合は、「A」をクリックしてテキスト ボックスに表示する必要があります。

どうすればこれを達成できますか?

Answer 1

次の手順で開始できることを願っています。

「文字「A」を含む特定の領域」は、円の扇形と呼ばれることに注意してください。

推定

x 軸は水平で右が正です

y 軸は垂直で、下向きが正です

角度は、正の x 軸から時計回りにラジアン単位で測定されます

最初のセクターは角度 A から始まります

円の中心は (cx,cy) にあり、半径は r です。

円は n 個の等しいセクターに分割されます

カーソルは位置 (x,y) にあります

定義済み関数 Math.atan2(y,x) は、正の x 軸と (0,0) から (x,y) までの線分との間の角度 (-pi と pi から) を返します。ここで、i は整数で i< です。 = x < i+1 定義済み関数 Math.floor(x) は i を返します

それで

S を各セクターの中心での角度とする

S=2*pi/n

正の x 方向で (cx,cy) を通る水平線と (cx,cy) から (x, y)

疑似コード

function getangle(x,y,cx,cy)
{
    var ang =  Math.atan2(y-cy,x-cx)   
    if(ang<0)
    {
        ang+=2*Math.PI
    }
    return ang
}

これで、カーソルがどのセクターにあるかを確認する関数を作成できます。

カーソルが円の外側にある場合は -1 を返し、そうでない場合は 1 から n までのセクター番号を返します。

疑似コード

function isInSector(x,y)   (x,y) coordinates of cursor
{
    // first check if cursor is outside of circle
    if((cx-x)*(cx-x)+(cy-y)*(cy-y)>r*r)
    {
        return -1
    }
    // find angle for cursor position
    B=getangle(x,y,cx,cy)
    return Math.floor((B-A)/S)+1
}