Punkt w sprawdzaniu wieloboków za pomocą SVG i JavaScript?

Question

Mam mapę, którą przekonwertowałem z grafiki rastrowej na plik SVG, konwertując obszary o różnym zabarwieniu na ścieżki.

wiem jak zrobić podstawowe Check Point-in-wielokąta daną tablicą krawędzi, ale svg:path elementy reprezentować wiele wielokątów, a także maski (aby uwzględnić morzach etc) i wydobywania informacji poprzez analizowanie atrybut d wydaje się dość ciężki.

Czy istnieje biblioteka JS, która pozwala mi uprościć tę kontrolę? Zasadniczo chcę tworzyć losowe punkty, a następnie sprawdzać, czy są na lądzie (tj. Wewnątrz wielokątów) lub wodzie (to znaczy na zewnątrz).

Ponieważ elementy SVG wydają się pozwalać na obsługę zdarzeń myszy, myślę, że nie powinno to stanowić większego problemu (np. Jeśli potrafisz stwierdzić, czy wskaźnik myszy znajduje się nad elementem, już rozwiązujesz problem z punktem w wielokącie).

EDIT: sprawa komplikuje się nieco, należy wspomnieć, że svg:path elementy wydają się być oparte na krzywych liniach, a nie, więc po prostu parsowania atrybutu d utworzyć tablicę krawędzi nie wydaje się być rozwiązaniem.

Ponieważ elementy mogą mieć atrybut fill, podejście getta polegające na renderowaniu SVG na płótnie, a następnie znajdowaniu wartości koloru piksela w danym punkcie, może działać, ale wydaje się to naprawdę, naprawdę okropnym sposobem Zrób to.

Answer 1

Odpowiedzi na temat Hit-testing SVG shapes? mogą Ci pomóc w tym zadaniu. Występują problemy z brakującą obsługą przeglądarki, ale możliwe, że użyjesz svgroot.checkIntersection do przetestowania małego prostokąta (może nawet 0 szerokości/wysokości?) W kształcie wielokąta.

Answer 2

Podejście zaproponowane w ostateczności wydaje się najłatwiejszym rozwiązaniem tego problemu.

Znalazłem a nice JS library, który ułatwia renderowanie SVG na płótnie. Po wykonaniu SVG wystarczy wywołać metodę kontekstu 2D getImageData dla regionu 1x1 w punkcie, który chcesz sprawdzić. Wydaje mi się, że pomaga to stworzyć kopię SVG z kodowaniem kolorami, aby ułatwić sprawdzenie, jeśli SVG jest bardziej skomplikowany niż ten, którego używam (musisz sprawdzić bajt po bajcie RGBA).

To jest strasznie hackowate, ponieważ faktycznie sprawdza się piksele obrazu rastrowego, ale wydajność wydaje się być wystarczająco przyzwoita, a kontrole kolorów można zapisać w sposób, który pozwala na zanieczyszczenia (np. Przy krawędziach).

Sądzę, że jeśli chcesz mieć współrzędne względne, możesz spróbować utworzyć płótno o rozmiarze 1 do 1, a następnie podzielić współrzędne piksela według wymiarów płótna.

Jeśli ktoś wymyśli lepszą odpowiedź, zaakceptuję ją. Do tego czasu ten symbol służy jako symbol zastępczy, na wypadek gdyby ktoś przyszedł z tym samym problemem, szukając łatwego rozwiązania.