获取鼠标相对于饼图的位置（方程式）

Question

我已经根据数据数组创建了一个canvas饼图，现在我正在尝试确定鼠标位置与饼图的相对位置来检测悬停的数据部分。我的逻辑运行良好，所以我认为这更像是一个数学问题，但我想看看别人对我的方法的看法。以下是我的饼图和我正在使用的变量：

图像上列出的变量是我必须使用的变量（mouseX、mouseY、距中心的距离、半径、圆周率和数据部分在相对于圆周率的圆周上的点）。

图表的起始部分从右侧开始，在pi*2的0到100%之间，灰色部分的起始位置相对于pi*2为1.34...，结束位置为2.228...

我目前的主要问题是使用像素测量来计算它相对于pi的位置。我可能可以检查从上方和左侧的位置，然后计算距离中心的距离，根据pi计算中心线，但我无法计算这个。

- Simon Staton

Answer 1

最难记住的部分是在DOM坐标系中，Y坐标向下延伸，因此角度从正X轴开始顺时针旋转：

鼠标位置为mx, my：

var dx = mx - 180;               // horizontal offset from center
var dy = my - 180;               // vertical offset from center

var theta = Math.atan2(dy, dx);  // angle clockwise from X-axis, range -π .. π
if (theta < 0) {                 // correct to range 0 .. 2π if desired
    theta += 2.0 * Math.PI;
}

- Alnitak