Point in Polygon檢查SVG和JavaScript？

我有一張地圖，我通過將不同顏色的區域轉換爲路徑從柵格圖形轉換爲SVG文件。Point in Polygon檢查SVG和JavaScript？

我知道如何在給定邊數組的基礎上進行多邊形檢查，但svg:path元素表示多個多邊形以及掩碼（以解釋海等），並通過解析d屬性來提取該信息似乎相當嚴厲。

有沒有一個JS庫，允許我簡化檢查？我基本上想創建隨機點，然後檢查它們是否在陸地上（即多邊形內）或水（即外部）。

由於SVG元素似乎允許鼠標事件處理，所以我認爲這應該不是什麼大問題（也就是說，如果您可以判斷鼠標指針是否位於元素頂部，那麼您已經解決了點多邊形問題）。

編輯：有點複雜的事情，我應該提到svg:path元素似乎是基於曲線而不是線條，所以只解析d屬性創建一個邊緣數組似乎不是一個選項。

由於元素可能需要fill屬性，所以在畫布上渲染SVG並在給定點查找像素的顏色值的貧民窟方法可能有效，但這似乎是一種非常非常糟糕的方式做到這一點。

2010-11-13 Alan Plum

在完成SVG規範並花了一個小時使用Chrome的JavaScript控制檯之後，似乎最大的問題是我有一個'svg：path'元素，而不是一個普通的形狀元素。否則，可以使用'svg.checkIntersection'和1x1'svg：rect'（假設它適用於區域而不是輪廓）。如果您正在尋找任何形式的抽象，SVG API似乎沒有什麼幫助。 – 2010-11-13 23:59:10

Hit-testing SVG shapes?的答案可能會幫助你完成此任務。有缺少瀏覽器支持的問題，但你也許可以使用svgroot.checkIntersection命中測試在你的多邊形形狀內的一個小的（甚至可能是0寬度/高度將工作？）矩形。

來源

2011-12-02 20:00:25 natevw

我建議作爲最後手段的方法似乎是解決此問題的最簡單方法。

我發現a nice JS library可以很容易地在畫布上渲染SVG。在渲染SVG時，只需調用2D上下文的getImageData方法即可查看要檢查點的1x1區域。如果你的SVG比我使用的更復雜（你必須逐字節地檢查RGBA值），我想用顏色編碼創建一個SVG副本可以使檢查更容易。

這種感覺非常的hackish，你實際上是在檢查光柵圖像的像素，但是性能似乎是不夠的體面和顏色可檢查的方式，允許雜質（例如在邊緣附近）被寫入。

我想如果你想要相對座標，你可以嘗試創建一個1比1大小的畫布，然後用畫布維度劃分像素座標。

如果有人想出更好的答案，我會接受它。在此之前，這個人擔任佔位符，以防有人來這裏尋找簡單解決方案的相同問題。

來源

2010-11-14 02:47:01

如果您試圖發現用戶的點擊，svg pathnodes會激發該事件。此外，getImageData不是由iecanvas模擬，我遇到了這個問題。 – 2010-11-16 15:36:12

Point in Polygon檢查SVG和JavaScript？

回答

相關問題