Les canevas Canvas() sont les widgets les plus «souples» du module tkinter.

Ce sont des rectangles orientés par un repère ayant pour origine le coin supérieur gauche et dans lesquels on peut :

• Afficher des images et du texte ;
• Tracer des dessins (pixelisés et en 2D !) ;
• Animer des figures.

canvas_nom = Canvas(parent, width = a, height = b)
					

On rappelle qu'il est possible de modifier, ajouter ou supprimer les paramètres d'un canevas en cours de programme en lui appliquant la méthode

.configure(parametres_a_modifier)
				

Les figures affichées dans un canevas s'appellent des items. Comme il existe de très nombreux items disponibles, on s'intéressera uniquement aux :

• Segments ;
• Rectangles ;
• Ovales ;
• Textes ;
• Images.

Pour visualiser les effets des différentes instructions proposées dans cette partie, on part du programme ci-après. Au fur et à mesure de la lecture de cette partie, ajoutez les instructions proposées à la suite de la ligne 17, sous le commentaire : ##----- Dessiner dans le canevas -----##.

##----- Importation des Modules -----##
from tkinter import *

##----- Création de la fenêtre -----##
fen = Tk()
fen.title('Tracer dans un canevas')

##----- Création des boutons -----##
bouton_quitter = Button(fen, text='Quitter', command=fen.destroy)
bouton_quitter.grid(row = 1, column = 1, padx = 3, pady = 3, sticky=E)

##----- Création du canevas -----##
dessin = Canvas(fen, width = 500, height = 400, bg = 'white')
dessin.grid(row = 0, column = 0, columnspan = 2, padx = 3, pady = 3)

##----- Dessiner dans le canevas -----##


##----- Programme principal -----##
fen.mainloop()                    # Boucle d'attente des événements
				

Le canevas est stocké dans la variable nommée dessin.

dessin.create_line(x0, y0, x1, y1)

• (x0 ; y0) et (x1 ; y1) sont les coordonnées des points extrémités du segment tracé.
• width est un attribut optionnel donnant l'épaisseur du trait, en pixels.
• fill est un attribut optionnel donnant la couleur du tracé, le plus souvent sous forme de chaîne hexadécimale de caractères précédée d'un dièse «#».

ligne1 = dessin.create_line(250, 175, 250, 225, width=4, fill='#d05e82')
				

Le canevas est stocké dans la variable nommée dessin.

dessin.create_rectangle(x0, y0, x1, y1)

• (x0 ; y0) et (x1 ; y1) sont les coordonnées des sommets opposés du rectangle.
• La colonne de pixels d'abscisses x1 n'est pas atteinte et la ligne de pixels d'ordonnées y1 non plus.
• width est un attribut optionnel donnant l'épaisseur du contour, en pixels.
• outline est un attribut optionnel donnant la couleur du contour.
• fill est un attribut optionnel donnant la couleur du «remplissage».

rect1 = dessin.create_rectangle(175, 250, 325, 327, width=2, outline='#d05e82')
				

Le canevas est stocké dans la variable nommée dessin.

dessin.create_oval(x0, y0, x1, y1)

• (x0 ; y0) et (x1 ; y1) sont les coordonnées des sommets opposés du rectangle dans lequel est tracée l'ellipse.
• Ni la colonne de pixels d'abscisses x1 ni la ligne de pixels d'ordonnées y1 ne sont atteintes.
• width est un attribut optionnel donnant l'épaisseur du contour, en pixels.
• outline est un attribut optionnel donnant la couleur du contour.
• fill est un attribut optionnel donnant la couleur du «remplissage».

ovale1 = dessin.create_oval(75, 25, 425, 375, width=2, outline='#fb8007')
ovale2 = dessin.create_oval(180, 140, 230, 190, width=0, fill='#d05e82')
ovale3 = dessin.create_oval(270, 140, 320, 190, width=0, fill='#d05e82')
				

Le canevas est stocké dans la variable nommée dessin.

dessin.create_text(x0, y0, text='texte_a_afficher')

• (x0 ; y0) sont les coordonnées de l'ancre du rectangle dans lequel sera écrit la chaîne de caractères 'texte_a_afficher'.
• anchor est un attribut optionnel donnant la position du texte par rapport au point d'ancrage. Par défaut, le texte est centré sur cette ancre (anchor = CENTER).
• fill est un attribut optionnel donnant la couleur du texte, sous forme de chaîne de caractères (nommée ou hexadécimale précédeé d'un dièse #).
• font est un attribut optionnel donnant la police de caractères suivie de sa taille.

dessin.create_text(254, 90, text='  Bienvenue\nà la formation', fill='#fb8007', font='Arial 20')
				

Le canevas est stocké dans la variable nommée dessin.
Ce canevas est inclus dans une fenêtre stockée dans la variable nommée fen.

im = PhotoImage(file = 'mon_image.gif', master=fen)
dessin.create_image(x0, y0, image = im)

• L'image doit être au format .gif, elle est chargée grâce à la fonction PhotoImage et un lien relatif.
• (x0 ; y0) sont les coordonnées de l'ancre de l'image.Comme pour les textes, le paramètre optionnel anchor désigne la position de l'image par rapport au point d'ancrage. Par défaut, l'image est centrée sur cette ancre (anchor = CENTER).

Pour appliquer l'exemple proposé, téléchargez le logo ISN-IREM puis enregistrez ce fichier dans le répertoire courant.

im = PhotoImage(file = 'Logo_ISN-IREM.gif', master=fen)
logo1 = dessin.create_image(250, 288, image = im )
				

##----- Importation des Modules -----##
from tkinter import *

##----- Création de la fenêtre -----##
fen = Tk()
fen.title('Tracer dans un canevas')

##----- Création des boutons -----##
bouton_quitter = Button(fen, text='Quitter', command=fen.destroy)
bouton_quitter.grid(row = 1, column = 1, padx = 3, pady = 3, sticky=E)

##----- Création du canevas -----##
dessin = Canvas(fen, width = 500, height = 400, bg = 'white')
dessin.grid(row = 0, column = 0, columnspan = 2, padx = 3, pady = 3)

##----- Dessiner dans le canevas -----##
ligne1 = dessin.create_line(250, 175, 250, 225, width=4, fill='#d05e82')
rect1 = dessin.create_rectangle(175, 250, 325, 327, width=2, outline='#d05e82')
ovale1 = dessin.create_oval(75, 25, 425, 375, width=2, outline='#fb8007')
ovale2 = dessin.create_oval(180, 140, 230, 190, width=0, fill='#d05e82')
ovale3 = dessin.create_oval(270, 140, 320, 190, width=0, fill='#d05e82')
dessin.create_text(254, 90, text='  Bienvenue\nà la formation', fill='#fb8007', font='Arial 20')
im = PhotoImage(file = 'Logo_ISN-IREM.gif', master=fen)
logo1 = dessin.create_image(250, 288, image = im )


##----- Programme principal -----##
fen.mainloop()                    # Boucle d'attente des événements
						

Le canevas est stocké dans la variable nommée dessin.

dessin.delete(nom_item)

Cette instruction supprime un item (une figure) présent dans le canevas dessin. nom_item peut prendre pour valeur :

• le nom de la variable dans laquelle a été affecté l'item ;

  
  dessin.delete(ovale3)
  						

• l'identifiant numérique unique entier id de l'item, qui est le «numéro» de création de cet item dans le canevas (commence à 1) ;
• le tag de l'item, déclaré sous forme de chaîne de caractère comme paramètre lors de la création de l'item (attention, plusieurs items peuvent avoir le même tag) ;
• CURRENT pour l'item sur lequel on est en train d'agir par un événement.

Remarque

On supprime tous les items contenus dans le canevas dessin grâce à l'instruction :

dessin.delete(ALL)
				

Le canevas est stocké dans la variable nommée dessin.

dessin.itemconfigure(nom_item, parametres_a_modifier)

• L'accés à l'item se fait de la même manière qu'avec la méthode .delete() ;
• La valeur d'un paramètre para d'un item nom_item est obtenu par l'instruction :

  
  dessin.itemcget(nom_item, para)
  						

Le canevas est stocké dans la variable nommée dessin.

dessin.coords(nom_item, coordonnees_en_option)

• Cette instruction permet d'affecter à une variable la liste des quatre (ou des deux selon sa nature) coordonnées actuelles de l'item.
• On peut ajouter comme option une liste de coordonnées (4 ou 2 selon sa nature). Dans ce cas, l'item désigné sera déplacé (redessiné) à ces coordonnées dans le canevas :

  
  dessin.coords(ovale2, 150, 140, 200, 190)
  						

Pour insérer, dans un canevas, des images d'autres formats (en .jpg par exemple), il faudra passer par le module PIL (qui n'est pas présent par défaut dans Python). L'importation des modules devra alors être «subtile» car tkinter et PIL ont des bibliothèques de même nom pour le traitement des images.

Voici un exemple d'importation d'image au format .jpg. Pour cela, téléchargez le logo ISN-IREM au format jpg dans votre répertoire personnel.

##----- Importation des Modules -----##
from PIL import Image, ImageTk
import tkinter as tk

##----- Création de la fenêtre -----##
fen = tk.Tk()

##----- Importation de l'image avec PIL et conversion -----##
im = Image.open('Logo_ISN-IREM.jpg')  
logo = ImageTk.PhotoImage(im, master=fen)

##----- Création du canevas et affichage de l'image -----##
dessin = tk.Canvas(fen, width = im.size[0], height = im.size[1])
logo1 = dessin.create_image(0,0, anchor = tk.NW, image = logo) 
dessin.grid()

##----- Programme principal -----##
fen.mainloop()                    # Boucle d'attente des événements