TKINTER, CANVAS, LES FENETRES

INTERFACE

Note

Le domaine des interfaces graphiques ou GUI (Graphical User Interfaces) est extrêmement complexe. Chaque système d’exploitation peut proposer plusieurs bibliothèques de fonctions graphiques de base.

DIMENSIONS

Avec Python, la bibliothèque la plus utilisée est la bibliothèque tkinter. from tkinter import*

Les différentes dimensions comme la largeur (width), la hauteur (height), etc. peuvent être précisées dans différentes unités.

Si vous indiquez une dimension par un entier, elle est supposée être en pixels.

Vous pouvez préciser une unité en utilisant une chaîne de caractères qui contient un nombre suivi d’une unité :

c : Centimètres i : Pousses (Inches) m : Millimètres. p : Points d’impression

LE SYSTEME DE COORDONNEES

Comme dans la plupart des systèmes d’affichage, l’origine de chaque système de coordonnées est située à son coin supérieur gauche, les valeurs de x augmentant vers la droite et les valeurs de y augmentant vers le bas.

L’unité de base est le pixel avec le coin supérieur gauche de coordonnées (0,0). Les coordonnées indiquées par un entier sont toujours exprimées en pixels, mais chaque coordonnée peut être indiquée via une chaîne de caractères dans une unité particulière.

LES COORDONNEES SONT TOUJOURS POSITIVES

COULEURS

On peut définir les couleurs de plusieurs façons :

Une chaîne de caractère :

#rgb, ( #fff couleur blanc) , #rrggbb (ex : #000000 couleur noir) ,#rrrgggbbb

Un nom standard : (ex : « blue » couleur bleue)

Liste des couleurs :

UTILISATION DU MODULE TKINTER

CHARGER TKINTER

Pour utiliser le module tkinter, il faut d’abord choisir un mode d’importation :

from tkinter import  # charge le module tkinter.

Par souci de clarté, le module tkinter sera toujours explicite dans cette page;

Les variables seront en français et en minuscules.

En python3, le module est rebaptisé tkinter. Il faudra alors choisir un de ces chargements de module:

import tkinter
import tkinter as tkinter #pour la compatibilité avec cette page
import tkinter as tk # pour un préfixage tk
from tkinter import  # pour éviter tout préfixage

OUVRIR UNE FENETRE

programme	Résultat
# module fenetre.py from tkinter import* def creer_fenetre(fenetre,taille,titre,couleur): #fonction qui redimensionne, donne le titre,la couleur fenetre.geometry((taille)) # redimensionne la fenêtre fenetre.title(titre) # affiche le titre dans la fenêtre fenetre.geometry(taille) # redimensionne la fenêtre fenetre.title(titre) # affiche le titre dans la fenêtre fenetre.configure(bg=couleur)# change la couleur du fond fenetre.resizable(height=False,width=False)#taille non modifiable fenetre.update() return fenetre #-----------------------------------------------------------# fenetre=Tk() # crée la fenêtre taille="400x200" # 400 pixels de large et 200 de hauteur titre=" Python NSI" couleur="light blue" fenetre=creer_fenetre(fenetre,taille,titre,couleur) fenetre.mainloop()

programme

Résultat

# module fenetre.py
from tkinter import*
def creer_fenetre(fenetre,taille,titre,couleur):
        #fonction qui redimensionne, donne le titre,la couleur
        fenetre.geometry((taille)) # redimensionne la fenêtre
        fenetre.title(titre)  # affiche le titre dans la fenêtre     
        fenetre.geometry(taille) # redimensionne la fenêtre
        fenetre.title(titre)  # affiche le titre dans la fenêtre
        fenetre.configure(bg=couleur)# change la couleur du fond
        fenetre.resizable(height=False,width=False)#taille non modifiable
        fenetre.update()
        return fenetre
#-----------------------------------------------------------#
fenetre=Tk() # crée la fenêtre 
taille="400x200" # 400 pixels de large et 200 de hauteur
titre=" Python NSI"
couleur="light blue"
fenetre=creer_fenetre(fenetre,taille,titre,couleur)
fenetre.mainloop()

COMMANDES

Commande	Effet
fenetre=Tk()	Permet de désigner un premier objet (une fenêtre) duquel les autres dépendront. Le nom (arbitrairement choisi) est déterminé par `fenetre`
fenetre.title ("NSI ")	Affiche le titre (chaîne de caractères) dans la fenêtre.
fenetre.iconbitmap("logo-isn.ico")	Affiche un logo stocké dans un fichier image avec l’extension « .ico » (dans le même dossier que le fichier python qui utilise l’icône).
fenetre.geometry("500x150")	Précise une taille fixe de fenêtre. Dans le cas contraire, les dimensions de la fenêtre s’adaptent à son contenu.
fenetre.mainloop()	Lancera le gestionnaire d’événements. L’essentiel du script (sauf fonctions ou classes) doit se situer entre es deux, cela peut être considéré comme une boucle.

Méthodes fenêtres

Méthode	Effet
fenetre.geometry(“500x150”)	Redimensionne la fenêtre en 500 pixels de large et 200 pixels de haut.
fenetre.title( “ titre ”)	Affiche le titre dans la fenêtre
fenetre.winfo_width()	Renvoie la largeur de la fenêtre.
fenetre.winfo_height()	Renvoie la hauteur de la fenêtre.
fenetre.configure(bg=”red”)	Le fond de la fenêtre devient rouge.
fenetre.winfo_screenwidth()	Largeur de l’écran en pixels.
fenetre.winfo_screenheight()	Hauteur de l’écran en pixels.
fenetre.resizable(width=False,height=False)	Empêche le redimensionnement de la fenêtre.

  fenetre.resizable(width=False,height=False) #  Empêche le redimensionnement de la fenêtre.

Obtenir la taille de la fenêtre.

fenetre géometrie

On utilise la méthode de fenêtre

largeur=fenetre.winfo_width()

hauteur=fenetre.winfo_height()

Dimension d’une fenêtre

programme	Résultat
#dimensions fenetre.py from tkinter import* def creer_fenetre(fenetre,taille,titre,couleur): #fonction qui redimensionne, donne le titre,la couleur fenetre.geometry((taille)) # redimensionne la fenêtre fenetre.title(titre) # affiche le titre dans la fenêtre fenetre.geometry((taille)) # redimensionne la fenêtre fenetre.title(titre) # affiche le titre dans la fenêtre fenetre.configure(bg=couleur)# change la couleur du fond fenetre.resizable(height=False,width=False)#taille non modifiable fenetre.update() return fenetre #-----------------------------------------------------------# fenetre=Tk() # crée la fenêtre taille="400x200" # 400 pixels de large et 200 de hauteur titre="Tutoriel Python" couleur="light green" fenetre=creer_fenetre(fenetre,taille,titre,couleur) largeur=fenetre.winfo_width() hauteur=fenetre.winfo_height() taille1='largeur : '+str(largeur)+' ; hauteur : '+str(hauteur) message=Label(fenetre,text=taille1,font="verdana 16 bold",bg='light green') message.grid(row=0,column=0) fenetre.mainloop()

programme

Résultat

#dimensions fenetre.py
from tkinter import*
def creer_fenetre(fenetre,taille,titre,couleur):
 #fonction qui redimensionne, donne le titre,la couleur
 fenetre.geometry((taille)) # redimensionne la fenêtre
 fenetre.title(titre)  # affiche le titre dans la fenêtre     
 fenetre.geometry((taille)) # redimensionne la fenêtre
 fenetre.title(titre)  # affiche le titre dans la fenêtre
 fenetre.configure(bg=couleur)# change la couleur du fond
 fenetre.resizable(height=False,width=False)#taille non modifiable
 fenetre.update()
 return fenetre
#-----------------------------------------------------------#
fenetre=Tk() # crée la fenêtre 
taille="400x200" # 400 pixels de large et 200 de hauteur
titre="Tutoriel Python"
couleur="light green"
fenetre=creer_fenetre(fenetre,taille,titre,couleur)
largeur=fenetre.winfo_width()
hauteur=fenetre.winfo_height()
taille1='largeur : '+str(largeur)+' ; hauteur : '+str(hauteur)
message=Label(fenetre,text=taille1,font="verdana 16 bold",bg='light green')
message.grid(row=0,column=0)
fenetre.mainloop()

Sur une fenêtre, nous pouvons placer différends objets : des boutons, du texte

On les appelle widgets .

Liste des WIDGETS de tkinter

Liste des widgets

Il y a 15 classes de base pour les widgets tkinter.

Sur une fenêtre, nous pouvons placer différents objets : des boutons, du texte, des images. On les appelle des widgets (Windows Gadgets)

Widget	Description
Button	Un bouton classique, à utiliser pour provoquer l’exécution d’une commande quelconque.
Canvas	Un espace pour disposer divers éléments graphiques. Ce widget peut être utilisé pour dessiner, créer des éditeurs graphiques, et aussi pour implémenter des widgets personnalisés.
Checkbutton	Une case à cocher qui peut prendre deux états distincts (la case est cochée ou non). Un clic sur ce widget provoque le changement d’état.
Entry	Un champ d’entrée, dans lequel l’utilisateur du programme pourra insérer un texte quelconque à partir du clavier.
Frame	Une surface rectangulaire dans la fenêtre, où l’on peut disposer d’autres widgets. Cette surface peut être colorée. Elle peut aussi être décorée d’une bordure.
Label	Un texte (ou libellé) quelconque (éventuellement une image).
Listbox	Une liste de choix proposés à l’utilisateur, généralement présentés dans une sorte de boîte. On peut également configurer la `listbox` de telle manière qu’elle se comporte comme une série de « boutons radio » ou de cases à cocher
Menu	Un menu. Ce peut être un menu déroulant attaché à la barre de titre, ou bien un menu « pop up » apparaissant n’importe où à la suite d’un clic.
Menubutton	Un bouton-menu, à utiliser pour implémenter des menus déroulants.
Message	Permet d’afficher un texte. Ce widget est une variante du widget Label, qui permet d’adapter automatiquement le texte affiché à une certaine taille ou à un certain rapport largeur/hauteur.
Radiobutton	Représente (par un point noir dans un petit cercle) une des valeurs d’une variable qui peut en posséder plusieurs. Cliquer sur un bouton radio donne la valeur correspondante à la variable, et « vide » tous les autres boutons radio associés à la même variable.
Scale	Vous permet de faire varier de manière très visuelle la valeur d’une variable, en déplaçant un curseur le long d’une règle.
Scrollbar	Ascenseur ou barre de défilement que vous pouvez utiliser en association avec les autres widgets : Canvas, Entry, Listbox, Text
Text	Affichage de texte formaté. Permet aussi à l’utilisateur d’éditer le texte affiché. Des images peuvent également être insérées.
Toplevel	Une fenêtre affichée séparément, au premier plan.

Méthode de placement GRID

Le principe de la méthode grid : la fenêtre est découpée en un quadrillage virtuel, on place les objets de la manière suivante :widget.grid(options)

Option	Effet
row =	Indique le numéro de la ligne.
column =	Indique le numéro de la colonne.
rowspan =	Indique le nombre de lignes qu’occupe le widget.
columnspan =	Indique le nombre de colonnes qu’occupe le widget.
padx=	Indique la distance minimale horizontale qu’occupent le widget et les bords de la grille.
pady=	Indique la distance minimale verticale qu’occupent le widget et les bords de la grille.
widget.grid.forget()	Si on souhaite cacher un widget qui a été affiché par la méthode `grid`.

Remarques :

columnspan`	Normalement un widget occupe seulement une cellule. Cependant, vous pouvez regrouper plusieurs cellules d’une ligne en indiquant par columnspan le nombre de cellules à regrouper.
w.grid(row=0, column=2, columnspan=3)	Aura pour effet de placer `w` dans une cellule qui s’étale sur les colonnes 2, 3 et 4 de la ligne 0.
rowspan	Normalement un widget occupe seulement une cellule. Cependant, vous pouvez regrouper plusieurs cellules d’une colonne en indiquant via `rowspan` le nombre de cellules à fusionner. Cette option peut être utilisée en combinaison avec ``columnspan`` afin de préciser un bloc de cellules d’une ligne.

Par exemple :

w.grid(row=3,colum=2,rowspan=4,columnspan=5) #

aura pour effet de placer w dans une zone obtenue en fusionnant 20 cellules, avec les numéros de lignes 2 - 6 et les numéros de colonnes 1 - 6. (en effet la première colonne ou la première ligne ont le numéro zéro )

sticky # Cette option détermine la façon de distribuer l’espace inoccupé par un widget à l’intérieur d’une cellule. Si vous ne donnez aucune valeur à l’attribut \ ``sticky``, le comportement par défaut est de centrer le widget dans sa cellule.

Position :

Vous pouvez positionner le widget dans un des coins de la cellule en indiquant :

Par exemple :

w.grid(row=3,colum=2,rowspan=4,columnspan=5)

aura pour effet de placer w dans une zone obtenue en fusionnant 20 cellules, avec les numéros de lignes 2 - 6 et les numéros de colonnes 1 - 6. (en effet la première colonne ou la première ligne ont le numéro zéro )

sticky # Cette option détermine la façon de distribuer l’espace inoccupé par un widget à l’intérieur d’une cellule. Si vous ne donnez aucune valeur à l’attribut sticky, le comportement par défaut est de centrer le widget dans sa cellule. Position : Vous pouvez positionner le widget dans un des coins de la cellule en indiquant :

sticky	application	stiky	application
sticky='ne'	nord-est: en haut à droite.	sticky='se'	En bas à droite.
sticky='sw'	En bas à gauche.	sticky ='nw'	En haut à gauche.

Vous pouvez centrer le widget contre l’un des bords de la cellule en utilisant:

sticky	application	stiky	application
sticky='n'	Centré en haut.	sticky='e'	Centré à droite.
sticky='s'	Centré en bas.	sticky ='w'	Centré à gauche.

Etirement :

sticky	application
stiky	application
sticky='ns'	Pour l’étirer verticalement tout en le laissant centré horizontalement.
sticky='nesw'	Pour l’étirer dans les deux directions afin de remplir la cellule.
sticky='ew'	Pour l’étirer horizontalement tout en le laissant centré verticalement.
sticky ='nsw'	Pour l’étirer verticalement en le plaçant contre le bord gauche de la cellule.

Méthode de placement pack

C’est la méthode la plus simple, mais la moins précise pour placer les widgets sur une fenêtre. Au fur et à mesure de la lecture du cours vous apprendrez quelques commandes supplémentaires de la méthode pack().

Il est possible de placer les widgets à l’aide du paramètre side :

side=TOP : haut ; side=LEFT : gauche ; side=BOTTOM : bas ; side=RIGHT : droite

Remarque On ne doit pas mélanger dans un programme la méthode pack() et la méthode grid() .

Méthodes Canvas

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


	# 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()

# 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()

# 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()

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


	#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()

#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


	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


	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=2pi/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[4i]=int(x+rayoncos(iarc+angle)) l_etoile[4i+1]=int(y-rayonsin(iarc+angle)) l_etoile[4i+2]=int(x+(rayon+pro)cos(iarc+angle+arc/2)) l_etoile[4i+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()

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()

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()

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()

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

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.