Comment connecter deux cercles d'état avec une flèche dans tkinter?

Question

J'écris actuellement un éditeur fsm avec tkinter. Mais, je suis resté sur la connexion de deux états. J'ai deux questions:

1) Comment peut-on faire croître la flèche de transition en fonction du mouvement de la souris?

2) Comment puis-je coller le point de départ de la flèche sur un état et le point final de la flèche sur un autre état?

PS. Pensez-vous que la documentation de tkinter est assez bonne?

Answer 1

Voici un exemple qui montre le concept. En un mot, utilisez des étiquettes pour associer des lignes à des boîtes, et ajustez simplement les coordonnées de manière appropriée lorsque l'utilisateur déplace la souris.

Exécutez l'exemple, puis cliquez et faites glisser à partir de la zone beige.

Bien sûr, pour le code de production, vous devez faire une solution plus générale, mais j'espère que cela vous montre combien il est facile de créer une boîte avec des flèches qui s'ajustent lorsque vous déplacez la boîte.

from Tkinter import * 

class CanvasDemo(Frame): 
    def __init__(self, width=200, height=200): 
     Frame.__init__(self, root) 
     self.canvas = Canvas(self) 
     self.canvas.pack(fill="both", expand="1") 
     self.canvas.create_rectangle(50, 25, 150, 75, fill="bisque", tags="r1") 
     self.canvas.create_line(0,0, 50, 25, arrow="last", tags="to_r1") 
     self.canvas.bind("<B1-Motion>", self.move_box) 
     self.canvas.bind("<ButtonPress-1>", self.start_move) 

    def move_box(self, event): 
     deltax = event.x - self.x 
     deltay = event.y - self.y 
     self.canvas.move("r1", deltax, deltay) 
     coords = self.canvas.coords("to_r1") 
     coords[2] += deltax 
     coords[3] += deltay 
     self.canvas.coords("to_r1", *coords) 
     self.x = event.x 
     self.y = event.y 

    def start_move(self, event): 
     self.x = event.x 
     self.y = event.y 

root = Tk() 
canvas = CanvasDemo(root) 
canvas.pack() 
mainloop() 

Answer 2

Tkinter est parfaitement adapté à ce type d'application. Dans le passé, j'ai travaillé sur des outils qui étaient des boîtes connectées avec des flèches qui restaient connectées lorsque vous bougiez les cases (ce que je pense que vous demandez). Ne laissez pas les gens qui ne connaissent pas grand-chose à Tkinter vous séduire - c'est une excellente boîte à outils et la toile est très flexible.

La solution à votre problème est mathématique simple. Vous avez simplement besoin de calculer les coordonnées des bords ou des coins des boîtes pour savoir où ancrer vos flèches. Pour le faire "grandir" comme vous le dites, il suffit de faire une liaison sur les mouvements de la souris et mettre à jour les coordonnées de manière appropriée.

Pour faire croître la ligne tout ce que vous avez à faire est d'ajuster les coordonnées de la ligne chaque fois que la souris se déplace. La chose la plus facile à faire est de faire une utilisation libérale des balises de toile. Avec les étiquettes, vous pouvez savoir quelles flèches se connectent à quelles boîtes de sorte que lorsque vous déplacez la boîte, vous ajustez les coordonnées des flèches qui pointent vers ou à partir de celle-ci.