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:

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.

  1. 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 tableau curveCoords passé en paramètre et en utilisant la couleur de trait color également passée en paramètre.
  2. 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.

  3. 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 variable curves 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:

  1. 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 tableau curve. La couleur de la courbe sera la couleur fgColor passée en paramètre.
  2. Ecrire le code de la fonction drawPoint(x, y, fgColor) pour qu'elle affiche un point centré en x,y de couleur fgColor.
  3. 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ètre curve dans la couleur fgColor.
  4. 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.
  5. 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.