Liens utiles
Gestion des évènements dans le canvas
Télécharger le code source de démarrage pour cet exercice.
La fonction displayEventInfo
prend en paramètre un
évènement.
Compléter cette fonction pour afficher les informations suivantes
lorsque l'utilisateur clique dans le canvas:
- les coordonnées de la souris dans le canvas
- l'identifiant du bouton de la souris que l'utilisateur a utilisé
Tracé de courbes à main levée
Reprendre le même code source de démarrage.
Dans cet exercice, une courbe est représentée par une polyligne qui relie des points dont les coordonnées sont relevées lors du suivi du pointeur de l'utilisateur. Pour mémoriser ces coordonnées, on utilise un tableau de coordonnées.
- Compléter la fonction
drawPolyline(curveCoords,color)
pour qu'elle affiche dans le canvas la polyligne liant les sommets dont les coordonnées sont stockées dans le tableaucurveCoords
passé en paramètre et en utilisant la couleur de traitcolor
également passée en paramètre. - Gestion des évènements: compléter les fonctions
handlePress
,handleMove
,handleUpAndLeave
pour gérer la séquence d'interaction suivante:-
l'utilisateur appuie sur l'un des boutons (
mousedown
) pour commencer un tracé.Le tableau des coordonnées (
coords
) des points de la courbe doit être initialisé et les coordonnées du premier point (coordonnées du pointeur souris) peuvent être ajoutées dans ce tableau. -
ensuite, l'utilisateur déplace le pointeur (
mousemove
) tout en maintenant la pression sur le bouton.Les coordonnées des points suivants sont ajoutées au tableau
coords
. -
l'utilisateur relâche la pression sur le bouton de la souris (
mouseup
) ou sort le pointeur du canvas (mouseleave
)Les coordonnées du dernier point sont ajoutées au tableau
coords
.L'affichage de la polyligne qui relie les points stockés dans le tableau
coords
devra être actualisé durant l'interaction pour assurer un feedback satisfaisant.
-
l'utilisateur appuie sur l'un des boutons (
-
Affichage de plusieurs courbes: modifier le code précédent pour que lorsque
l'utilisateur appuie sur l'un des boutons de la souris un nouveau tracé débute tout en conservant la courbe précédente à l'écran. Le nouveau tracé s'affichera dans une nouvelle couleur: la couleur suivante dans le tableau des couleurs définies dans le tableau
colors
.Pour implémenter cette modification, une première solution consiste à modifier la structure utilisée pour mémoriser le dessin en cours. Pour la question précédente ce dessin était mémorisé dans le tableau de coordonnées de la seule courbe affichée
coords
. Pour cette question on peut créer une variablecurves
qui contiendra toutes les courbes dessinées. Ce sera donc un tableau de tableaux.Une autre solution beaucoup plus facile à implémenter, consiste à ne pas redessiner le fond du canvas à chaque dessin. Mais cette solution est très limitée car elle ne permet pas de mémoriser les points qui ont permis de créer les courbes.
Courbe de Bézier simple: affichage et modification
Dans cet exercice, une courbe de Bézier est représentée, en mémoire, par trois (ou quatre) points de contrôle dont les coordonnées sont stockées dans le tableau controlCoords
. Une courbe de Bézier est affichée en utilisant les méthodes de dessin de la classe Path2D. La méthode bezierCurveTo
affiche une courbe de Bézier cubique caractérisée par 4 points de contrôle et la méthode quadraticCurveTo
affiche une courbe de Bézier quadratique caractérisée par 3 points de contrôle.
Commencer par lire le code source de démarrage pour cet exercice. Ensuite, implémenter les opérations suivantes:
-
Compléter la fonction
drawBezier(curve, fgColor)
pour qu'elle affiche une courbe de Bézier quadratique ou cubique selon le nombre de coordonnées passée en paramètre dans le tableaucurve
. La couleur de la courbe sera la couleurfgColor
passée en paramètre. -
Ecrire le code de la fonction
drawPoint(x, y, fgColor)
pour qu'elle affiche un point centré en x,y de couleurfgColor
. -
Ecrire le code de la fonction
drawControls(curve, fgColor)
pour qu'elle affiche les points de contrôles de la courbe passée en paramètrecurve
dans la couleurfgColor
. -
Ecrire le code source de la fonction
pick
qui prend comme argument des coordonnées et retourne le premier point de contrôle correspondant à ces coordonnées. -
En utilisant la méthode
pick
, compléter la gestion des évènements pour que l'utilisateur puisse modifier la position d'un point de contrôle affiché en cliquant sur ce point de contrôle avec sa souris et en le déplaçant tout en maintenant la pression sur le bouton de la souris. La courbe doit être mise à jour en conséquence à chaque déplacement de point de contrôle. Remarque: il est important que cette interaction ne soit effective que lorsque les points de contrôle sont affichés.