La toile ou "zone de dessin" créée avec tkinter.Canvas est un véritable petit générateur graphique capable de contenir lignes, rectangles, textes, images et même d’autres contrôles. Pour exploiter pleinement une toile dont le contenu peut dépasser la zone de vue, il est courant d’y associer des barres de défilement (Scrollbars). Cet article réunit les informations essentielles issues du texte fourni et les organise de manière cohérente pour écrire, manipuler et déboguer une interface Tkinter avec Canvas et Scrollbar.
Conception et création d’une toile Canvas
Les zones de dessin, ou toiles, sont créées comme tous les autres contrôles de Tkinter, grâce à leur constructeur de classe tkinter.Canvas. Le premier attribut doit être l’identification de son conteneur, son parent. Il est prudent de définir, dès la création, une couleur de fond et ses dimensions. Le Canvas est une classe qui peut recevoir et placer finement texte, contrôles, et une variété d’éléments graphiques.
Pour créer une toile, on utilise par exemple :
- import tkinter
- TKI_Principal = tkinter.Tk()
- CAN_Toile = tkinter.Canvas(TKI_Principal, bg="white", width=500, height=500)
- CAN_Toile.pack()
Les éléments graphiques d’une toile (ligne, rectangle, oval, arc, texte, image, window…) reçoivent à leur création un identifiant numérique unique (Id). Cet identifiant permet de les gérer et de les modifier ensuite via des méthodes dédiées comme itemconfigure, move, coords, etc.
Création d’éléments et gestion par identifiant
Chaque élément créé dans une zone de dessin possède un identifiant unique et peut être assigné à une variable lors de sa création (par exemple: LigneA = CAN_Toile.create_line(...)). Des exemples d’éléments :
- create_line pour tracer des lignes
- create_rectangle pour des rectangles
- create_oval pour cercles et ellipses
- create_text pour du texte formaté
- create_image pour des images importées
- create_window pour insérer des contrôles dans la toile
Les éléments peuvent être manipulés ensuite grâce à leurs identifiants ou à leurs tags, ce qui permet de les sélectionner et de modifier leurs propriétés via itemconfigure ou coordonnees. Le texte indique aussi comment suivre et modifier les composants en utilisant des appels tels que CAN_Toile.itemconfigure(kactuel, fill="pink", width=1) et CAN_Toile.coords(item) pour connaître les coordonnées entourant l’item.
Association Canvas et Scrollbar: pièces et flux de travail
Quand les éléments insérés dans une toile dépassent les dimensions visibles, il est nécessaire d’ajouter des Scrollbars (barres de défilement) pour permettre à l’utilisateur d’explorer la totalité du contenu. Deux approches existent :
- Utiliser un Scrollbar en association avec le Canvas pour permettre le défilement horizontal et/ou vertical.
- Définir une zone de défilement (scrollregion) qui délimite l’origine et l’étendue de la surface défilable.
Les barres de défilement interagissent avec le Canvas en ajustant la vue affichée via les attributs et commandes correspondants. Par exemple, la méthode yscrollcommand ou xscrollcommand sur le Canvas se connecte à la scrollbar via la configuration du widget Scrollbar, et réciproquement, la Scrollbar appelle la méthode set du Canvas pour mettre à jour la position de défilement. Le texte couvre cette relation par des explications concrètes et des exemples de configuration.
Exemple minimal d’intégration Canvas + Scrollbar
Pour un canevas de 500x500 avec une scrollbar verticale :
Canvas et Scrollbar se créent, puis l’input est relié ainsi:
- CAN_Toile.config(yscrollcommand=ScrollBar.set)
- ScrollBar.config(command=CAN_Toile.yview)
La moindre modification de la zone visible peut être déclenchée par les méthodes scan_mark et scan_dragto pour activer un défilement par drag, et par l’utilisation du paramètre scrollregion pour limiter ou étendre l’aire défilable. Le texte illustre également la logique d’une interaction souris pour faire défiler la toile en cliquant et en déplaçant la souris.
Gérer le défilement, l’accessibilité et l’interaction utilisateur
La défilement n’est pas seulement lié à la taille visuelle. Il peut être utile de décrire une zone utile différente de la zone de vue (scrollregion). La relation entre la vue et l’aire utile se calcule par des rapports et des tailles, et le canevas peut être entouré de barres de défilement horizontales et/ou verticales selon le cas. Le texte détaille aussi comment afficher une portion de l’aire utile, et comment la zone de défilement peut être conçue pour suivre le mouvement de l’utilisateur.
Des exemples expliquent comment repérer l’item le plus proche d’un point ou comment déplacer un item par translation via move, et comment l’itemconfigure peut servir à modifier l’affichage sans recréer l’item.
Avantages des Dash et des attributs de bordure
Pour personnaliser l’apparence des éléments, le texte décrit l’utilisation des attributs dash, activedash et disableddash afin de créer des bordures discontinues et des motifs. Dashoffset permet de décaler le départ de la bordure, et la gestion des bordures peut varier selon l’environnement d’exécution.
Sauvegarde et manipulation avancée
Plus loin dans le texte, il est question de la sauvegarde des dessins (par exemple en EPS via postscript), de l’importation et de la gestion d’images dans le Canvas via PhotoImage, et des détails sur les dimensions et l’ancrage du texte dans les éléments. Le document considère aussi la gestion des collisions via find_overlapping et l’ordre d’empilement des éléments avec tag_raise et tag_lower pour contrôler la superposition des items sur le canevas.
Points clés à retenir pour associer Canvas et Scrollbar
- Créez le Canvas avec parent, bg, width et height.
- Attribuez scrollregion si vous voulez un espace défilable plus grand que la zone de vue.
- Reliez Canvas et Scrollbar via les configurations yscrollcommand/ash et command=CAN_Toile.yview / Scrollbar.set.
- Utilisez scan_mark et scan_dragto pour un défilement drag-and-drop intuitif.
- Utilisez coords, move et itemconfigure pour manipuler les items sans les recréer.
- Employez les tags pour regrouper des objets et faciliter les sélections et les actions groupées.
