Punto nel Poligono di verificare con SVG e JavaScript?

Question

Ho una mappa che ho convertito da una grafica raster in un file in formato SVG convertendo le aree di colore diverso in percorsi.

So come fare un controllo di base punto-a-poligono dato un array di spigoli, ma gli elementi svg:path rappresento più poligoni nonché maschere (per conto di mari ecc) ed estrarre le informazioni analizzando l'attributo d sembra piuttosto pesante.

C'è una libreria JS che mi permette di semplificare tale controllo? Io fondamentalmente voglio creare punti casuali e quindi controllare se sono sulla terra (cioè all'interno dei poligoni) o acqua (vale a dire al di fuori).

Per quanto elementi SVG sembrano consentire la gestione degli eventi del mouse, penserei che questo non dovrebbe essere un gran problema (cioè se si può dire se il puntatore del mouse è in cima di un elemento, si sta già risolvendo il punto -in-poligono problema).

EDIT: A complicare la questione un po ', dovrebbe menzionare che gli elementi svg:path sembrano essere basate su curve anziché linee, quindi basta parsing l'attributo d per creare una matrice di bordi non sembra essere un'opzione <. / p>

Per quanto gli elementi possono prendere un attributo fill, un approccio del ghetto di rendere l'SVG su una tela e poi trovare il valore del colore del pixel nel punto dato potrebbe funzionare, ma che sembra un modo davvero, davvero terribile fare esso.

Answer 1

Le risposte su ? può aiutare in questa ricerca. Ci sono problemi con il supporto del browser mancanti, ma si potrebbe forse usare svgroot.checkIntersection a hit test una piccola (forse anche 0 larghezza / altezza avrebbe funzionato?) Rettangolo all'interno della vostra forma poligonale.

Answer 2

L'approccio ho suggerito come ultima risorsa sembra essere la soluzione più semplice per questo problema.

un bel JS libreria che rende facile rendere SVG su una tela. Con l'SVG reso, tutto quello che serve è una chiamata al metodo getImageData del contesto 2D per una regione 1x1 in corrispondenza del punto che si desidera controllare. Credo che contribuisce a creare una copia del SVG con codifica a colori per rendere il controllo più facile se il vostro SVG è più complessa di quella che sto usando (dovrete controllare il valore RGBA byte per byte).

Questo si sente terribilmente hacker, come si sta effettivamente ispezionare i pixel di un'immagine raster, ma la prestazione sembra essere abbastanza decente ei controlli dei colori possono essere scritti in modo tale da consentire per le impurità (ad esempio vicino ai bordi).

Credo che se si vuole le coordinate relative si potrebbe provare a creare una tela di dimensioni 1-to-1 e poi dividere le coordinate dei pixel dalle dimensioni di tela.

Se qualcuno esce con una risposta migliore, io accetto, invece. Fino ad allora, questo serve come segnaposto nel caso in cui qualcuno viene qui con lo stesso problema in cerca di una soluzione facile.