Mettre un event sur un objet dessiné dans un Canvas

Bonjour,

J'essaie de faire des graphes sur le Canvas de Tkinter. Voici le code de test où je suis arrivé :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

# -*- coding:utf-8 -*- from Tkinter import *   class Application: def __init__(self): self.root=Tk() self.root.title('Graphes')   self.root.geometry("800x600")   self.barreEtat = Label(self.root, text="", bd=1, relief=SUNKEN, anchor=W) self.barreEtat.pack(side=BOTTOM, fill=X)   self.c = Canvas(self.root, bg="white") self.c.pack(side=TOP, fill=BOTH, expand=YES)   self.u = 20   self.c.create_line( 2 * self.u, 15 * self.u, 2 * self.u, 2 * self.u, arrow=LAST) self.c.create_line( 2 * self.u, 15 * self.u, 24 * self.u, 15 * self.u, arrow=LAST)   self.creerUneBarre( 1, 10, "tan") self.creerUneBarre( 2, 9, "tan") self.creerUneBarre( 3, 8, "tan") self.creerUneBarre( 4, 7, "tan") self.creerUneBarre( 5, 6, "tan") self.creerUneBarre( 6, 5, "tan") self.creerUneBarre( 7, -2, "tan") self.creerUneBarre( 8, 4, "tan")   self.root.mainloop()   def creerUneBarre(self, position, hauteur, couleur): x1 = 2 * self.u + position * self.u + position * self.u y1 = 15 * self.u - hauteur * self.u x2 = x1 + self.u y2 = 15 * self.u self.c.create_rectangle(x1,y1,x2,y2,fill=couleur, activefill="yellow")     # départ du programme principal : if __name__ == '__main__': app = Application()

---

Ce que je voudrais faire pour rendre mon graphe propre, lisible et en même temps pourvoyeur d'information : je voudrais que quand la souris survole une barre du graphe, on voit apparaître le chiffre de la hauteur au-dessus de la barre.

Est-ce possible de faire cela ?

Je suppose qu'il faudra, d'une façon ou d'une autre, mettre un event-listener sur la référence d'un rectangle dessiné ?

Si la réponse est oui, comment faire exactement ?

J'ai un peu modifié mon code ci-dessus, car il faut déjà penser à garder une référence des rectangles dessinés, je suppose...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

# -*- coding:utf-8 -*- from Tkinter import *   class Application: def __init__(self): self.root=Tk() self.root.title('Graphes')   self.root.geometry("800x600")   self.barreEtat = Label(self.root, text="", bd=1, relief=SUNKEN, anchor=W) self.barreEtat.pack(side=BOTTOM, fill=X)   self.c = Canvas(self.root, bg="white") self.c.pack(side=TOP, fill=BOTH, expand=YES)   self.u = 20   self.c.create_line( 2 * self.u, 15 * self.u, 2 * self.u, 2 * self.u, arrow=LAST) self.c.create_line( 2 * self.u, 15 * self.u, 24 * self.u, 15 * self.u, arrow=LAST)   self.lesbarres = []   self.lesbarres.append( self.creerUneBarre( 1, 10, "tan") ) self.lesbarres.append( self.creerUneBarre( 2, 9, "tan") ) self.lesbarres.append( self.creerUneBarre( 3, 8, "tan") ) self.lesbarres.append( self.creerUneBarre( 4, 7, "tan") ) self.lesbarres.append( self.creerUneBarre( 5, 6, "tan") ) self.lesbarres.append( self.creerUneBarre( 6, 5, "tan") ) self.lesbarres.append( self.creerUneBarre( 7, -2, "tan") ) self.lesbarres.append( self.creerUneBarre( 8, 4, "tan") )   self.root.mainloop()   def creerUneBarre(self, position, hauteur, couleur): x1 = 2 * self.u + position * self.u + position * self.u y1 = 15 * self.u - hauteur * self.u x2 = x1 + self.u y2 = 15 * self.u return self.c.create_rectangle(x1,y1,x2,y2,fill=couleur, activefill="yellow")     # départ du programme principal : if __name__ == '__main__': app = Application()

---

Hello,

je débute en python et ton sujet m'intéresse.
donc j'ai fini par trouver ceci sur le net, et j'espère que ça peut t'être utile :
- détecter un mouvement de souris dans le canevas avec : c.bind("<Motion>", taCommande)
- dans taCommande(), utiliser la position de la souris connue par event.x et event.y
- trouver les objets près de la position de la souris : objets = c.find_closest(x, y , halo) #ou halo défini la précision pour la proximité, les objets à proximité sont référencés dans la liste "objets"

après j'imagine que si on a attribué un texte à chaque rectangle dans une variable str, on peut afficher ensuite un autre objet infobule (un texte pour commencer)

en espérant t'avoir aidé, en tout cas ça m'a bien fait trippé :D

http://pwet.fr/man/linux/fonctions_b...ques/tk/canvas
http://www.lri.fr/~mbl/ENS/IHM/dess-...LTK/CANVTUT.ps
http://python.developpez.com/cours/

ça demande à être fignolé, mais c'est un bon début :

EDIT : manque juste à placer le texte : je n'y arrive pas avec 'itemconfigure, peut être que seul 'move' peut le faire mais cela necessite de calculer les distance x/y du mouvement..

EDIT2 : VICTOIRE !!
seul petit bug, l'abcisse et l'ordonnées sont aussi concernées par l'affichage.
en les tagant, on doit pouvoir les exclure facilement de la procédure

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

# -*- coding:utf-8 -*- from Tkinter import *   class Application: def __init__(self): self.root=Tk() self.root.title('Graphes')   self.root.geometry("800x600")   self.barreEtat = Label(self.root, text="", bd=1, relief=SUNKEN, anchor=W) self.barreEtat.pack(side=BOTTOM, fill=X)   self.c = Canvas(self.root, bg="white") self.c.pack(side=TOP, fill=BOTH, expand=YES)   self.u = 20 self.uSur2 = int(self.u / 2)   self.c.create_line( 2 * self.u, 15 * self.u, 2 * self.u, 2 * self.u, arrow=LAST) self.c.create_line( 2 * self.u, 15 * self.u, 24 * self.u, 15 * self.u, arrow=LAST)   self.lesbarres = []   self.lesbarres.append( self.creerUneBarre( 1, 10, "tan") ) self.lesbarres.append( self.creerUneBarre( 2, 9, "tan") ) self.lesbarres.append( self.creerUneBarre( 3, 8, "tan") ) self.lesbarres.append( self.creerUneBarre( 4, 7, "tan") ) self.lesbarres.append( self.creerUneBarre( 5, 6, "tan") ) self.lesbarres.append( self.creerUneBarre( 6, 5, "tan") ) self.lesbarres.append( self.creerUneBarre( 7, -2, "tan") ) self.lesbarres.append( self.creerUneBarre( 8, 4, "tan") )   self.infoX, self.infoY = 0,0 self.c.create_text(self.infoX,self.infoY, text='', tag="info") self.c.bind("<Motion>", self.afficherTaille) # si souris bouge, on lance l'affichage de la taille   self.root.mainloop()   def creerUneBarre(self, position, hauteur, couleur): x1 = 2 * self.u + position * self.u + position * self.u y1 = 15 * self.u - hauteur * self.u x2 = x1 + self.u y2 = 15 * self.u return self.c.create_rectangle(x1,y1,x2,y2,fill=couleur, activefill="yellow")   def afficherTaille(self,event): objets = self.c.find_closest(event.x,event.y,10) # trouve l'objet (les objets ?) le plus proche if len(objets) > 0: coordonnees = self.c.coords(objets[0]) # prends le 1er h = coordonnees[3]-coordonnees[1] # hauteur de la barre dx , dy = coordonnees[0]-self.infoX+self.uSur2, coordonnees[1]-self.infoY-self.uSur2 # calcul du déplacement à faire self.infoX += dx # actualisation des nouvelles coordonnées self.infoY += dy self.c.itemconfigure("info", text=str(int(h)) ) #changement du contenu (hauteur) self.c.move('info',dx,dy) #déplacement #print (event.x,event.y,repr(objets[0]), self.c.coords(objets[0]), h)     # départ du programme principal : if __name__ == '__main__': app = Application()

---

Génial, merci beaucoup Spirzouf ! Ca semble fonctionner pas mal du tout...

C'est donc une excellente piste, tout à fait...

Je vais étudier ton exemple à fond ce soir ou demain...
:mouarf::D

une autre façon de faire, vu qu'on connait le numéro d'item des barres, aurait été de calculer la position de la barre en fonction de son numéro d'ordre, plutôt que d'utiliser le find.closest

en effet si pour le debug, on fait un print(self.lesbarres), on obtient
[3, 4, 5, 6, 7, 8, 9, 10]
après, c'est facile de connaitre la position pour afficher la hauteur

Citation:

---

Envoyé par calogerogigante

Génial, merci beaucoup Spirzouf ! Ca semble fonctionner pas mal du tout...

C'est donc une excellente piste, tout à fait...

Je vais étudier ton exemple à fond ce soir ou demain...
:mouarf::D

---

de rien,

ça m'a beaucoup intéressé, car je n'avais pas encore testé les canvas et que modifier comme cela textes et positions me donnent pas mal d'idées pour faire de zolis interfaces graphiques plutôt que les frames, button, entry et autres trucs tous moches de tkinter :P

sinon, pour ton programme, la solution de surveiller event.x et d'afficher si cela correspond à une barre identifié par son numéro d'ordre dans la liste que tu as crées est surement plus léger.

a+

Bonsoir,

Bon début spirzouf mais pourquoi ne pas utiliser les tag.

Pour calogerogigante :

Pour ton second code fais un print de ton self.lesbarres, pas terrible le résultat...

Une idée (en fait c'est d'un de mes premiers codes (le premier en fait, un gestionnaire de fichier avec canvas et images) ou j'avais des infobulles sur/sous des icônes dans un canvas si le nom du fichier/dossier dépassait la zone texte.)

Dans :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

class Application: def __init__(self): ... self.c.InfoBulleCanvas = self.c.create_text(0, 0, text = '') self.c.bind('<Motion>', self.onFocusIn) self.c.bind('<FocusOut>', self.onFocusOff) ... def onFocusOff(self, event): self.c.config(InfoBulleCanvas, text='') # Inutile ? self.c.coords(self.c.InfoBulleCanvas, 0, 0)   def onFocusIn(self, event = None): # A faire avec self.c.gettags self.c.find_withtag(CURRENT) pour un self.c.coords de self.c.InfoBulleCanvas   def creerUneBarre(self, position, hauteur, couleur): x1 = 2 * self.u + position * self.u + position * self.u y1 = 15 * self.u - hauteur * self.u x2 = x1 + self.u y2 = 15 * self.u self.c.create_rectangle(x1,y1,x2,y2,fill=couleur, activefill="yellow", tag=position)

---

@+

Mince, j'arrive a la bourre.

Bien le def afficherTaille.

Citation:

---

Envoyé par PauseKawa

Mince, j'arrive a la bourre.

Bien le def afficherTaille.

---

Merci ;)

sinon, est ce que 'move' était la solution ou bien peut on changer les coordonnées d'un widget avec 'itemconfigure' ?

@ PauseKawa : peux tu voir mon message au dessus STP

@ calogerogigante : j'ai résolu le bug des axes
puisqu'ils ont une épaisseurs de 0 contrairement aux rectangles, def afficheTaille devient :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

def afficherTaille(self,event): objets = self.c.find_closest(event.x,event.y,10) # trouve l'objet (les objets ?) le plus proche # une autre façon de faire, vu qu'on connait le numéro d'item des barres, # aurait été de calculer la position de la barre en fonction de son numéro d'ordre, plutôt que d'utiliser le find.closest # en effet si pour le debug, on fait un print(self.lesbarres), on obtient # [3, 4, 5, 6, 7, 8, 9, 10] # après, c'est facile de connaitre la position pour afficher la hauteur if len(objets) > 0: coordonnees = self.c.coords(objets[0]) # prends les coordonnées du 1er objet if len(coordonnees) > 2 : if coordonnees[0]!=coordonnees[2] and coordonnees[1]!=coordonnees[3]: # si True, c'est un rectangle h = coordonnees[3]-coordonnees[1] # hauteur de la barre dx , dy = coordonnees[0]-self.infoX+self.uSur2, coordonnees[1]-self.infoY-self.uSur2 # calcul du déplacement à faire self.infoX += dx # actualisation des nouvelles coordonnées self.infoY += dy self.c.itemconfigure("info", text=str(int(h)) ) # changement du contenu (hauteur) self.c.move('info',dx,dy) # déplacement

---

Bonjour,

Avec tag_bind

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

# -*- coding:utf-8 -*- from Tkinter import *   class Application: def __init__(self): self.root=Tk() self.root.title('Graphes')   self.root.geometry("800x600")   self.barreEtat = Label(self.root, text="", bd=1, relief=SUNKEN, anchor=W) self.barreEtat.pack(side=BOTTOM, fill=X)   self.c = Canvas(self.root, bg="white") self.c.pack(side=TOP, fill=BOTH, expand=YES)   self.u = 20 self.uSur2 = int(self.u / 2)   self.c.create_line(2 * self.u, 15 * self.u, 2 * self.u, 2 * self.u, arrow=LAST) self.c.create_line(2 * self.u, 15 * self.u, 24 * self.u, 15 * self.u, arrow=LAST)   self.lesbarres = [[10, "tan"],[9, "tan"],[8, "tan"],[7, "tan"],[6, "tan"],[5, "tan"],[-2, "tan"],[4, "tan"]] ind = 1 for unebarre in self.lesbarres: self.creerUneBarre(ind, unebarre[0], unebarre[1]) ind += 1   self.infoX, self.infoY = 0,0 self.c.create_text(self.infoX, self.infoY, text='', tag='info')   self.root.mainloop()   def onFocusOff(self, event): self.infoX, self.infoY = 0,0 self.c.itemconfigure('info', text='') self.c.coords('info', 0, 0)   def creerUneBarre(self, position, hauteur, couleur): x1 = 2 * self.u + position * self.u + position * self.u y1 = 15 * self.u - hauteur * self.u x2 = x1 + self.u y2 = 15 * self.u # Les tags 1 et 2 sont utiliser par les create_line self.c.create_rectangle(x1, y1, x2, y2, fill=couleur, activefill="yellow", tag="b"+str(position)) self.c.tag_bind("b"+str(position), "<Enter>", self.onFocusIn) self.c.tag_bind ("b"+str(position), "<Leave>", self.onFocusOff)   def onFocusIn(self, event): coordonnees = self.c.coords(self.c.find_withtag(CURRENT)) if int(coordonnees[3]) <= (15 * self.u): self.c.itemconfigure('info', text=str(int(coordonnees[3]-coordonnees[1]))) dx , dy = coordonnees[0]-self.infoX+self.uSur2, coordonnees[1]-self.infoY-self.uSur2 self.infoX += dx self.infoY += dy else: self.c.itemconfigure('info', text='-'+str(int(coordonnees[3]-coordonnees[1]))) print coordonnees dx , dy = coordonnees[0]+self.infoX+self.uSur2, coordonnees[3]+self.infoY+self.uSur2 self.infoX -= dx self.infoY -= dy self.c.move('info', dx, dy)   if __name__ == '__main__': app = Application()

---

@spirzouf : oui, move

@+