Création graphique

Exemple graphique

Exemple de création de formes géométriques :

Tracer des formes géométriques*

Tracé de lignes dans un canevas. Le script décrit ci-dessous crée une fenêtre comportant six boutons et un canevas. Suivant la terminologie de tkinter, un canevas est une surface rectangulaire délimitée, dans laquelle on peut installer ensuite divers dessins et images à l’aide de méthodes spécifiques. Lorsque l’on clique sur le bouton <Tracer une ligne>, une nouvelle ligne colorée apparaît sur le canevas, avec à chaque fois une inclinaison différente de la précédente.

Si l’on actionne le bouton Rectangle une nouvelle couleur est tirée au hasard dans une série limitée. De nouvelles dimensions sont données aléatoirement.

La même méthode est utilisée pour les boutons Ellipse et Cercle Le bouton <Quitter> sert à terminer l’application en refermant la fenêtre.

Exemple 0720 : Tracé de cercles, de lignes et de rectangles dans un canevas :

Bouton avec texte

Sur les six boutons du menu trois boutons ont pour option

  text=’….  #(ligne 73,75 et 83)

Ils affichent le texte choisit par le programmeur;

Boutons avec image

Les trois boutons Rectangle , Cercle et Ellipse ont pour option :

image= #(ligne77, 79 et 81)

Ils affichent des images qui reprèsentent les dessins que les commandes exécutent.

# 0716 tracer des figures et du texte.py
from tkinter import *
from random import randrange
def trace_ligne():
 "Trace une ligne dans le canevas can"
 x1,y1,larg,haut=change_coordonees()
 couleur='black'
 can.create_line(x1,y1,x1+larg,y1+haut,width=5,fill=couleur)

 
def trace_cercle():
        "Trace un cercle "  
        x1,y1,larg,haut=change_coordonees()
        larg=larg/2
        
        couleur=change_couleur()
        can.create_oval(x1,y1,x1+larg,y1+larg,width=2,fill=couleur)
  
def trace_ellipse():
        "Trace une ellipse"
        x1,y1,larg,haut=change_coordonees()
        couleur=change_couleur()
        can.create_oval(x1,y1,x1+larg,y1+haut,width=2,fill=couleur) 
    
def trace_rectangle():
 "Trace un rectangle"
 x1,y1,larg,haut=change_coordonees()
 couleur=change_couleur()
 can.create_rectangle(x1,y1,x1+larg,y1+haut,width=2,fill=couleur)

def nettoie(can):
        "efface tout les dessins et redessine le cadre"
        can.delete(ALL)
        can.create_rectangle(2,2,500,500,width=2,outline='black')
 
def change_coordonees():
 "change les coordonnées"
 x1=randrange(50,450)
 y1=randrange(50,450)
 lm,hm=500-x1,500-y1
 largeur=randrange(25,lm)
 hauteur=randrange(25,hm)
 return x1,y1,largeur,hauteur
 
def change_couleur():
 "Changement aléatoire de la couleur du tracé"
 palette=['coral','red','gold','sky blue',
 'coral','gray','orange','green']
 c = randrange(8)  # nombre aléatoire de 0 à 7
 couleur = palette[c]
 return couleur

#------ Programme principal -------
fenetre = Tk()
fenetre.iconbitmap("logo-isn.ico")  
fenetre.geometry("650x500")      
fenetre.title("cercle ligne rectangle dans un canevas ")
couleur='green'   #couleur initiale
x1,y1,largeur,hauteur,diametre=20,20,20,20,40
lc=[ x1,y1,largeur,hauteur,diametre,couleur]#liste de coordonnées
txt=['Tracer une ligne',"Tracer un rectangle",'Tracer un cercle',
'Tracer une ellipse']
BG="light blue"
#Méthode grid
can = Canvas(fenetre,bg='pale turquoise',height=500,width=500)
can.grid(row=0,column=0,rowspan=6,columnspan=6)
can.create_rectangle(2,2,500,500,width=2,outline='black')
b1 = Button(fenetre,text='Quitter',bg='red',command=fenetre.destroy)
b1.grid(row=5,column=7)
b2 = Button(fenetre,text=txt[0],command=lambda:trace_ligne(),bg=BG)
b2.grid(row=0,column=7)
b3 = Button(fenetre,text=txt[1],command=lambda:trace_rectangle(),bg=BG)
b3.grid(row=1,column=7)
b4 = Button(fenetre,text=txt[2],command=lambda:trace_cercle(),bg=BG)
b4.grid(row=2,column=7)
b5 = Button(fenetre,text=txt[3],command=lambda:trace_ellipse(),bg=BG)
b5.grid(row=3,column=7)
b6 = Button(fenetre,text='Effacer',command=lambda:nettoie(can),bg=BG)
b6.grid(row=4,column=7)
fenetre.mainloop()
video mp4 by EasyHtml5Video.com v3.9.1

Options formes géométriques  :

Style CHORD, smooth, splinestep.

Pour les formes géométriques, les deux premiers entiers représentent les coordonnées du point en haut à gauche du rectangle, les deux suivants celles du point en bas à droite. Pour create_oval et create_arc, il s’agit des coordonnées du rectangle circonscrit.

Pour create_arc, l’angle de départ et l’extension sont donnés en degrés (progression trigonométrique, antihoraire) PIESLICE dessine un quartier de tarte, CHORD un arc et sa corde. Pour dessiner un polygone, éventuellement arrondi, il faut en déterminer les différentes coordonnées de points (sans se préoccuper de répéter les coordonnées du premier) : smooth=True et splinesteps=n sont disponibles pour les polygones.

_images/image135.png
_images/image136.png

Reconfigurer un élément  :

Reconfigurer

L’instance récupérée lors de la création permet de manipuler les objets créés. Pour un rectangle crée avec la variable rectangle, la commande permet de changer la couleur d’un rectangle par le bouton :

can.itemconfigure(rectangle,fill="green")
Colore l’objet rectangle en vert.
can.delete(rectangle)
Détruit l’élément rectangle

0722 reconfigurer.py

#0722 reconfigurer.py
from tkinter import *
def creer_fenetre(fenetre,taille,titre,icone,couleur):
 #fonction qui redimensionne, donne le titre
 #et l'icône de la fenêtre ainsi que la couleur
 fenetre.geometry(taille) # redimensionne la fenêtre
 fenetre.title(titre)  # affiche le titre dans la fenêtre
 fenetre.iconbitmap(icone) # change l'icône de la fenêtre
 fenetre.configure(bg=couleur)# change la couleur du can
 return fenetre
def rouge(v):
 """change la couleur en rouge"""
 if v=="g":
  can.itemconfig(r, fill='red')
 else:
  can.itemconfig(r1, fill='red')
def vert(v):
 """change la couleur en vert"""
 if v=="g":
  can.itemconfig(r, fill='light green')
 else:
  can.itemconfig(r1, fill='light green')
def bleu(v):
 """change la couleur en bleu"""
 if v=="g":
  can.itemconfig(r, fill='blue')
 else:
  can.itemconfig(r1, fill='blue')

fenetre=Tk()
couleur='light blue'
icone="logo-isn.ico"
titre=" Reconfigurer"
taille="400x220"
d,g="d","g"
fenetre=creer_fenetre(fenetre,taille,titre,icone,couleur)
can= Canvas(fenetre, width=300, height=200, background=couleur)
can.grid(row=0,column=1,columnspan=4,rowspan=3)
r=can.create_rectangle(10,10, 150,185, fill='green')
r1=can.create_rectangle(155,10, 295,185, fill='gold')
b1= Button(fenetre, text="Rouge!", command=lambda:rouge(g))
b2= Button(fenetre, text="Vert!", command=lambda:vert(g))
b3= Button(fenetre, text="Bleu!", command=lambda:bleu(g))
b1.grid(row=0,column=0)
b3.grid(row=1,column=0)
b2.grid(row=2,column=0)
b1= Button(fenetre, text="Rouge!", command=lambda:rouge(d))
b2= Button(fenetre, text="Vert!", command=lambda:vert(d))
b3= Button(fenetre, text="Bleu!", command=lambda:bleu(d))
b1.grid(row=0,column=5)
b3.grid(row=1,column=5)
b2.grid(row=2,column=5)
fenetre.mainloop()

Illustration:

video mp4 by EasyHtml5Video.com v3.9.1