使用 SVG 和 JavaScript 检查多边形？答案

【问题标题】：Point in Polygon check with SVG and JavaScript?使用 SVG 和 JavaScript 检查多边形？
【发布时间】：2011-12-03 04:00:25
【问题描述】：

我有一张地图，我通过将不同颜色的区域转换为路径，将它从光栅图形转换为 SVG 文件。

我知道如何在给定一组边的情况下进行基本的多边形点检查，但是svg:path 元素代表多个多边形以及掩码（以考虑海洋等）并通过解析 @ 来提取该信息987654322@ 属性似乎相当严厉。

是否有一个 JS 库可以让我简化检查？我基本上想创建随机点，然后检查它们是在陆地（即多边形内部）还是水（即外部）。

由于 SVG 元素似乎允许处理鼠标事件，我认为这应该不是什么大问题（即，如果您可以判断鼠标指针是否位于元素顶部，那么您已经解决了问题-in-polygon 问题）。

编辑：让事情复杂一点，我应该提到svg:path 元素似乎是基于曲线而不是线条，所以只是解析d 属性来创建一个边数组似乎不是一个选项。

由于元素可以采用fill 属性，因此在画布上渲染 SVG，然后在给定点查找像素的颜色值的 ghetto 方法可能有效，但这似乎是一种非常非常糟糕的方法去做吧。

【问题讨论】：

在完成了 SVG 规范并在 Chrome 的 JavaScript 控制台上花了一个小时后，似乎最大的问题是我有一个 svg:path 元素而不是常规形状元素。否则，可以将 svg.checkIntersection 与 1x1 svg:rect 一起使用（假设它适用于区域而不是轮廓）。如果您正在寻找任何形式的抽象，SVG API 似乎帮助不大。

标签： svg javascript vector-graphics point-in-polygon

【解决方案1】：

Hit-testing SVG shapes? 上的答案可能对您有所帮助。缺少浏览器支持存在问题，但您也许可以使用 svgroot.checkIntersection 来测试多边形形状内的一个小（甚至可能是 0 宽度/高度？）矩形。

【讨论】：

【解决方案2】：

我建议作为最后手段的方法似乎是解决此问题的最简单方法。

我发现a nice JS library 可以很容易地在画布上渲染 SVG。渲染 SVG 后，只需调用 2D 上下文的 getImageData 方法，即可在您要检查的点处为 1x1 区域调用。我想如果您的 SVG 比我使用的更复杂，创建带有颜色编码的 SVG 副本会有助于检查（您必须逐字节检查 RGBA 值）。

当您实际检查光栅图像的像素时，这感觉非常糟糕，但性能似乎足够好，并且可以以允许杂质的方式编写颜色检查（例如靠近边缘）。

我想如果你想要相对坐标，你可以尝试创建一个 1 比 1 大小的画布，然后将像素坐标除以画布尺寸。

如果有人提出更好的答案，我会接受它。在此之前，它会作为一个占位符，以防有人遇到同样的问题来寻找简单的解决方案。

【讨论】：

如果您试图发现用户的点击，svg pathnodes 会触发该事件。另外，iecanvas 没有模拟 getImageData，我遇到了这个问题。