Détection d'un point à l'intérieur ou à l'extérieur d'une forme raphael.js

Question

J'ai une forme raphael.js sur laquelle je trace un cercle. Je veux seulement qu'un cercle apparaisse si le cercle ne dépasse pas la limite de la forme sur laquelle il est tracé.

Pour le rendre plus clair, voici un exemple de ce que je ne veux pas arriver:

Example http://img682.imageshack.us/img682/4168/shapeh.png

Je veux que les cercles en dehors de la zone grise ne pas apparaître. Comment pourrais-je détecter si un cercle est à l'intérieur ou à l'extérieur de la forme grise?

Answer 1

Vous pouvez simplement appliquer un clip-path (qui doit être défini comme étant la forme grise de votre exemple) sur un groupe (élément <g>) contenant les cercles.

Voir this example à partir du w3c SVG testsuite pour savoir comment utiliser les chemins de clip.

Answer 2

Un moyen de dertermine si un point est à l'intérieur chemin fermé est la suivante:

1. Choisissez coordonnées qui sont certainement en dehors de la forme.
2. Faites une ligne à partir de ce point jusqu'à votre point actuel en question.
3. Compter, à quelle fréquence la ligne croise le chemin.
4. Si le nombre d'intersections est impair, alors votre point est à l'intérieur. Si c'est pair, le point est dehors.

Je ne sais pas si cela vous aide beaucoup puisque je ne connais pas raphael.js du tout. Mais c'est une approche géométrique du problème.

Answer 3

Cela ressemble beaucoup à "Hit-testing SVG shapes?".

Vous aurez juste besoin d'appeler getIntersectionList() sur la position du cercle, et voir si elle renvoie la grande forme grise.