代码之家 › 专栏 › 技术社区 › Alan Plum

用SVG和JavaScript检查多边形中的点?

point-in-polygon vector-graphics javascript svg

7

Alan Plum · 技术社区 · 14 年前

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

我知道在给定一组边的情况下如何进行多边形检查中的基本点,但是 svg:path 元素表示多个多边形以及遮罩(用于解释seas等),并通过解析 d 属性似乎相当重。

有没有JS库允许我简化检查?我基本上想创建随机点,然后检查它们是在陆地上(即多边形内部)还是在水上(即外部)。

由于SVG元素似乎允许鼠标事件处理,我认为这不应该是一个大问题(即,如果您可以判断鼠标指针是否位于元素的顶部,那么您已经在解决多边形中的点问题)。

编辑:这件事有点复杂,我应该说 svg:路径 元素似乎是基于曲线而不是基于线的,所以只需解析 丁 属性来创建边数组似乎不是一个选项。

因为元素可以 fill 属性,一种在画布上渲染SVG,然后在给定点上找到像素的颜色值的贫民区方法可以工作,但这看起来是一种非常非常糟糕的方法。

2 回复 | 直到 14 年前

1

4

Community Nick Dandoulakis 7 年前

上的答案 Hit-testing SVG shapes? 也许能帮你完成这个任务。缺少浏览器支持有问题,但是您可以使用svgroot.checkIntersection来测试一个小的(甚至0宽度/高度都可以吗?)多边形内的矩形。

2

1

Alan Plum 14 年前

我最后建议的方法似乎是解决这个问题的最简单的方法。

我发现 a nice JS library 这使得在画布上渲染SVG变得很容易。在呈现SVG时,只需调用2D上下文的 getImageData 方法在要检查的点处查找1x1区域。如果您的SVG比我正在使用的SVG更复杂(您必须逐字节检查RGBA值),那么创建一个带有颜色编码的SVG副本有助于简化检查。

当你实际检查光栅图像的像素时,这感觉非常粗糙,但是性能似乎足够好,并且颜色检查可以以允许杂质(例如靠近边缘)的方式书写。

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

如果有人想出更好的答案,我会接受的。在此之前,这一个作为占位符,以防有人带着同样的问题来这里寻找一个简单的解决方案。