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

Question

这是 fiddle

我在圆的外侧绘制的弧 - 我想知道如何找到它们覆盖的所有 x/y 坐标，这样我就不必每次使用 isPointInPath() 重新绘制它们来确定鼠标光标是否位于它们上方。我正在考虑将所有 x/y 坐标写入一个数组，我可以检查鼠标位置 x/y 坐标，如果找到匹配项，则更改光标。问题是，我不知道导出所有 x/y 值的代码。

Answer 1

实际上，您不必重新绘制弧线即可使用 .isPointInPath() - 只需省略对 .fill() 或 .Stroke()< 的任何调用即可/code> 你将有一个路径，你可以用它来测试它是否包含一个点。

我建议使用一个函数来概述弧路径（.beginPath()、路径命令、.closePath()），然后使用两个函数来调用它——其中一个函数是调用圆弧路径函数，然后设置填充样式并填充路径以绘制它，另一个调用圆弧路径函数，然后仅测试点是否在路径中。

Answer 2

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

它的工作方式实际上非常简单：如果在任意点结束的光线穿过多边形周界的次数为甚至，相应的点必须位于多边形之外。如果是奇数，则它在多边形内。

这是 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 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 上重绘所有内容。