Utilisation avancée du widget Canvas dans Tkinter
Le widget Canvas de Tkinter est un outil puissant pour la création d'interfaces graphiques, permettant non seulement de dessiner des formes géométriques, mais aussi d'afficher des images, du texte, et de gérer des interactions complexes.
Création et configuration du Canvas
Pour commencer, il est nécessaire de définir un objet de type Canvas. Le constructeur de la classe Canvas prend plusieurs paramètres essentiels :
- fen : L'objet fenêtre Tkinter parent.
- width : La largeur du canvas en pixels.
- height : La hauteur du canvas en pixels.
- background (ou bg) : La couleur de fond du canvas. Par défaut, cette couleur est grise.
Lors de la création d'un canvas, on peut spécifier ces paramètres en utilisant des paramètres nommés, comme illustré ci-dessous :
can = tk.Canvas(fen, width=600, height=400, bg="ivory")
Les coordonnées dans un canvas sont basées sur un repère dont l'origine se trouve généralement dans le coin supérieur gauche. Les pixels sont numérotés à partir de 0. Par exemple, la coordonnée (10, 10) correspond au pixel situé 10 pixels à droite et 10 pixels en dessous du coin supérieur gauche.
Le canvas peut également être configuré avec des options telles que highlightthickness, qui définit l'épaisseur de la bande d'activation du focus, et bd (border width) pour la bordure.
Dessiner des formes géométriques
Le widget Canvas offre une multitude de méthodes pour dessiner différentes formes.
Rectangles
Pour dessiner un rectangle, on utilise la méthode create_rectangle(x0, y0, x1, y1, **options).
- (x0, y0) : Coordonnées du coin supérieur gauche.
- (x1, y1) : Coordonnées du coin inférieur droit.
- options :
- fill : Couleur de remplissage du rectangle. Par défaut, les rectangles sont remplis en noir.
- outline : Couleur de la bordure. Par défaut, la bordure est noire. Si elle est définie sur une chaîne vide (''), la bordure est supprimée.
- width : Épaisseur de la bordure. Par défaut, elle est de 1 pixel.
La largeur d'un rectangle dessiné avec une bordure est calculée comme la différence absolue entre les abscisses des côtés, plus un pixel pour la bordure. Si la bordure est supprimée (outline=''), la largeur est simplement la différence entre les abscisses.
Cercles et Ellipses
Les cercles et ellipses sont dessinés en spécifiant les coordonnées d'une boîte englobante (un rectangle) à l'aide de la méthode create_oval(x0, y0, x1, y1, **options).
- Pour un cercle, le rectangle englobant doit être un carré. Le diamètre du cercle correspondra à la longueur du côté du carré.
- Les options fill, outline et width fonctionnent de manière similaire à celles des rectangles.
Un cercle de centre (xC, yC) et de rayon R s'étend sur les droites d'équations x = xC + R et x = xC - R. Si width est mis à 0, le cercle n'a plus de bord visible.
Lignes et Flèches
La méthode create_line(x0, y0, x1, y1, ..., **options) permet de dessiner des lignes, potentiellement composées de plusieurs segments.
- options :
- fill : Couleur de la ligne.
- width : Épaisseur de la ligne.
- arrow : Définit si la ligne est une flèche. Les valeurs possibles sont "last" (flèche à l'extrémité), "first" (flèche à l'origine), ou "both" (flèches aux deux extrémités).
- dash : Permet de créer des lignes pointillées ou tirets.
Polygones
Les polygones sont dessinés en fournissant une séquence de coordonnées de sommets à la méthode create_polygon(x0, y0, x1, y1, ..., **options).
- Par défaut, les polygones sont remplis en noir et n'ont pas de bordure (fill="black", outline='').
Secteurs
La méthode create_arc(x0, y0, x1, y1, **options) permet de dessiner des arcs de cercle ou d'ellipse. Le secteur est tracé sur la base de l'ellipse qui contient l'arc.
- Les options start et extent définissent l'angle de début et l'angle d'extension de l'arc.
- Les options style peuvent être "arc" (par défaut), "pie" (secteur plein), ou "chord" (segment reliant les extrémités de l'arc).
Afficher du texte et des images
Texte
Pour afficher du texte sur le canvas, utilisez la méthode create_text(x, y, **options).
- (x, y) : Coordonnées du point de référence du texte.
- options :
- text : La chaîne de caractères à afficher.
- anchor : Définit le point cardinal par rapport auquel le texte est positionné (par exemple, 'n' pour nord, 's' pour sud, 'center').
- fill : Couleur du texte.
- font : Police de caractères utilisée.
Images
Le canvas peut afficher des images stockées sur le disque. Cependant, les formats d'image courants comme JPEG ne sont pas directement pris en charge. Il est nécessaire de convertir l'image dans un format compatible avec Tkinter, généralement en utilisant la classe PhotoImage.
- Chargez l'image : img = tk.PhotoImage(file="chemin/vers/image.gif")
- Affichez l'image sur le canvas : can.create_image(x, y, image=img, anchor=tk.CENTER)
Il est crucial de conserver une référence à l'objet PhotoImage (par exemple, en l'assignant à une variable globale ou à un attribut d'objet) pour éviter qu'il ne soit supprimé par le ramasse-miettes de Python, ce qui rendrait l'image invisible.
Gestion des objets sur le Canvas (Items)
Chaque élément dessiné ou affiché sur un canvas est appelé un item. Chaque item possède un identifiant unique (un entier) qui peut être récupéré lors de sa création.
Obtenir les identifiants
Lorsque vous créez un item avec une méthode comme create_rectangle ou create_image, l'identifiant de l'item créé est retourné. Vous pouvez stocker cet identifiant dans une variable pour le manipuler ultérieurement.
item_id = can.create_rectangle(50, 50, 100, 100)
Supprimer des items
La méthode delete(item_id) permet de supprimer un item spécifique du canvas en utilisant son identifiant. Pour supprimer tous les items présents sur le canvas, utilisez delete('all').
Modifier des items
La méthode itemconfigure(item_id, **options) permet de modifier les propriétés d'un item existant sans avoir à le recréer. Cela inclut des options comme la couleur de remplissage (fill), la couleur de bordure (outline), ou l'épaisseur de la bordure (width). Notez que la position de l'item ne peut pas être modifiée avec itemconfigure.
Cacher et afficher des items
L'option state de itemconfigure permet de cacher ou d'afficher un item. Les valeurs possibles sont 'normal' (visible) et 'hidden' (invisible).
can.itemconfigure(item_id, state='hidden') # Cacher l'itemcan.itemconfigure(item_id, state='normal') # Afficher l'item
Récupérer les coordonnées d'un item
La méthode coords(item_id) renvoie une liste des coordonnées des points qui définissent l'item. La structure de cette liste dépend du type d'item (par exemple, pour un rectangle, elle contiendra les coordonnées des coins opposés).
Déplacement d'objets (Animation)
Le widget Canvas permet de déplacer des items en utilisant la méthode move(item_id, dx, dy).
- item_id : L'identifiant de l'item à déplacer.
- dx : Le déplacement selon l'axe des x.
- dy : Le déplacement selon l'axe des y.
Un déplacement est une translation définie par un vecteur. Pour déplacer un item d'un point A à un point B, le vecteur de translation est calculé comme la différence entre les coordonnées de B et A : (xB - xA, yB - yA).
Pour créer une animation fluide, on utilise généralement une boucle infinie (souvent appelée "boucle de jeu") qui met à jour la position des objets à intervalles réguliers. L'instruction time.sleep(secondes) peut être utilisée pour introduire des pauses et contrôler la vitesse de l'animation.
Python Tkinter Tutorial | How to Move an Image on the Canvas
Détection d'événements et interactions
Récupérer la couleur d'une case cliquée
Pour identifier l'item sur lequel l'utilisateur a cliqué, on peut utiliser la méthode find_withtag('current'), qui retourne l'identifiant de l'item sous le curseur de la souris. Les méthodes find_overlapping(x0, y0, x1, y1) et find_closest(x, y) sont également utiles pour détecter les collisions ou trouver l'item le plus proche d'un point donné.
Si vous avez une grille de cases colorées, cliquer sur une case déclenchera un événement. La fonction associée à cet événement peut alors utiliser find_withtag('current') pour obtenir l'ID de la case cliquée. Une fois l'ID obtenu, vous pouvez récupérer les propriétés de cette case, y compris sa couleur de remplissage.
Les méthodes find_overlapping et find_closest sont particulièrement pertinentes lorsque vous devez gérer des interactions précises avec des éléments graphiques. Par exemple, find_closest peut être utilisé pour identifier la cellule de grille la plus proche des coordonnées du clic.
Gestion des événements de souris
Il est possible de lier des fonctions à des événements de souris (clic, mouvement, etc.) sur des items spécifiques du canvas en utilisant des tags. Un tag est une chaîne de caractères que l'on peut associer à un ou plusieurs items. On peut ensuite lier un événement à tous les items possédant un certain tag.
Organisation des items (Empilement)
Les items sont dessinés sur le canvas dans l'ordre où ils sont créés. Les items créés plus tard apparaissent au-dessus des items plus anciens. Il est possible de modifier cet ordre d'empilement.
- tag_raise(item_id, **options) : Place un item au-dessus des autres. L'option above permet de spécifier un autre item au-dessus duquel placer l'item courant.
- tag_lower(item_id, **options) : Place un item en dessous des autres. L'option below permet de spécifier un autre item en dessous duquel placer l'item courant.
Exportation du Canvas
Pour sauvegarder le contenu d'un canvas dans un fichier image (par exemple, au format PNG), vous pouvez utiliser la méthode postscript(file="nom_fichier.eps"). Cette méthode exporte le contenu du canvas au format Encapsulated PostScript (EPS), qui peut ensuite être converti dans d'autres formats image à l'aide d'outils externes.
Gestion de la zone d'affichage (Scrollbars)
Lorsque le contenu du canvas dépasse la taille visible de la fenêtre, des barres de défilement (Scrollbar) peuvent être ajoutées pour permettre à l'utilisateur d'explorer la zone complète.
- Une zone de défilement est définie par l'option scrollregion du canvas, qui spécifie les coordonnées de la zone utile.
- Les widgets Scrollbar (horizontaux et/ou verticaux) sont ensuite liés au canvas pour synchroniser le déplacement de la vue avec le mouvement du curseur de la barre de défilement.
La configuration des barres de défilement avec un canvas peut être complexe, car elle implique la synchronisation de plusieurs widgets.
tags: #tkinter #canvas #comment #detecter #une #couleur