Un canevas

est une zone rectangulaire destinée à contenir des dessins ou d’autres figures complexes. Vous pouvez y placer des graphiques, du texte, des composants graphiques (widgets) ou des cadres (frames). Veuillez consulter les sections suivantes pour les méthodes qui servent à créer de tels objets sur un canevas:

create_arc()

Une portion d’ellipse.

create_bitmap()

Une image de type bitmap.

create_image()

Une image plus riche.

create_polygon()

Un polygone.

create_oval()

Une ellipse.

create_rectangle()

Un rectangle.

create_line()

Un ou plusieurs segments.

create_text()

Insertion de texte.

Utiliser cette méthode pour dessiner des cercles qui sont des cas particuliers d’ellipses. Pour créer un objet de type Canvas:

Canevas=Canvas(fenetre,option=valeur,...)

Paramètres

Effet

fg

Précise le texte à afficher

bg

Précise la couleur du fond.

height

Précise la hauteur du canevas.

width

Précise la largeur du canevas.

font

Précise la police de caractères ainsi que la mise en forme (gras, italique, taille..).

Exemple

#Le canevas s'appelle can, il est dans la fenetre, la police est verdana de taille 12 et en gras
#le fond du canevas est bleu
can=Canvas(fenetre,width=largeur,height=hauteur,fg='red',bg='blue',font='verdana 12 bold')
pacman dans un Canvas

_images/17pacman.PNG
# pacman.py
from tkinter import * 
fenetre = Tk()
fenetre.title('pacman')
can=Canvas(fenetre,height=300,width=300,bg="ivory")
can.create_arc(20,20,280,280,fill="yellow",outline="black",start=25,extent=305)
can.create_oval(200,90,220,110,fill="blue",outline="black")
# Placement du caneavs dans la fenetre
can.grid(row=0, column=0, sticky="nsew")
fenetre.mainloop()

Les arcs :

Pour créer un arc sur un canvas, utiliser :

Canvas.create_arc(x0, y0, x1, y1, extent= , start=...)
#{start= angle en degrés, extent = mesure en degrés de l’arc}

Un arc, dans sa forme générale, est une portion d’ellipse. Une ellipse tout entière ou un cercle forment des cas particuliers. Le constructeur retourne l’identifiant numérique du nouvel arc créé. Le point (x0, y0) est le coin supérieur gauche et (x1, y1) le coin inférieur droit du rectangle dans lequel s’inscrit l’ellipse. Si le rectangle est un carré, vous obtenez un arc de cercle.

# arcs.py
from tkinter import * 
fenetre = Tk()
fenetre.title('Les arcs')
can=Canvas(fenetre,height=600,width=600,bg="thistle")
can.create_arc(20,20,580,580,start=30,extent=300,outline='black',fill='sky blue')
can.create_arc(180,180,420,420,start=30,extent=300,fill='gold',width=4)
can.create_arc(180,180,420,420,start=0,extent=30,fill='light green',width=4)
can.create_arc(20,20,580,580,start=30,extent=300,outline='black',width=4)
can.create_line(300,300,580,300,fill='blue',width=5,dash=(3,5))
can.create_text(480,260,text='start=30°',font='verdana 18 bold')
can.create_text(285,250,text='extend=300°',font='verdana 18 bold')
can.grid(row=0, column=0, sticky="nsew")
fenetre.mainloop()

_images/1701arcs.PNG
Les ellipses et les cercles :

Création

Pour créer l’ellipse (ou le cercle) qui s’inscrit dans le rectangle (ou le carré) (x0, y0), (x1, y1) où les premières coordonnées sont celles du coin supérieur gauche et les secondes celles du coin inférieur droit, utiliser :

Canvas.create_oval( x0,y0,x1,y1,options...)

Le cercle jaune est inscrit dans le carré de côté 180 pixels avec : L’ellipse bleue est inscrite dans le rectangle de largeur 240 pixels et de longueur 360 pixels

_images/17ellipse.PNG
#cercle ellipse.py
from tkinter import * 
fenetre = Tk()
fenetre.title('cercle ellipse')
can=Canvas(fenetre,height=600,width=600,bg="ivory")
can.create_oval(20,20,200,200,outline='black',fill='khaki')
can.create_oval(140,260,580,580,fill='light pink',outline='red',width=4)
can.create_text(100,100,text='cercle',fill='green',font='verdana 12 bold')
can.create_text(360,410,text='ellipse',font='verdana 12 bold')
can.grid(row=0, column=0, sticky="nsew")
fenetre.mainloop()

Options

Effet

#fill
fill=couleur
#exemple
fill=’yellow’

L’intérieur du l’ellipse est transparent si l’option fill n’est pas donnée ou si on a fill= , pour obtenir un remplissage de l’ellipse avec une couleur on utilise :

outline

Précise la couleur de la bordure de l’ellipse (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur.

tag

Chaîne de caractères qui sert à marquer l’ellipse (voir programme fonctionnel).

width

Précise la largeur de la bordure, 1 pixel par défaut.

Les rectangles :

Création

_images/rectangle.PNG

Un rectangle est défini par deux points (x0,y0) pour son coin supérieur gauche et (x1,y1) pour son coin inférieur droit.

Options

Effet

fill
fill=couleur
#exemple
fill=’yellow’

L’intérieur du rectangle est transparent si l’option fill n’est pas donnée ou si on a fill= , pour obtenir un remplissage de rectangle avec une couleur on utilise fill.

outline

Précise la couleur de la bordure du rectangle (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur.

tag

Chaîne de caractères qui sert à marquer le rectangle (voir programme fonctionnel).

width

Précise la largeur de la bordure, 1 pixel par défaut.

Les lignes :

En général, une ligne est une succession de segments connectés les uns aux autres. Pour créer une ligne, utiliser :

Canvas.create_line(x0,y0,x1,y1..., xn,yn,options , ...)

Options

Effet

fill

Couleur utilisée pour colorée la ligne, noir si elle n’est pas appelée.

fill=couleur .
dash

Pour produire une ligne hachurée : dash=(3,5), 3 pixels colorés et 5 pixels transparents.

width

Précise la largeur de la ligne, 1 pixel par défaut.

tag

Chaîne de caractères qui sert à marquer la ligne (voir programme fonctionnel)

Les polygones :

Création

_images/poligone.PNG

Un polygone est une ligne fermée. Ainsi, il possède une ligne de contour (formée de segments) et une zone intérieure. Pour le définir, on utilise une série de points x0,y0,x1,y1,…. Le premier point et le dernier sont reliés par un segment afin de le fermer. Pour créer un polygone, utiliser:

Canvas.create_polygon(x0,y0,x1,y1,...,options ...)

option

Effet

fill
L’intérieur du polygone est transparent si l’option fill n’est pas donnée ou si on a fill=”” ,

pour obtenir un remplissage du polygone avec une couleur on utilise : fill=couleur (exemple fill=’green’ ).

outline

Précise la couleur de la bordure du polygone (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur .

width

Précise la largeur de la bordure, 1 pixel par défaut, utiliser width=0 rend la bordure invisible.

smooth

La bordure est formée par des segments si l’option smooth n’est pas indiquée ou si smooth=0 , pour obtenir une courbe qui passe par les points utiliser smooth=1.

tag

chaîne de caractères qui sert à marquer le polygone (voir programme fonctionnel)


Code

Résultat

# polygone.py 
from tkinter import * 
from math import *
def liste_etoile(x,y,rayon,nombre,profondeur,angle):
	#"""création des coordoonées d'une étoile"""
	arc=2*pi/nombre # longueur de chaque arc
	l_etoile=(nombre)*4*[0] # liste des coordonnées des points
	pro=profondeur# longueur de chaque branche
	for i in range(nombre):
		l_etoile[4*i]=int(x+rayon*cos(i*arc+angle))
		l_etoile[4*i+1]=int(y-rayon*sin(i*arc+angle))
		l_etoile[4*i+2]=int(x+(rayon+pro)*cos(i*arc+angle+arc/2))
		l_etoile[4*i+3]=int(y-(rayon+pro)*sin(i*arc+angle+arc/2))	
	return l_etoile
		
def tracer_etoile(x,y,rayon,nombre,profondeur,angle,couleur):
	#trace une etoile  de centre (x,y) avec un nombre 
	# de branches et avec la couleur
	l_etoile=liste_etoile(x,y,rayon,nombre,profondeur,angle)
	item=can.create_polygon(l_etoile,fill=couleur,outline='black',smooth=1)

def creer_fenetre(fenetre,taille,titre):
        #fonction qui redimensionne,donne le titre
        fenetre.geometry(taille) 
        fenetre.title(titre)		
        return fenetre
#------------------Programme Principal--------------------#											
fenetre=Tk()
larg=150
fenetre=creer_fenetre(fenetre,"700x700","Polygones")
can=Canvas(fenetre,width=700,height=700)
can.grid(row=0,column=0)
tracer_etoile(200,200,larg/3,12,larg/4,0,'red')
tracer_etoile(550,200,larg/3,6,larg/4,0,'blue')
tracer_etoile(200,550,larg/3,12,larg/4,0,'green')
tracer_etoile(550,550,larg/3,3,larg/4,0,"yellow")
fenetre.mainloop()
_images/17polygones.PNG
Les textes :

Vous pouvez afficher une ou plusieurs lignes de texte sur un canevas en utilisant :

Canvas.create_text(x,   y,   options,   …)

option

Effet

anchor

Par défaut vaut ‘center’ la position du texte est centrée sur (x,y).

height

Hauteur de la zone du texte.

width

Largeur de la zone du texte ;

font
#Change la police du texte , exemple :
font=  "arial 20 bold",
police =arial, taille= 20 , bold= gras)
tag

Chaîne de caractères qui sert à marquer la ligne (voir programme fonctionnel)

Code

Résultat

#texte graphique.py
# création d'un canvas can
from tkinter import *
racine=Tk()
racine.title("Texte graphique ")
racine.geometry("550x540")
# création d'un widget 'Canvas' contenant une image bitmap :
can= Canvas(racine, width =550, height =540, bg ='white')
# une ligne
ligne1=can.create_line(0, 0, 320, 300,width=7,fill="cyan")
# un rectangle ou un carré
rect1=can.create_rectangle(60,10,320,300,width=5,outline="red")
#une ellipse ou un cercle
oval1=can.create_oval(60,10,320,300,width=6,outline="blue")
# texte graphique
txt=can.create_text(160, 100, text="Texte graphique", font="Arial 16 italic", fill="green")
# Mise en page à l'aide de la méthode 'grid' :
can.grid(row =0, column =0, rowspan =3, padx =0, pady =0)
racine.mainloop()
_images/17textegraphique.PNG
Création d’une image dans un canevas:

Pour afficher l’image paysage.png, on utilise la fonction « PhotoImage » qui permet d’afficher l’image sur le canevas. Les lignes 14 et 16 sont les commandes destinées à afficher du texte sur le canevas.

Code

Résultat

_images/image130.png _images/image131.png

Les arcs, les rectangles, les ellipses, les lignes, les textes et les polygones sont des items d’un canevas.

Méthodes de modifications de marques

Remarque

# tag est la marque posée sur l'item marque
# l'item est un objet crée par l'utilisateur
# un arc, un rectangle une image .....
carre=can.create_rectangle(10,50,50,100,fill='blue',tag="UN")
# Exemple: la marque est UN
# le nom de l'item est : carre

Méthodes

Canvas.addtag_above(marque,item)

Mettre une nouvelle marque à l’item situé juste au-dessus de celui qui est sélectionné
    par item dans la liste d’affichage. L’argument marque, donné sous la forme d’une chaîne de caractère, est la marque qu’on souhaite apposer.
Canvas.addtag_all(marque)

 Attache la marque donnée à tous les items qui sont présents sur le canevas.
Canvas.addtag_below(marque,item)

Attache la nouvelle marque marque à tous les items situés en-dessous de celui qui est indiqué par l’identifiant numérique ou la marque item. L’argument marque est une chaîne de caractères.

Canvas.addtag_closest(marque,x,y,halo=None,start=None)

Ajoute une marque à l’item le plus proche de la position indiquée par les coordonnées (de la fenêtre de vue). Si un ou plusieurs items sont à la même distance, celui qui est le plus haut dans la liste d’affichage (qui recouvre les autres) est sélectionné. Utilisez l’argument halo afin d’augmenter la taille effective du point. Par exemple, une valeur de 5 indique le traitement de tous les objets qui recouvrent le disque de centre (x, y). Si l’identifiant d’un objet est utilisé pour l’argument start, cette méthode marque l’item qui est le plus haut dans la liste d’affichage tout en étant en dessous de celui qui est ainsi identifié.

Canvas.addtag_enclosed(marque,x1,y1,x2,y2)

Ajoute la marque à tous les items qui sont complètement recouvert par le rectangle dont le coin supérieur gauche est (x1, y1) et le coin inférieur droit est (x2, y2).

Canvas.addtag_overlapping(marque,x1,y1,x2,y2)

Comme la méthode précédente à cela près que les items marqués sont tous ceux qui ont au moins un point commun avec le rectangle.

Canvas.addtag_withtag(marque,item)

Ajoute la marque marque aux objets identifiés par item.

Canvas.bbox(item=None)
Canvas.dtag(item,marque)

Supprime la marque du ou des items sélectionnés par item.

Méthodes de coordonnées

Canvas.coords(item)

Retourne un tuple (x1, y1, x2, y2) qui décrit un rectangle qui renferme tous les objets identifiés par item. Si l’argument n’est pas précisé, le rectangle retourné est le plus petit qui contient tous les items présents dans le canevas. Le coin supérieur gauche du rectangle est (x1, y1) et son coin inférieur droit est (x2, y2).

Canvas.coords(item,x0,y,x1,y1,...,xn,yn)

Si vous précisez uniquement l’argument item, elle retourne un tuple contenant les coordonnées du plus bas ou de l’unique item précisé par cet argument. Le nombre des coordonnées dépend du type d’item. Dans la plupart des cas, il est de la forme (x1, y1, x2, y2) décrivant la boîte englobante (bounding box) de l’item. Vous pouvez déplacer un item en précisant ses nouvelles coordonnées.

Canvas.dchars(item,first=0,last=first)

Supprime des caractères du ou des items textuels sélectionnés. Tous les caractères situés entre first et last (inclus) sont supprimés, ces paramètres indiquant une position entière ou la fin du texte via la chaîne “end”.

Méthodes de suppression

Remarque

# le Canvas s'appelle can
can=Canvas(fenetre,width=largeur,height=hauteur,bg='red')
# l'item est un objet crée par l'utilisateur
# un arc, un rectangle une image .....
carre=can.create_rectangle(10,50,50,100,fill='blue',tag="UN")
# Exemple: la marque est UN
# le nom de l'item est : carre
#On le supprime
can.delete(carre)
#On veut tout supprimer sur le Caneves
can.delete(ALL)
Canvas.delete(item)

Supprime les items indiqués par item. Il n’y a pas d’erreurs si aucun item ne correspond à item.

Méthodes de recherche

Remarque

# le Canvas s'appelle can
can=Canvas(fenetre,width=largeur,height=hauteur,bg='red')
# l'item est un objet crée par l'utilisateur
# un arc, un rectangle une image .....
carre=can.create_rectangle(10,50,50,100,fill='blue',tag="UN")
# Exemple: la marque est UN
# le nom de l'item est : carre
cercle=can.create_oval(100,150,150,200,fill='blue',tag="DEUX")
#On veut gérer plusieurs items

Méthodes de recherche

Canvas.find_above(item)

Retourne l’identifiant numérique de l’item situé juste au-dessus de celui qui est sélectionné par item. S’il y en a plusieurs, on utilise le plus haut dans la liste d’affichage. Si l’item précisé par item est le plus haut, la méthode retourne un tuple vide ().

Canvas.find_all()

Retourne une liste qui contient tous les identifiants numériques de tous les items du canevas, du plus bas au plus haut.

Canvas.find_below(item)

Retourne l’identifiant numérique de l’item situé juste en dessous de celui qui est sélectionné par item. Si plusieurs items correspondent, on obtient le plus bas dans la liste d’affichage. Si l’item sélectionné par item est le plus bas, la méthode retourne un tuple vide .

Canvas.find_closest(x,y,halo=None,start=None)

Retourne un tuple contenant l’identifiant numérique d’un seul item, celui qui est le plus proche du point (x, y). Si plusieurs items sont sélectionnés, c’est celui qui est le plus haut dans la liste d’affichage. Si aucun item n’est sélectionné, retourne une liste vide. Utiliser l’argument halo afin d’augmenter la taille effective du point. Tout item situé à une distance inférieur à halo de (x,y) le coupe. Si start est renseigné, en utilisant une marque ou un identifiant (la marque sélectionne l’item le plus bas), l’item le plus proche et situé en-dessous de start est choisi.

Canvas.find_enclosed(x1,y1,x2,y2)

Retourne la liste des identifiants numériques des items situés entièrement à l’intérieur du rectangle déterminé par (x1, y1) (coin supérieur gauche) et (x2, y2) (coin inférieur droit).

Canvas.find_overlapping(x1,y1,x2,y2)

Retourne la liste des identifiants numériques des items qui ont au moins un point commun avec le rectangle x1,y1,x2,y2.

Canvas.find_withtag(item)

Retourne la liste des identifiants numériques des items sélectionnés par item.

Canvas.focus(item=None)

Donne le focus à l’item sélectionné par item. Si plusieurs sont sélectionnés, donne le focus au premier de la liste d’affichage qui permet un curseur d’insertion. Si aucun item ne satisfait cette condition ou si le canevas n’a pas le focus, le focus n’est pas modifié. Si l’argument est omis, l’identifiant de l’item qui a le focus est retourné ou”” si aucun ne l’a.

Canvas.gettags(item)

Si item est un identifiant numérique, elle retourne la liste de toutes les marques qui sont associées à cet item. Si c’est une marque, elle retourne la liste de toutes les marques de l’item le plus bas parmi ceux qui sont sélectionnés.

Canvas.itemcget(item,option)

Retourne la valeur de l’option de configuration (précisée par une chaîne de caractères) pour l’item sélectionné (ou pour l’item le plus bas si plusieurs sont sélectionnés par item. C’est très similaire à la méthode cget() pour les widgets.

Méthodes de configuration

Remarque

# le Canvas s'appelle can
can=Canvas(fenetre,width=largeur,height=hauteur,bg='red')
# l'item est un objet crée par l'utilisateur
# un arc, un rectangle une image .....
carre=can.create_rectangle(10,50,50,100,fill='blue',tag="UN")
# Exemple: la marque est UN
# le nom de l'item est : carre
can.itemconfigure(carre,fill='red')
#On change la couleur du carre
Canvas.itemconfigure( item,option,...)

Si aucune option n’est indiquée, retourne un dictionnaire dont les clés sont les options possibles pour l’item donné par item (ou le plus bas s’il y en a plusieurs). Autrement, modifie les options données sous la forme option=valeur.

Méthodes de déplacement

Remarque

# le Canvas s'appelle can
can=Canvas(fenetre,width=largeur,height=hauteur,bg='red')
# l'item est un objet crée par l'utilisateur
# un arc, un rectangle une image .....
carre=can.create_rectangle(10,50,50,100,fill='blue',tag="UN")
# Exemple: la marque est UN
# le nom de l'item est : carre
dx=10
dy=20
#On déplace le carre de 10 pixels en abscisse
#                    de 20 pixels en ordonnée
can.move(carre,dx,dy)
Canvas.move(item,dx,dy)

Déplace les items donnés via item en ajoutant dx à leurs coordonnées x et dy à leurs coordonnées y.

Postscript

Représentation

Catscript(options,  ...)

Génère une représentation du contenu actuel du canevas sous la forme d’une image PostScript encapsulé. Ses options sont:

colormode

Utilisez “color” pour une image couleur, “gray” pour une image en niveaux de gris, ou “mono” pour une image en noir et blanc.

    file

Pour préciser un fichier dans lequel le code PostScript sera écrit. Si non renseigné, le PostScript est retourné sous la forme d’une chaîne de caractère.
    height

Hauteur du canevas à prendre en compte. Par défaut, la hauteur visible du canevas.
rotate

Si False, la page est rendue en mode «portrait»; si True, en mode «paysage». x et y précisent les coordonnées du coin supérieur gauche de la zone du canevas à afficher.

    width


largeur à prendre en compte. Par défaut, la largeur visible du canevas.

Méthodes de défilement et de déplacement

Canvas.icursor(item,index)

En supposant que l’item sélectionné permette l’insertion de texte et qu’il possède le focus, positionne le curseur d’insertion à la position index laquelle est soit un entier ou la chaîne “end”. N’a pas d’effet autrement.

Canvas.scan_dragto(x,y,gain=10.0)

Sert à faire défiler le canevas.

Canvas.scan_mark(x,y)

Cette méthode sert à réaliser des défilements rapides du canevas. L’intention est que l’utilisateur puisse faire défiler le canevas par cliquer-glisser c’est à dire en appuyant sur un bouton de la souris (sans relâcher) et en la déplaçant jusqu’au relâchement. Pour réaliser cette fonctionnalité, lier l’événement souris «bouton appuyé» à un gestionnaire qui appelle cette méthode en positionnant x et y à la position de la souris. Ensuite, lier l’événement ”<Motion>” à un gestionnaire qui, en supposant que le bouton de la souris n’est pas relâché, appelle scan_dragto(x, y, gain)() en positionnant x et y aux coordonnées de la souris ; le paramètre gain sert à contrôler le rythme du défilement, sa valeur par défaut est 10.0. Utiliser une valeur plus grande pour accélérer le défilement.

Canvas.select_adjust(item,index)

Trouve l’extrémité de la sélection courante la plus proche du caractère donné par index et l’ajuste de façon que la nouvelle sélection contienne ce caractère. L’autre extrémité de la sélection devient le point d’ancrage pour une utilisation ultérieure de select_to(). Si il n’y avait aucune sélection, se comporte comme la méthode select_to().

Canvas.select_clear()

Supprime la sélection courante (pas ce qui est sélectionné) si elle existe, autrement ne fait rien.

Canvas.select_from(item,index)

Positionne le point d’ancrage de la sélection juste avant le caractère précisé par index dans le texte de l’item donné par item. Cette méthode ne modifie pas une sélection existante, elle positionne simplement la marque de fin de sélection pour l’utilisation ultérieur de select_to().

Canvas.select_item()

S’il y a une sélection de texte dans ce canevas, retourne l’identifiant de l’item texte qui contient la sélection. Sinon, retourne None.

Canvas.tag_lower(item,Au-dessous)

Déplace les items item juste en-dessous du premier ou seul item indiqué par Au-dessous. S’il y en a plusieurs, leur ordre relatif n’est pas modifié. Cette méthode ne s’applique pas aux items fenêtre, window.

Canvas.tag_raise(item,Au-dessus)

Déplace les items sélectionnés par item juste au-dessus du premier ou seul item sélectionné par Au-dessus. S’il y en a plusieurs, leur ordre relatif n’est pas modifié. Cette méthode ne s’applique pas aux items fenêtre, window.

Canvas.type(item)

Retourne le type du premier ou seul item sélectionné par item. La valeur de retour est l’une des chaînes suivante ::

'arc', 'bitmap', 'image', 'line', 'oval', 'polygon', 'rectangle', 'text', or 'window'.
Canvas.xview_moveto(fraction)

Cette méthode fait défiler le canevas relativement à sa fenêtre de vue. L’intention est de faire une liaison avec l’option command d’une barre de défilement qui aurait été associée à ce canevas. Le défilement est horizontal jusqu’à une position entre 0 et 1 (argument fraction): 0.0 pour sa position la plus à gauche et 1.0 pour sa position la plus à droite.

Canvas.yview_moveto(fraction)

Même chose que xview_moveto mais verticalement.

Canvas.xview_scroll(n,defile)

Cette méthode fait défiler le canevas à gauche ou à droite. L’argument defile précise le défilement qui peut être soit “units” soit “pages”, n précise le nombre d’unité du déplacement (vers la droite si positif, vers la gauche autrement). “units” se réfère à l’option xscrollincrement . Pour “pages”, n est multiplié par 90% de la largeur de la page.

Canvas.yview_scroll(n,defile)

Même chose que xview_scroll mais verticalement.