Peut-être que quelqu'un a eu des expériences similaires sur ce dilemme et peut m'aider ici ...
Fondamentalement, j'ai un élément de toile sur lequel je dessine plusieurs rectangles dans une boucle en utilisant P>
context.fillRect (x, y, width, height)
5 Réponses :
grossièrement, vous pouvez le faire comme ceci: supposant que nous traitons avec des largeurs et des hauteurs non négatifs :)
N'y a-t-il pas de meilleur moyen autre que de boucler à travers chaque rectangle et de vérifier les dimensions ... (soupir !!)
Vous pouvez utiliser quelque chose comme un Hiérarchie de volume de liaison (BVH) pour diviser l'espace et réduire les rectangles qui doivent être vérifiés. Cela nécessitera un certain prétraitement.
Ceci peut être surchargé, mais le gâteau JS fera le travail pour des rectangles et d'autres formes. Découvrez la démo .
Il a un sous-système de manipulation de l'événement entier, vous avez raison, c'est un peu de surende à mes besoins.
Ceci est un problème de topologie général fréquemment rencontré lors de l'utilisation de cartes.
L'algorithme de décidant si un point est dans n'importe quel polygone (rectangles, cercles, formes irrégulières) est la suivante: p>
du point étant vérifié, construisez n'importe quelle ligne dans n'importe quelle direction jusqu'au bord de la zone d'écran dans laquelle vos polygones sont situés P> Li>
Si la ligne coupe une limite de polygone sur un nombre impair B> Nombre d'endroits, il est dans B> ce polygone p> Li>
Si la ligne coupe une limite de polygone un Même B> Nombre d'endroits il est extérieur b> ce polygone. P>
Le sens de la ligne est hors de propos p> li>
ne fonctionnera pas si un polygone est coupé sur le côté de l'écran sans fermeture p> li>
si le polygone se coupe sur elle-même, l'algorithme peut échouer si la ligne
arrive à passer à travers le point de coupe (par exemple dans la figure 8 considérée comme un
polygone unique où la ligne passe exactement à travers l'endroit supérieur et inférieur
Pièces Connectez-vous de la figure Connect) P> LI>
ul> p> ------------
| |
| o--|------------------- 1 intersection: inside
| |
-------------
------------
| |
o------|-----------|------------------- 2 intersections: outside
| |
-------------
Je déteste publier une tonne de code ici, mais voici une classe JS qui pourrait vous aider ... PS: Vous aurez besoin de convertir votre événement de clic aux coordonnées locales. En utilisant quelque chose comme la fonction suivante (où e est votre événement de clic):
J'ai récemment créé une API pour détecter des clics de souris sur les rectangles. C'est très basique mais mais cela devrait résoudre votre problème
Vous pouvez le trouver ici .
de
Remarque: il n'a actuellement pas de support de texte pour les boutons, mais il dispose d'un support pour certains styles de base
Documentation:
ici
Code: