4. Détection de collision
Dans les cas où le composant Canvas n'est pas entièrement rempli par un élément ou
s'il contient plusieurs éléments, la gestion du clic est plus périlleuse : il faut détecter si
l'utilisateur a bien cliqué sur un élément qui existe. Dans l'exemple précédent, l'affaire
est entendue : le composant Canvas ne contient qu'un rectangle, qui remplit entièrement
la zone qui lui est réservée ; un clic dans cette zone correspond forcément au rectangle.
Pour vérifier si l'utilisateur clique dans une forme, on effectue une détection de
collision un peu particulière, entre un point et une forme. L'algorithme à employer
dépend fortement de la forme géométrique considérée ; il cherche à répondre à une
seule question : un point (x, y) est-il dans la forme ? L'algorithme proprement dit
dépend de la structure de la forme considérée ; il se trouve généralement facilement sur
Internet (par exemple, sur Wikipedia).
Note > En toute généralité, une détection de collision permet de savoir si deux
formes données ont une intersection — par exemple, entre deux carrés, entre une
ellipse et un arbre.
Par exemple, pour réécrire MosaiQ avec des cercles, la modification du code de
dessin est assez simple. Il faut cependant faire attention au fait que Canvas ne propose
pas de fonction pour directement remplir un cercle, contrairement à un rectangle : on
doit créer un chemin, faire appel à la fonction ellipse pour mettre à jour le chemin (un
cercle est un cas particulier d'une ellipse), fermer le chemin, puis remplir la forme
ainsi créée. Les coordonnées passées en paramètres à la fonction ellipse
correspondent au rectangle dans lequel s'inscrit l'ellipse (ici, plutôt le carré, pour
obtenir un cercle) : le point en haut à gauche, la largeur, la hauteur.
var ctx = getContext("2d");
ctx.fillStyle = rcolor;
ctx.beginPath();
ctx.ellipse(0, 0, width, height);
ctx.closePath();
ctx.fill();
Cependant, en l'état, le code ne fonctionne pas comme prévu : si l'utilisateur clique en
dehors d'un cercle, la division se fait quand même ! La solution consiste à ajouter, dans
le code qui gère les clics (gestionnaire de signal onClicked de MouseArea), une
condition : le point cliqué est-il dans le cercle ? C'est là qu'interviennent les
algorithmes de détection de collision. Pour un cercle, l'algorithme le plus courant
444
Dans les cas où le composant Canvas n'est pas entièrement rempli par un élément ou
s'il contient plusieurs éléments, la gestion du clic est plus périlleuse : il faut détecter si
l'utilisateur a bien cliqué sur un élément qui existe. Dans l'exemple précédent, l'affaire
est entendue : le composant Canvas ne contient qu'un rectangle, qui remplit entièrement
la zone qui lui est réservée ; un clic dans cette zone correspond forcément au rectangle.
Pour vérifier si l'utilisateur clique dans une forme, on effectue une détection de
collision un peu particulière, entre un point et une forme. L'algorithme à employer
dépend fortement de la forme géométrique considérée ; il cherche à répondre à une
seule question : un point (x, y) est-il dans la forme ? L'algorithme proprement dit
dépend de la structure de la forme considérée ; il se trouve généralement facilement sur
Internet (par exemple, sur Wikipedia).
Note > En toute généralité, une détection de collision permet de savoir si deux
formes données ont une intersection — par exemple, entre deux carrés, entre une
ellipse et un arbre.
Par exemple, pour réécrire MosaiQ avec des cercles, la modification du code de
dessin est assez simple. Il faut cependant faire attention au fait que Canvas ne propose
pas de fonction pour directement remplir un cercle, contrairement à un rectangle : on
doit créer un chemin, faire appel à la fonction ellipse pour mettre à jour le chemin (un
cercle est un cas particulier d'une ellipse), fermer le chemin, puis remplir la forme
ainsi créée. Les coordonnées passées en paramètres à la fonction ellipse
correspondent au rectangle dans lequel s'inscrit l'ellipse (ici, plutôt le carré, pour
obtenir un cercle) : le point en haut à gauche, la largeur, la hauteur.
var ctx = getContext("2d");
ctx.fillStyle = rcolor;
ctx.beginPath();
ctx.ellipse(0, 0, width, height);
ctx.closePath();
ctx.fill();
Cependant, en l'état, le code ne fonctionne pas comme prévu : si l'utilisateur clique en
dehors d'un cercle, la division se fait quand même ! La solution consiste à ajouter, dans
le code qui gère les clics (gestionnaire de signal onClicked de MouseArea), une
condition : le point cliqué est-il dans le cercle ? C'est là qu'interviennent les
algorithmes de détection de collision. Pour un cercle, l'algorithme le plus courant
444