Dessiner avec un Canvas Tkinter


Dessiner avec un Canvas Tkinter

  1. Objectifs

    • Connaitre les items les plus utiles qu’un canevas peut générer
    • Etre capable d’utiliser les items qu’un canevas peut générer
  2. Introduction

    • Le widget Canvas fournit des fonctionnalités graphiques pour Tkinter. Parmi ces objets graphiques se trouvent des lignes, des cercles, des images et même d’autres widgets.
    • Avec ce widget, il est possible de dessiner des graphiques et des tracés, de créer des éditeurs graphiques et d’implémenter divers types de widgets personnalisés.
    • Le Canvas est un widget permettant de dessiner sur sa zone d’affichage.
    • Dans le jargon Tkinter, les formes géométriques sont appelés des items. A la différences des widgets Tkinter tels qu’un bouton ou un label ou une fenêtre qui sont définis par des classes comme la classe Button, la classe Label, etc et qui contiennent d’autres widgets, les formes géométriques que l’on peut dessiner sur le canvas ne sont ni des widgets ni des instances de classes.
    • Les items listés ci-dessous sont les items les plus utiles qu’un canevas peut générer :
    • Item Tkinter Motif géométrique
      create_line segment de droite, flèche
      create_rectangle rectangle carré
      create_oval cercle ellipse
      create_text texte
      create_image image png, gif
      create_polygon polygone
      create_arc arcs de cercle, d’ellipse



  3. borderwidth et highlightthickness

    • Lorsqu’on définit un canevas, on peut lui fournir deux options highlightthickness et bd qui prennent chacune des pixels :
      • l’option bd est la largeur d’une bande autour du canevas et qui a même couleur de fond ; l’option borderwidth est synonyme de bd ;
      • l’option highlightthickness est la largeur d’une bande autour du canevas (et de son bord) et qui est activé lorsque le canevas a le focus (cad que le canevas est susceptible d’enregistrer des touches au clavier ou des activités de la souris comme cela est utile dans un jeu) ; par défaut, cette bande d’activation du canevas est blanche et de deux pixels de large.
    • Exemple:
      • Il produit la fenêtre suivante :
      • Dessiner avec un Canvas Tkinter

  4. Coordonnées dans un canvas

    • L’élément canvas de html5 est une zone délimitée de pixels manipulables. Pour ce faire, il faut avant toute chose être capable de situer un ou des pixels dans cette zone.
    • Par défaut les coordonnées des pixels dans l’élément canvas ont comme origine le coin supérieur gauche de l’élément, et la direction des axes respecte le sens de lecture naturel: de la gauche vers la droite pour 1ère coordonnée (abscisse) et de haut en bas pour la 2ème coordonnée (ordonnée):
    • la coordonnée (0,0) est en haut à gauche. Les x vont de gauche à droite, et les y vont de haut en bas.
    • Dessiner avec un Canvas Tkinter

  5. Quelques items à tracer dans un canevas

    1. Segment (create_line )
      1. Présentation:
        • Dans Tkinter, la méthode Canvas.create_line() est utilisée pour créer des lignes dans n’importe quel canevas.
        • Ces lignes ne peuvent être vues que sur le canevas, vous devez donc d’abord créer un objet Canvas et ensuite le placer dans la fenêtre principale.
        • Un minimum de 4 points est requis pour créer une ligne, mais vous pouvez également ajouter plusieurs points pour créer différents dessins.
      2. Syntaxe:
        • Canvas.create_line(x0, y0, x1, y1, width=…, fill='…')
      3. Paramètres:
        • (x0; y0 ) et (x1; y1) sont les coordonnées des points extrémités.
        • width est un attribut optionnel d’épaisseur du trait, en pixels.
        • fill est un attribut optionnel donnant la couleur du tracé.
      4. Exemple:
        • Cela permet de tracer une ligne sur notre canvas (can) du point (x1,y1) au point (x2,y2) avec une couleur rouge et un largeur de ligne de 5
      5. Application:
        1. Énoncé
          • Utiliser le module Tkinter de python pour reproduire le schéma suivant:
          • Dessiner avec un Canvas Tkinter

        2. Solution
    2. Rectangle(create_rectangle)
      1. Syntaxe:
        • Canvas.create_rectangle(x0, y0, x1, y1)
      2. Paramètres:
        • (x0; y0 ) et (x1-1; y1-1) sont les coordonnées des sommets haut gauche et bas-droite opposés du rectangle.
        • il n’est pas nécessaire que x0y0 ou que x1y1 ; en fait Tkinter construit un rectangle de diagonales les points de coordonnées (x0, y0) et (x1, y1) ce qui bien sûr, permet de tracer le rectangle.
        • Dessiner avec un Canvas Tkinter

        • width est un attribut optionnel d’épaisseur du contour, en pixels.
        • outline est un attribut optionnel donnant la couleur du contour.
        • fill est un attribut optionnel donnant la couleur du contenu.
    3. Ovale( create_oval)
      1. Présentation:
        • Contrairement à ce qu’on s’attendrait, un cercle n’est pas construit en donnant son centre et son rayon. En fait, le cercle est produit comme si on suivait les trois étapes ci-dessous :
        • On donne à Tkinter deux points A et B qui sont deux sommets opposés du carré ayant leurs côtés parallèles aux axes et circonscrit au cercle que l’on veut dessiner.
        • Dessiner avec un Canvas Tkinter

      2. Syntaxe:
        • .create_oval(x0, y0, x1, y1)
      3. Paramètres:
        • (x0; y0 ) et (x1-1; y1-1) sont les coordonnées des sommets opposés du rectangle dans lequel est tracé l’ellipse.
        • width est un attribut optionnel d’épaisseur du contour, en pixels.
        • outline est un attribut optionnel donnant la couleur du contour.
        • fill est un attribut optionnel donnant la couleur du contenu.
      4. Application:
        1. Énoncé
          • Créer un programme python qui dessinera les cinq anneaux olympiques dans un rectangle de fond "ivory".
          • Utiliser l’argument outline pour la couleur des anneaux.
          • Un bouton "quitter" doit permettre de fermer la fenêtre.
        2. Solution
      5. Texte(create_text)
        1. Description:
          • De la même façon que l’on peut créer des figures géométriques sur un canevas (rectangles, etc), on peut créer des items de texte :
        2. Syntaxe:
          • .create_text(x0, y0, text = 'contenu')
        3. Paramètres:
          • (x0; y0 ) sont les coordonnées de l’ancre du texte
          • font est un attribut optionnel donnant la police suivie de la taille.
          • fill est un attribut optionnel donnant la couleur du texte.
        4. Exemple:
          • Production
          • Dessiner avec un Canvas Tkinter

      6. Image(create_image)
        1. Syntaxe:
          • Chargement: im = PhotoImage(file = 'mon_image.gif', master=parent)
          • Méthode .create_image(x0, y0, image = im)
        2. Paramètres:
          • (x0; y0 ) sont les coordonnées de l’ancre de l’image.
          • Le fichier image est atteint avec un lien relatif.
      7. Polygone(create_polygon)
        1. Description:
          • Un polygône est tracé par la méthode create_polygon à qui on donne les coordonnées des sommets :
          • Un polygone comprend deux parties: son contour et son intérieur. Sa géométrie est spécifiée comme une série de sommets [(x0, y0), (x1, y1),… (xn, yn)], mais le périmètre réel comprend un autre segment de (xn, yn) à (x0, y0 ). Dans cet exemple, il y a cinq sommets:
          • Par défaut, les polygones sont remplis en noir et sans bordure, fill=”black” et outline=”, cf. code ci-dessous pour une alternative.
        2. Syntaxe:
          • .create_polygon(x0, y0, x1, y1, ..., option, ...)
        3. Exemple:
          • Ce qui produit
          • Dessiner avec un Canvas Tkinter

      8. arc(create_arc)
        1. Description:
          • Un objet arc sur une toile, dans sa forme la plus générale, est une tranche en forme de coin extraite d’une ellipse. Cela inclut des ellipses et des cercles entiers comme cas particuliers.
        2. Syntaxe:
          • .create_arc( x0, y0, x1, y1, option, ...)
        3. Paramètres:
          • Le point ( x0, y0) est le coin supérieur gauche et ( x1, y1) le coin inférieur droit d’un rectangle dans lequel l’ellipse s’insère. Si ce rectangle est carré, vous obtenez un cercle.
        4. Exemple:
          • Ce qui donne
          • Dessiner avec un Canvas Tkinter

    4. Applications

      1. App01
        1. Énoncé
          • Créer un nouveau élément de type ovale (cercle ou ellipse) dans une zone de dessin, ou toile (Canvas)
        2. Solution




      Sommaire du cours Python



Riadh HAJJI

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement