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

创建一个函数 getangle(x,y,cx,cy)，它返回从正 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
}