Travaux Pratiques Qt 2

Sujet

Note préliminaire : il est préférable de lire chaque “étape” en entier (en particulier les notes ou remarques) avant de la traiter. Bien regarder le code qui vous a été fourni, certains points sont déjà partiellement implémentés.

Avant de partir, n’oubliez pas de montrer votre code pour être évaluer.

1e Etape: Créer un nouveau projet affichant une zone de dessin

Récupérer Qt_TP2_skeleton. Cette archive contient une MainWindow (comme le TP1), un fichier resource et un squelette de canvas. Pour exécuter le projet, n’oubliez pas de “compiler” le fichier resource (pyrcc(4,5) -o resources.py resources.qrc

Implémenter la classe “Canvas” (Canvas.py). Pour l’instant cette classe ne fera pas grand chose : elle doit juste hériter de QWidget. La taille par défaut d’un QWidget étant nulle (celle-ci étant calculée à partir des enfants que le widget contient), utiliser la méthode setMinimumSize() pour imposer une taille adéquate. Dans la classMainWindow, faire en sorte que l’instance apparaisse dans la zone centrale au lieu de la zone de texte

On souhaite maintenant avoir à la fois la zone de texte et le canvas. Utilisez un QWidget comme container ainsi qu’un layout vertical QVBoxLayout.

2e Etape: dessiner un rectangle interactivement

Modifier la classe Canvas de telle sorte que l’on puisse interactivement y dessiner un rectangle (l’événement press détermine le coin en haut à gauche du rectangle, le release détermine le coin en bas à droite.

Pour cela, re-implémentez d’abord la méthode paintEvent de la classe QWidget et dessiner un rectangle à l’aide de la méthode drawRect(). Tester. Changez la couleur de fond du rectangle à l’aide de la méthode setBrush() du QPainter (vous pouvez passer des couleurs par défaut, e.g Qt.black, Qt.red, etc.). Re-implémentez ensuite les méthodes mousePressEvent(), MouseReleaseEvent()  and mouseMoveEvent() pour dessiner le rectangle interactivement.

3e Etape: spécifier des attributs graphiques

Rajouter à la classe Canvas quelques slots permettant de spécifier des attributs graphiques. On choisira la couleur de fond de l’objet et sa forme.

Option: Ajouter d’autres attributs (couleur du contour, taille du contour, etc.)

4e Etape: choisir interactivement les attributs graphiques

Modifiez l’interface graphique (normalement créée par la classe MainWindow, pas par la classe Canvas) de telle sorte que l’on puisse régler interactivement les paramètres définis à la question précédente. Pour faire simple, on ne considérera que Rectangle and Ellipse pour la forme de l’objet.

Pour contrôler finement les couleurs, vous utiliserez un QColorDialog. Vous pourrez en particulier utiliser la méthode static getColor().

Remarque si on souhaite allez plus loin : pour éviter de multiplier les slots, il est préférable d’en avoir un seul par type d’attribut graphique. Ceci implique, soit que ces slots aient un argument adéquat, soit qu’ils soient capables de détecter quel bouton (action) a été cliqué(e). A partir d’un slot, il est possible de retrouver l’émetteur à l’aide de self.sender(). Si l’émetteur est un QAction (ou un QPushButton), vous pouvez récupérer le libellé à l’aide de la méthode

5e Etape: tracer plusieurs rectangles

Faire en sorte que l’on puisse tracer non plus un mais plusieurs rectangles à la suite. Ces rectangles auront des attributs graphiques différents si on les modifie entre le tracé de deux rectangles (le changement d’attributs prenant effet sur les rectangles suivants). Pour ce faire il faudra créer une ou plusieurs liste(s) d’affichage. Pour simplifier, on utilisera un array pour les deux attributs (point1, point2)

Option: rajouter des slots permettant de supprimer le dernier rectangle et de supprimer tous les traits et modifiez l’interface graphique en conséquence.

6e Etape: tracer plusieurs formes géométriques

Il s’agit maintenant de généraliser l’étape précédente de telle sorte que l’on puisse dessiner diverses formes géométriques (des rectangles et des ellipses). Pour ce faire on rajoutera les actions adéquates (dans un menu et la toolbar).

Question 1. Si l’on considère de nombreuses formes graphiques (carré, rectangle, ellipse, cercle, trait, etc.) que faudrait il faire pour avoir un code “générique”?

7 e Etape: Implementer plusieurs modes

On souhaite avoir trois modes: dessiner (draw),  déplacer (move) et sélectionner (select).

Implémenter le mode “déplacer” afin de pouvoir déplacer le canvas (i.e. déplace tous les objets). On utilisera la méthode translate() de QPainter. Bien tester votre code pour vérifier que les modes “draw” et “move” sont bien compatibles.

Option: implémenter également zoom in et zoom out

8 e Etape: modifier les attributs a posteriori

Implémenter le mode “select”. Vous devez pouvoir sélectionner un objet à l’aide par exemple de la méthode contains() de la classe QRect. Un “fantome” de L’objet sera  affiché au premier plan et aura un contour différent (méthode setPen() de QPainter). Dans ce mode, le choix d’une couleur ou d’une forme change l’objet sélectionné.