Point à Polygon vérifier avec SVG et JavaScript?

Question

J'ai une carte que je me suis converti à partir d'un graphique raster dans un fichier SVG en convertissant les zones de couleurs différentes en chemins.

Je sais comment faire un point de vérification dans un polygone de base donné un tableau de bord, mais les éléments de svg:path représentent plusieurs polygones ainsi que des masques (pour tenir compte des mers, etc.) et l'extraction de cette information en analysant l'attribut d semble plutôt lourde.

Y at-il une bibliothèque JS qui me permet de simplifier cette vérification? Je veux essentiellement de créer des points aléatoires et vérifier si elles sont sur la terre (à savoir l'intérieur des polygones) ou l'eau (à savoir l'extérieur).

Comme éléments SVG semblent permettre la gestion des événements de la souris, je pense que cela ne devrait pas être un gros problème (à savoir si vous pouvez dire si le pointeur de la souris est au-dessus d'un élément, vous résolvez déjà le point problème -in-polygone).

EDIT: Pour compliquer la question un peu, je dois mentionner que les éléments de svg:path semblent reposer sur des courbes plutôt que des lignes, de sorte que l'analyse syntaxique que l'attribut d pour créer un tableau de bord ne semble pas être une option <. / p>

Comme les éléments peuvent prendre un attribut fill, une approche du ghetto de rendre le SVG sur une toile, puis de trouver la valeur de couleur du pixel au point donné pourrait fonctionner, mais cela semble être une façon vraiment, vraiment terrible à faire il.

Answer 1

Les réponses sur formes SVG Hit-test? peut vous aider dans cette quête. Il y a des problèmes avec le soutien du navigateur manquant, mais vous pourriez peut-être utiliser svgroot.checkIntersection pour test de recherche d'un petit rectangle (peut-être même 0 largeur / hauteur fonctionnerait?) Dans la forme de votre polygone.

Answer 2

L'approche que je suggère en dernier recours semble être la solution la plus simple pour ce problème.

J'ai trouvé une belle bibliothèque JS qui permet de rendre facilement SVG sur une toile. Avec le SVG rendu, il suffit d'un appel à la méthode de getImageData de contexte 2D pour une région de 1x1 au point que vous voulez vérifier. Je suppose que cela aide à créer une copie du SVG avec codage couleur pour faciliter le contrôle si votre SVG est plus complexe que celui que je suis en utilisant (vous devrez vérifier l'octet par octet valeur RGBA).

Cela se sent terriblement hackish que vous inspecter réellement les pixels d'une image raster, mais la performance semble être assez décent et les contrôles de couleur peuvent être écrites d'une manière qui permet d'impuretés (par exemple à proximité des bords).

Je suppose que si vous voulez des coordonnées relatives, vous pouvez essayer de créer une toile de taille 1 à 1, puis diviser les coordonnées de pixels par les dimensions de la toile.

Si quelqu'un arrive avec une meilleure réponse, je vais l'accepter à la place. Jusque-là, celui-ci sert comme un espace réservé au cas où quelqu'un vient ici avec le même problème à la recherche d'une solution facile.