查找落在填充画布弧内的x / y坐标

Question

以下是fiddle

我围绕圆圈绘制的弧线 - 我想知道如何找到它们所覆盖的所有x / y坐标，这样我就不必每次都重新绘制它们isPointInPath（）用于确定鼠标光标是否在它们之上。我正在考虑将所有x / y坐标写入一个我可以检查鼠标位置x / y坐标的数组，如果我找到匹配，那么我改变了光标。问题是，我不知道导出所有x / y值的代码。

Answer 1

这是您应该使用的方法： http://en.wikipedia.org/wiki/Point_in_polygon

它的工作方式实际上非常简单：如果在任何点结束的光线通过多边形周边的次数是偶数，则相应的点HAS将在多边形之外。如果它是奇数，它就在多边形内。

这是Pimvdb发现的功能：

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

Answer 2

您实际上不必重绘弧线以使用.isPointInPath() - 只需忽略对.fill()或.stroke()的任何调用，您将拥有一条可用于测试它是否包含一个点。

我建议使用一个函数来概括弧形路径（.beginPath()，路径命令，.closePath()），然后是两个调用它的函数 - 一个调用弧路径函数的函数，然后设置填充样式并填充绘制它的路径，另一个调用弧路径功能，然后测试点是否在路径中。

Answer 3

我不会把你所拥有的'弧'称为'弧形'（它们更像是弓形矩形），但这里有一个关于如何编写函数以确定一个点是否在这样的事物中的广泛草图：

1. 从端点和半径计算圆的中心。
   1. 如果点靠近中心而不是近弧（距离到中心的平方大于近半径平方）则返回false。
   2. 如果该点远离中心而不是远弧，则返回false。
2. 计算矩形端点相对于圆心的起点和终点角度。 （提示：Math.atan2）
   1. 计算点相对于圆心的角度。如果它不在端点的角度之间，则返回false。
      • 注意跨越Math.atan2的包装值的端点。
3. 如果通过其他测试，则返回true。

您无法计算此区域中的“所有”点，因为它们的数量无限。

可以创建图像中所有整数像素坐标的查找表

我会做什么，而不是你提出的建议，是使用保留模式图形系统（提示：SVG）并让它跟踪我的鼠标事件使用其效率更高的代码。

Answer 4

这是一种更简单的方法：

我已经改变了drawtabs功能，还检查鼠标是否在标签内： http://jsfiddle.net/kkDqz/4/

警告

此方法很简单，但需要您在mousemove上重绘EVERYTHING。