Un premier canevas

Voici un exemple de création d'un canevas :

• On crée un canevas dans fen1, avec une couleur gris foncé comme fond d’écran, une largeur et une hauteur de 200 pixels (deuxième ligne.)
• On le place sur le côté gauche de fen1, que l’on ajuste à la taille du canevas (troisième ligne).
• Enfin, on trace une ligne, de couleur pourpre, reliant le pixel de coordonnées (20,20) à celui de coordonnées (50,50), avec une épaisseur de trait de 2 pixels.

Cela se réalise ainsi...

  >>> fen1=Tk()
  >>> can1 = Canvas(fen1,bg='dark grey',height=200,width=200)
  >>> can1.pack(side=LEFT)
  >>> can1.create_line(10,10,50,50,width=2,fill='purple')

On place ensuite notre bouton Quitter en bas à droite de l'écran :

  >>> bou1 = Button(fen1, text='Quitter', command = fen1.destroy)
  >>> bou1.pack(side=BOTTOM)

On souhaite rajouter un deuxième bouton qui trace aléatoirement une droite dans notre canevas. Pour cela, on crée une fonction aleas (qui nécessite la fonction randrange du module random) :

  >>> def aleas() :
  ...     can1.create_line(randrange(200),randrange(200),
  ...                      randrange(200), randrange(200),
  ...                      width=2, fill='purple')

Il nous reste à mettre notre bouton à droite de la fenêtre, en lui attachant la commande aleas :

  >>> bou2 = Button(fen1, text='Droite', command = aleas)
  >>> bou2.pack(side=RIGHT)

Création de divers objets dans un canvas

Préliminaires

On suppose que l'on a créé un canevas :

  >>> fen=Tk()
  >>> can = Canvas(fen1,bg='dark grey',height=200,width=200)
  >>> can.pack()

Tracer un cercle

Pour tracer un cercle de centre (x,y) et de rayon r, de couleur pourpre :

  >>> can.create_oval(x-r, y-r, x+r, y+r, outline='purple')

On peut aussi tracer une ellipse, en jouant sur les coordonnées.

Si l'on a plusieurs cercles à tracer, le mieux est de définir une fonction recevant en argument les coordonnées du centre, et le rayon du cercle.

Créer un polygone

Voici un exemple de création de polygone :

  >>> can.create_polygon(80, 80, 80,100 ,120, 140,
  ...                    outline='cyan',fill='yellow')

Ici, on a dessiné un triangle, de sommets (80,80), (80,100) et (120,140), de contour cyan et d’intérieur jaune.

Créer un rectangle

Passons au rectangle :

  >>> can1.create_rectangle(80,80,120,100,fill='blue')

Le rectangle de coin supérieur gauche (80,80), de coin inférieur droit (120,100) sera alors créé, d’intérieur bleu.

Afficher du texte

Pour afficher le texte 'toto' en position (40,40) :

  >>> can1.create_text(40,40,text='toto')

Insérer une image

Le code suivant est assez explicite, et réadaptable à souhait...

  >>> can1 = Canvas(fen1, width =160, height=160, bg ='white')
  >>> photo = PhotoImage(file = 'Martin_P.gif')
  >>> item = can1.create_image(80, 80, image =photo)

Les coordonnées (80 ;80) de l'image correspondent aux coordonnées du centre de l’image dans le canvas. Comme le canevas fait ici 160x160 pixels, cette image sera centrée dans ce dernier.

Modification d'un objet dans un canevas

On suppose que l'on a créé un cercle (oval1) dans un canevas (can1),

  >>> from Tkinter import *
  '>>> fen=Tk()
  >>> can=Canvas(fen,width=160,height=160, bg='white')
  >>> can.pack()
  >>> oval=can.create_oval(30, 30, 70, 70, outline='purple')

et que l'on souhaite lui affecter de nouvelles coordonnées (de (50,50) à (90,90)). Cela se fait ainsi :

  >>> can.coords(oval, 50, 50, 90, 90)

Changement de couleur

Le changement de couleur se fait avec la méthode itemconfigure()...

Suppression d’un objet

A chaque nouvel objet créé est associé un entier, dépendant de l'ordre d'apparition de l'objet. Ainsi, en reprenant l'exemple précédent,

  >>> print oval

retourne 1, puisque oval est le premier objet créé.

Pour supprimer l’objet numéro i d'un canevas can, on fait simplement

  >>> can.delete(i)

Récupérer l'objet le plus proche

Pour récupérer l'objet le plus proche de la souris, lors d'un clic :

  >>> can1.find_closest(event.x,event.y)

Recherche, dans le canvas can1, l'objet le plus proche objet du point de coordonnées (event.x, event.y)