Dessin de graphes en TkInter

---

Introduction au dessin en Tkinter

Tkinter est un module d'interface graphique pour Python. On crée une fénêtre principale en écrivant simplement :

import tkinter 

root= tkinter.Tk() 
root.title ("my demo")
root.mainloop()

On peut ensuite insérer une surface dessinable (canvas) dans la fenêtre principale :

import tkinter 

root= tkinter.Tk() 
root.title ("my demo")
canvas= tkinter.Canvas(root, width=800, height=800, bg="white")
canvas.pack()
root.mainloop()

On peut ensuite insérer des dessins dans le canvas. Le programme ci-dessous insère cinq dessins: un carré bleu, un disque rose, une ligne brisée en pointillé gris, une courbe de Bézier noire fléchée, un texte centré en police Courier.

import tkinter 

def draw_samples (canvas):
    canvas.create_rectangle ((100, 100), (600, 600),  
                             fill="cyan", outline="blue", width=5)

    canvas.create_oval ((100, 100), (600, 600), 
                        fill="pink", outline="red", width=3)

    canvas.create_line ((100, 100), (500, 200),(600, 600), 
                        fill="gray", width=3, dash=(8,4))

    canvas.create_line ((100, 100), (500, 200), (600, 600), 
                        fill="black", width=5, smooth=True,
                        arrow="last", arrowshape=(30,45,15))
 
    canvas.create_text (600, 100, text= "Hello\nEverybody",
                        fill= "black", font= ("courier", 30, "bold italic"),
                        anchor="center", justify= "center")

root= tkinter.Tk()
root.title ("demo")
canvas=tkinter.Canvas(root, width=800, height=800, bg="white")
canvas.pack()
draw_samples (canvas)
root.mainloop()

On obtient le dessin suivant (hormis la grille, que l'on demande d'écrire) :

Exercices de dessin en Tkinter

• Écrire la fonction draw_grid (canvas, width, height) de telle sorte que la grille montrée ci-dessus soit affichée sur le canvas :

  def draw_grid (canvas, width, height):
      pass
  
  draw_grid (canvas, 800, 800)
  

• On décide de représenter graphiquement le sommet d'un graphe par son étiquette (une chaîne de caractère) entourée d'un rond. Écrire la fonction draw_vertex (canvas, center, radius, label) qui dessine un sommet étiqueté label, et dont le rond de rayon radius est centré au point center :

  def draw_vertex (canvas, center, radius, label):
      pass 
  
  draw_vertex (canvas, (400, 300), 15, "A")
  draw_vertex (canvas, (200, 500), 15, "B")
  draw_vertex (canvas, (500, 500), 15, "C")
  

• On décide de représenter graphiquement un arc de graphe par un segment reliant les centres de ses sommets de départ et d'arrivée, et avec une flèche en son milieu orientée vers le sommet d'arrivée. L'étiquette de l'arc (une chaîne) est aussi affichée à côté de la flèche, à distance 10 dans la direction perpendiculaire au segment de l'arc. Écrire la fonction draw_straight_arc (canvas, start, end, label) qui dessine un arc du point start au point end avec l'étiquette label :

  def draw_straight_arc (canvas, start, end, label):
      pass
  
  draw_straight_arc (canvas, (400, 300), (200, 500), "10")
  draw_straight_arc (canvas, (200, 500), (500, 500), "20")
  draw_straight_arc (canvas, (500, 500), (400, 300), "30")
  

• Écrire la variante draw_curved_arc (canvas, start, end, label) de la fonction précédente qui dessine un arc de forme courbe en utilisant des points de contrôles à distance 30 des points de départ et d'arrivée dans la direction perpediculaire au segment de l'arc.

  def draw_curved_arc (canvas, start, end, label):
      pass
  
  draw_curved_arc (canvas, (400, 300), (200, 500), "10")
  draw_curved_arc (canvas, (200, 500), (500, 500), "20")
  draw_curved_arc (canvas, (500, 500), (400, 300), "30")
  

  On doit obtenir le dessin montré ci-dessous (hormis les pointillés verts rajoutés ici pour indiquer les points de contrôle des arcs courbés.

  

• En déduire draw_arc (canvas, start, end, label, is_curved) qui dessine un arc droit ou courbé selon le Booléen is_curved.

  def draw_arc (canvas, start, end, label, is_curved=False):
    pass
  
  draw_arc (canvas, (400, 300), (200, 500), "10", False)
  draw_arc (canvas, (200, 500), (500, 500), "20", False)
  draw_arc (canvas, (500, 500), (400, 300), "30", False)
  
  draw_arc (canvas, (400, 300), (200, 500), "10", True)
  draw_arc (canvas, (200, 500), (500, 500), "20", True)
  draw_arc (canvas, (500, 500), (400, 300), "30", True)
  

• On choisit de représenter la description d'un graphe par le dictionnaire suivant:

  graph_desc= {
      "vertices": { 
          "A": (400, 300), "B": (200, 500), 
          "C": (500, 500), "D": (400, 100),
          "E": (700, 700), "F": (100, 700)
      },
      "arcs": [ 
          ("A", "B", "10", True), 
          ("B", "C", "20", True), 
          ("C", "A", "30", True), 
          ("A", "C", "40", True),
          ("D", "A", "50", False),
          ("C", "E", "60", False),
          ("F", "B", "70", False),
          ("E", "D", "80", True)
      ]
  }
  

  Écrire la fonction draw_graph (canvas, graph_desc) qui dessine un graphe à partir du dictionnaire de sa description.

  def draw_graph (canvas, graph_desc):
      pass
  
  draw_graph (canvas, graph_desc)
  

  On doit obtenir le résultat suivant :