Interface graphique avec tkinter - Widget Canvas

d - Canvas: graphiques et dessins

Canvas: graphiques et dessins

Le widget canvas fournit une zone de dessin, qui pourront bien sûr être modifiés, animés, …
Ce widget utilise dans d'autres langages, comme en html où il peut être "piloté" grâce au langage javascript, voir éventuellement quelques exemples là...

Repère et coordonnées dans un canevas

Le repérage dans un canevas se fait avec le repère suivant:

Remarque: on peut modifier créer des fonctions pour changer de repère et modifier le système de coordonnées, afin de se ramener à des coordonnées plus usuelles, en mathématiques notamment, pour tracer des courbes de fonctions, … voir cette page

Principaux éléments géométriques

Lignes (segments)

La méthode create_line(x1,y1,x2,y2) permet de tracer un segment entre deux points

from tkinter import *
gui=Tk()
cnv=Canvas(gui,width=500,height=500,bg="white")
cnv.create_line(10,10,200,100)
cnv.pack()
gui.mainloop()

Exercice 1: Écrire un programme qui dessine une grille dans un canvas.
On pourra prendre un canvas de taille 200x100 et une grille avec 20 lignes verticales et 10 horizontales:

Rectangles et polygones

Les méthodes create_rectangle(x1,y1,x2,y2) et create_polygon(x1,y1,x2,y2,x3,y3, …) permettent de tracer rectangles et polygones:

from tkinter import *
gui=Tk()
cnv=Canvas(gui,width=500,height=250,bg="white")
cnv.create_rectangle(10,10,200,100)
cnv.create_polygon(10,10,10,100,50,200)
cnv.pack()
gui.mainloop()

Exercice 2: Écrire un programme qui affiche un losange dans un canvas:

puis modifier ce programme pour paver le canvas avec des losanges:

Insérer une image

La méthode create_image permet d'insérer une image, à charger préalablement avec PhotoImage, par exemple

from tkinter import * 
root = Tk()
cnv = Canvas(root, width=200, height=200)
cnv.pack()
img = PhotoImage(file='Icone-64.png')
cnv.create_image(100,100, image=img)
root.mainloop()

pour obtenir

Insérer du texte

On peut insérer du texte au point de coordonnées x et y grâce à la méthode create_text(x,y,text=" text souhaité ... ")

Cercles et ellipses, et arcs

create_oval pour des ellipses, ou des cercles comme cas particulier, et create_arc pour des portions, ou arcs de cercle. La commande create_oval permet de tracer cercles, disques et ellipses:

from tkinter import *
gui=Tk()
cnv=Canvas(gui,width=500,height=500,bg="white")
x=100
y=200
r=10
cnv.create_oval(x-r, y-r, x+r, y+r,fill="blue")
cnv.pack()
gui.mainloop()

Manipuler des objets: localiser, déplacer, modifier, effacer

Une fois un objet créé, il est encore possible d'en faire un certain nombre de choses.
La méthode coords permet de localiser un objet, c'est-à-dire de déterminer ses coordonnées:

from tkinter import *
gui=Tk()
cnv = Canvas(gui, width = 500, height = 250)
cnv.pack()

cible=cnv.create_oval(100,100,110,150)

(x0,y0,x1,y1)=cnv.coords(cible)

gui.mainloop()

Cette même méthode permet de déplacer un objet pour le positionner au point x et y avec

cnv = Canvas(gui, width = 500, height = 250)
cible=cnv.create_oval(100,100,110,150)
cnv.coords(cible,x,y)

On peut préférer déplacer l'objet relativement de dx et dy depuis son emplacement, avec

cnv.move(cible,dx,dy)

Pour supprimer un objet, on utilise

cnv.delete(cible,x,y)

Enfin, la méthode finclosest permet de trouver l'élément graphique le plus proche:

cnv.findclosest(x,y)

Animer des objets: méthode `after`

Exercice 3: Créer un rectangle dans un canvas, en haut et au milieu, puis le faire "chuter" jusqu'en bas du canvas

itemconfig: lister et modifier toutes les propriétés d'un objet graphique

Plus généralement, les éléments graphiques possèdent de nombreuses propriétés; on peut les lister, par exemple pour un rectangle, par

rect=cnv.create_rectangle(10,30,100,120)
print(cnv.itemconfig(rect))

ou, de manière plus lisible,

for i in canvas.itemconfig(rect).items():
    print(i)

Toutes les propriétés listées peuvent alors être modifiées via, par exemple,

canvas.itemconfig(rect,width="4")
canvas.itemconfig(rect,fill="blue")

Interaction avec la souris

On peut lier les évenéments de la souris, clicks et mouvements au canevas: on parle de "event bindings".
Pour plus de détail, voir la partie suivante key binding: interaction avec le clavier et/ou la souris.

Ici, par exemple, on récupère et affiche simplement les coordonnées du click de la souris.
On trace de plus au lieu du click un point (ou ovale plutôt).

from tkinter import *
gui=Tk()

cnv=Canvas(gui,width=300,height=300,bg="white")
cnv.pack()

def paint( event ):
    global cr
    x=event.x
    y=event.y
    cnv.delete(cr)
    cr=cnv.create_oval(x-2,y-2,x+2,y+2,fill="red")
    message['text']="( "+str(x)+" , "+str(y)+" ) "

cr=cnv.create_oval(0,0,0,0)

cnv.bind("<Button-1>", paint )

message = Label( gui, text = "Click !" )
message.pack( side = BOTTOM )

gui.mainloop()

Top

Programmation en python