Project - Step 3 : Tools

To translate this course in your native langage:

In Chrome: right-click anywhere on the page and select “Translate to…”
Or use this language selector:

Les mots colorés en anglais représentent des mots-clés de la norme du langage C++. Ils sont conservés à l’identique lors de l’utilisation d’une traduction automatique avec Google Translate. Exemple : l’héritage (inheritance) est un principe fondamental de C++.

ToolBox

Spécifications :

La boîte à outils présente les différents outils de tracé : rectangle, cercle, triangle et texte…
L’outil sélectionné doit être affiché avec un fond de couleur différente
Le clic gauche sur un outil sélectionne cet outil de tracé

Outils

Le client souhaite disposer d’outils de tracé interactifs permettant de créer des objets graphiques avec une prévisualisation en temps réel.

Pour chaque outil, un premier clic de souris déclenche une séquence de tracé. Lorsque l’utilisateur déplace la souris, une représentation provisoire de l’objet apparaît sous la forme d’un fin contour violet, qui évolue en fonction des mouvements de la souris. Une fois le tracé terminé, l’objet graphique définitif est ajouté à la scène en utilisant les caractéristiques données dans les différents panneaux (couleur, épaisseur du trait, remplissage, etc.).

Le fonctionnement de chaque outil repose sur les étapes suivantes :

Activation du tracé

Un premier clic de souris initialise la création de l’objet graphique.
Tracé dynamique

Lorsque l’utilisateur déplace la souris, une représentation provisoire de l’objet apparaît avec un trait violet fin. Cette prévisualisation évolue en temps réel en fonction des mouvements du curseur, permettant à l’utilisateur d’ajuster la géométrie de l’objet.
Finalisation du tracé

Une fois le dessin achevé, l’objet graphique définitif est ajouté à la scène. L’objet créé hérite des caractéristiques définies dans les différents panneaux.

Les animations ci-dessous illustrent le comportement attendu pour chacun des outils de tracé.

Outil Segment

Outil Rectangle

Outil Triangle

Demande supplémentaire : si l’utilisateur appuie sur la touche Backspace, le dernier point créé est annulé.

Outil Cercle

Outil Texte

Après avoir défini la position de départ du texte, chaque appui sur une touche du clavier ajoute une lettre au message.

L’appui sur la touche Enter clôt la création du texte.

Hand-Coding Developer

Pour les AI-Free Developer, nous expliquons rapidement la mécanique utilisée pour créer un outil de tracé interactif. Pour coder la logique des différents outils, on peut utiliser une machine à états. Par exemple, pour l’outil triangle :

Etat A : attente du 1er clic
Etat B : attente du 2eme clic
Etat C : attente du 3eme clic

Le comportement de l’outil dépend de l’état courant :

Dans l’état A, aucun point n’est présent, il n’y a pas de tracé à effectuer.
Dans l’état B, un premier sommet a été placé, il faut tracer un trait violet allant de ce premier point à la position actuelle de la souris
Dans l’état C, deux sommets sont connus. On trace en violet le segment les reliant, puis le segment qui relie le dernier sommet à la position de la souris

Pour passer d’un état à l’autre, il existe des transitions :

A->B : transition déclenchée par le premier clic souris indiquant la position du premier point
B->C : transition déclenchée par le deuxième clic souris indiquant la position du second point
C->A : transition déclenchée par le troisième clic souris indiquant la position du troisième sommet, durant cette transition, l’objet graphique final est créé

Il existe des transitions supplémentaires pour gérer l’appui sur la touche Backspace. Traditionnellement, on code les états en utilisant une enum.

Modélisation

Chaque outil peut être décrit comme une succession d’actions. Son fonctionnement peut ainsi être représenté à l’aide d’un indicateur d’état qui détermine la fonction à exécuter : « si l’outil est dans l’état A, alors exécuter l’action correspondante ».

Cependant, chaque outil dispose de plusieurs données internes :

Le premier point sélectionné
…

Et on n’y échappe pas : données + comportements = classes. Et oui ! Chaque outil doit être représenté par une classe.

Plusieurs questions de modélisation se posent alors :

Comment représenter l’outil actif ?

Allez-vous gérer chaque outil au cas par cas, comme ci-dessous ?

if activeToolID == rectangleToolID

    rectangleTool.do(...)

VIDEO (max 1 min 40) : Choix de conception - le modèle - les outils

VIDEO (max 1 min 30) : Démonstration de chaque outil