Toile HTML5 Méthode isPointInPath()

Question

Dans le cadre d'un diagramme en entonnoir, je dessine des parallélogrammes sur une toile. Pour faciliter le clic sur les parallélogrammes (c'est-à-dire les segments de l'entonnoir), je stocke les coordonnées et je fais des vérifications sur les coordonnées de la souris pour voir si la souris est dans la bonne zone. Cela fonctionne très bien et dandy.

Cependant, maintenant, je suis tombé sur la méthode .isPointInPath() (elle a seulement pris quatre ans). Je me demande donc si ce serait plus rapide (il serait certainement plus facile) d'utiliser:

1) Rejouer le chemin sans le caresser ou le remplir pour qu'il ne soit pas visible 2) Vérifier les coords de la souris en utilisant cette méthode

Lorsqu'un clic se produit .isPointInPath() et les contrôles commencer il pourrait y avoir plusieurs segments pour vérifier - par exemple 5.

Answer 1

généralement en fonction de la course ou le remplissage de vos figures les coordonnées de détection de la souris devrait changer (à partir d'un point de vue de détection de pixel parfait) ainsi quand vous redessinez vos parallélogrammes vous devriez être aussi précis que possible. Cela dit, la meilleure approche consiste généralement à effectuer ces opérations dans un canevas hors écran. Vous pouvez utiliser une toile secondaire pour redessiner vos parallélogrammes un par un et vérifier votre condition comme vous l'avez bien dit en utilisant isPointInPath(). Vous devez être très prudent avec cette méthode, car elle renvoie true si le point est dans le chemin par défaut actuel du canevas et en fonction de la façon dont vous dessinez vos figures, elle peut ne pas toujours faire ce que vous attendez :)

Une autre solution consiste à dessiner les figures une par une, et à utiliser getImageData() pour détecter s'il y a de la couleur dans les coordonnées de la souris ce qui impliquerait un coup sur la figure. Vous pouvez voir un exemple here

Hope this helps