Javascript 查找位于填充画布圆弧内的x/y坐标

这是你的电话号码

---

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

这是您应该使用的方法：

其工作方式实际上非常简单：如果在任何点结束的光线通过多边形周长的次数是偶数，则相应的点必须位于多边形外部。如果它是奇数，它在多边形内

以下是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;
}

函数isPointInPoly（poly，pt）{
对于（var c=false，i=-1，l=poly.length，j=l-1；++i（（poly[i].y我不会称之为“弧”（它们更像是弯曲的矩形），但下面是如何编写函数以确定点是否在这样的东西内的大致示意图：

从端点和半径计算圆心。
如果该点比闭合弧更靠近中心（到中心的距离平方大于闭合半径平方），则返回false
如果该点距离中心的距离大于远弧的距离，则返回false

计算矩形端点相对于圆心的起点和终点角度。（提示：）
计算点相对于圆心的角度。如果该角度不在端点的角度之间，则返回false。

注意跨越
Math.atan2
包装值的端点


如果其他测试通过，则返回true
您无法计算此区域中的“所有”点，因为它们的数量是无限的。创建图像中所有整数像素坐标的查找表是可能的，但会造成浪费

我要做的，而不是你所建议的，是使用一个保留模式图形系统（提示：SVG），让它使用更高效的代码为我跟踪鼠标事件。
这里有一个更简单的方法：

我修改了drawtabs功能，以检查鼠标是否位于选项卡内：

警告

此方法很简单，但需要您在mousemove上重新绘制
所有内容。
使用
.isPointInPath（）
——只需省略对
.fill（）
或
.stroke（）
的任何调用，您就可以使用一个路径来测试它是否包含点

我建议使用一个函数来概括弧路径（
.beginPath（）
，路径命令，
.closePath（）
）然后是两个调用它的函数——一个调用arc path函数，然后设置填充样式并填充路径来绘制它，另一个调用arc path函数，然后只测试路径中是否有点。
你推荐该页面上的哪种算法？好的，我看到我需要传递一个x/y coor数组dinates和我想测试的x/y坐标在我的多边形中。我仍然困惑的是如何获得/计算要传递给isPointInPoly的x/y坐标数组。获得鼠标x/y位置很简单，但计算我的圆弧所覆盖的x/y的三角学让我很困惑。@jarnauss:再想想，我认为我发布的k可能没有多大帮助，因为它是关于直线而不是圆弧的。如果你想使用它，你可以使用角点，但这将是圆弧的近似值…是的，我正在搜索一个“isPointInArc”解决方案。谷歌目前的前景很黯淡。这两种方法都可以，每个多边形都是用p构建的点和线（甚至是圆）。只要你提供这些点，拱门就会被正确地画出来。你知道，你实际上不必重新画弧来使用
。isPointInPath（）
--省略对
.fill（）
或
.stroke（）的任何调用
您将有一个路径，可以用来测试它是否包含一个点。@ellisbben您应该将其作为答案发布！：）嗯，我想知道为什么我没有考虑这个问题。让我试一试。“艾利森-谢谢你的建议。这真的很有效，因为我的瓶颈是在画布上不断地重新渲染几个项目。如果你想把你的评论添加到答案中，我很乐意接受它。完成了。我很高兴当人们发现一个好的答案藏起来。.：）这就是我最后要做的。我将一个标志传递到函数中，它决定我是否真的绘制了任何东西。