L'affichage d'un item image dans le canevas, ou encore d'une image sur un bouton se fait en deux temps :
création d'un objet PhotoImage, à stocker dans une variable globale,
positionnement de l'image dans le canevas au point de coordonnées (x;y) :
from tkinter import *
fen = Tk()
can = Canvas(fen, width = 400 , height = 400, bg='bisque')
can.pack()
# Création de l'objet PhotoImage :
Objet_Image = PhotoImage(file='logicielslibres.png')
# Affichage de l'image :
Image_Affichee = can.create_image(0,0, image = Objet_Image, anchor='nw')
fen.mainloop()
Remarques :
le fichier image (ici logicielslibres.png) doit se trouver dans le même répertoire que le programme qui l'utilise.
l'option anchor permet de spécifier le coin ou le côté de l'image à placer en (x;y) :
'nw' : north west, 'se' : south east, 'w' : west ... ou encore, par défaut : 'center'
Exercice 1 :
télécharger les images suivantes :
LinuxPythonGNUFirefox
Puis composer la fenêtre suivante à l'aide d'un programme en python :
b) Effacer ou agir sur plusieurs items à la fois : les tags.
Nous aurons souvent besoin d'effacer plusieurs items à la fois, ou d'en déplacer plusieurs simultanément.
Une marque, tag, est une chaîne de caractères qu’on peut associer à un ou plusieurs items du canevas. Nous pourrons ainsi désigner tous les items associés à ce tag.
Le programme suivant affiche 2 balles rouges et 2 balles bleues sur la ligne centrale.
A chaque clic, les balles bleues remonteront de 50 pixels :
################## IMPORTATION ##################
from tkinter import *
################## FONCTION ##################
def monte(event) :
""" Remonte a cahque clic, les balles "tagées blue", de 50 pixels """
can.move('blue', 0, -50)
################## MAIN ##################
fen = Tk()
can = Canvas(fen, width = 600, height = 500, bg = 'ivory')
can.pack()
# Listes des tags et des couleurs des balles :
tag = ['red', 'blue', 'red', 'blue']
color = ['red', 'blue', 'red', 'blue']
# Création des balles :
for count in range(4) :
can.create_oval(100 + 100*count, 300, 200 + 100*count, 200, fill = color[count], tag = tag[count])
can.bind('', monte)
fen.mainloop()
Exercice 2 :
télécharger les images suivantes :
LinuxPythonGNUFirefox
Puis composer une fenêtre avec un canevas et un bouton "efface".
Un clic sur "efface" devra effacer les toutes les images sauf celle de Python.
c) Faire bouger l'image au clavier.
Exemple :
Il s'agit ici de créer une fenêtre avec un personnage qui :
se déplace de 40 pixels vers la droite à chaque fois que le joueur appuie sur la flèche droite,
se déplace de 40 pixels vers la gauche à chaque fois que le joueur appuie sur la flèche gauche.
Attention :
Les événements correspondant à des frappes sur le clavier sont toujours expédiés directement à la fenêtre principale de l’application.
Le gestionnaire de ce type d'événements doit donc être associé à la fenêtre fen, et non au canevas :
fen.bind("<Right>", moove)
Nous disposons en-dehors de ce point de toutes les notions nécessaires.
Exercice 3 :
Composer l'animation dont une image est donnée ci-dessus en créant une fenêtre 870x250 avec un personnage qui :
se déplace de 40 pixels vers la droite à chaque fois que le joueur appuie sur la flèche droite,
se déplace de 40 pixels vers la gauche à chaque fois que le joueur appuie sur la flèche gauche.
L'une des techniques que l'on peut employer, pour donner l'illusion du mouvement dans un jeu vidéo, consiste à faire défiler dans le canevas, une image du décor (route, espace ... ), plus grande que le canevas.
Ainsi, dans la vidéos suivante, on a placé une image de voiture fixe, et l'on fait défiler une image de fond dans le canevas, de façon à donner l'illusion d'un déplacement de la voiture :
Ainsi, sur le schéma suivant, l'image de notre route est en vert, et le canevas en rouge :
Exercice 4 :
Récupérer les fichiers images suivants :
VoitureRoute
Commencer par créer une fenêtre statique avec la route et la voiture.
Améliorer ensuite votre programme en créant une variable de position de l'image de fond "posfond",
et une fonction récursive d'animation "anim" qui, toutes les 20 ms, actualisera posfond et déplacera l'image de fond (méthode coords).
Remarques :
