Mettre un event sur un objet dessiné dans un Canvas

**calogerogigante** · 27/01/2010, 13h04

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**calogerogigante** · 27/01/2010, 13h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**spirzouf** · 27/01/2010, 18h23

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é

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/

**spirzouf** · 27/01/2010, 20h04

ç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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**calogerogigante** · 27/01/2010, 21h36

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...

**spirzouf** · 27/01/2010, 21h46

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...

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

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+

**spirzouf** · 27/01/2010, 21h39

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

**PauseKawa** · 27/01/2010, 21h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

@+

**PauseKawa** · 27/01/2010, 22h08

Mince, j'arrive a la bourre.

Bien le def afficherTaille.

Mettre un event sur un objet dessiné dans un Canvas

Tkinter Python

Vue hybride

Discussions similaires

Partager

Partager