Mettre un event sur un objet dessiné dans un Canvas

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

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, 12h29

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, 17h23

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, 19h04

ç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, 20h36

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, 20h39

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

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

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+

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

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, 21h08

Mince, j'arrive a la bourre.

Bien le def afficherTaille.

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

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' ?

**spirzouf** · 27/01/2010, 22h06

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

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

**PauseKawa** · 30/01/2010, 09h05

Bonjour,

Avec tag_bind

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

@+

Mettre un event sur un objet dessiné dans un Canvas

Tkinter Python

Discussions similaires

Partager

Partager