Tracer des points sur un Canvas avec Python
Ce document explore la création de tracés graphiques sur un Canvas en utilisant Python, en se concentrant sur les aspects techniques et les différentes primitives disponibles. Bien que certains concepts puissent sembler familiers aux développeurs utilisant QML ou des APIs Web, l'objectif ici est de détailler l'implémentation en Python, particulièrement avec Tkinter.
Introduction au Canvas et aux tracés
Lorsque vous débutez avec un exemple de code, il est important de noter qu'aucun tracé ne sera produit par défaut. Pour visualiser des formes, il est nécessaire d'interagir avec l'événement onPaint du Canvas. La configuration du contexte de tracé permet de définir divers attributs tels que la couleur de remplissage (pour les formes complexes) et la couleur de détourage.
Voici un exemple de configuration du contexte de tracé :
# Exemple de configuration du contexte de tracé (code hypothétique)context.fillStyle = 'blue'context.strokeStyle = 'red'context.lineWidth = 2
Les chemins (Paths) pour les tracés
Pour réaliser un premier tracé simple, comme un polygone fermé, nous allons utiliser la notion de path (chemin). Pour initier un chemin, il faut invoquer la méthode beginPath() sur le contexte. Pour finaliser le chemin, on utilise la méthode endPath().
Il est également possible de configurer le contexte de tracé pour utiliser des dégradés de couleur. Par exemple, un dégradé allant du haut (100, 50) vers le bas (100, 150) peut être implémenté.
Primitives de tracé disponibles
Un Canvas propose de très nombreuses primitives de tracé. Voici un exemple un peu plus riche que le précédent, illustrant l'utilisation de plusieurs primitives.
Cette activité permet également de réutiliser les connaissances acquises sur la création et l'utilisation des fonctions.
Configuration et positionnement du Canvas
Pour commencer, utilisez le code suivant afin de créer un Canvas de 500x500 pixels dans une fenêtre de 600x600 pixels.
# Exemple de création d'un Canvas (Tkinter)from tkinter import Tk, Canvasfenetre = Tk()canvas = Canvas(fenetre, width=500, height=500, bg='white')canvas.pack() # ou canvas.place()fenetre.mainloop()
Initialement, comme vous pouvez le constater, le Canvas n'est pas parfaitement centré. Pour obtenir un meilleur alignement, il est conseillé de modifier la méthode pack() par place().
Il est important de noter qu'un Canvas possède par défaut une marge extérieure de 2 pixels. Tenter de dessiner dans cette bordure externe peut entraîner des comportements inattendus. Pour pallier cela, il faut soit gérer ce décalage d'origine dans vos programmes, soit supprimer cette marge lors de la création du Canvas.
Tracer des lignes et gérer les rotations
Voici un programme qui affiche un Canvas et y crée une droite en utilisant une fonction rotation_ligne. La documentation de cette fonction est généralement incluse dans le code source lui-même.
Pour utiliser efficacement cette fonction, il est nécessaire de consulter sa déclaration afin de trouver le paramètre qui gère l'angle de traçage de la droite. Ensuite, vous pourrez utiliser le programme pour tracer des traits à différents angles, tels que -45°, 0° et +45°.
La puissance des fonctions réside dans le fait qu'il n'est pas nécessaire de comprendre leur fonctionnement interne pour les utiliser. Cependant, réaliser des rotations avec Tkinter peut s'avérer plus complexe, nécessitant l'utilisation du module math pour effectuer des projections.
# Exemple d'utilisation de math pour les rotationsimport mathdef rotation_ligne(canvas, x1, y1, x2, y2, angle_deg): angle_rad = math.radians(angle_deg) # Logique de projection et de dessin de la ligne tournée pass
Il est essentiel de savoir lire un programme : commencez par le programme principal, puis explorez le contenu des fonctions lorsqu'elles sont rencontrées.
Utilisation des fonctions et des éléments aléatoires
Lancez le programme, analysez-le pour bien comprendre l'imbrication des fonctions et l'utilisation des éléments aléatoires. Par la suite, modifiez quelques valeurs pour observer leur influence visuelle.
Exercice Python : Créer 2 rubans aléatoires
Dessiner des rectangles
Pour dessiner des rectangles, vous devrez fournir les coordonnées du coin supérieur gauche (x0, y0) et du coin inférieur droit (x1, y1). Ces coordonnées sont obligatoires.
Des paramètres optionnels permettent de personnaliser le rectangle :
- fill : Couleur de remplissage.
- outline : Couleur de contour.
- width : Largeur du contour.
Il est crucial de prêter attention à la coordonnée finale (x1, y1), car elle correspond au pixel juste extérieur à la boîte. Par exemple, donner les coordonnées (0,0,10,5) créera un rectangle dont les pixels vont de 0 à 9 en largeur et de 0 à 4 en hauteur. Ce comportement peut être lié à la gestion de la bordure.
Ces paramètres permettent de dessiner des traits et des rectangles.
Gestion de la bordure des rectangles
Utilisez le programme pour ajouter des carrés aux extrémités des droites. Ensuite, introduisez du hasard dans le choix des couleurs des carrés en utilisant la méthode choice du module random.
import randomcouleurs = ['red', 'blue', 'green', 'yellow', 'purple']couleur_carre = random.choice(couleurs)# Utiliser couleur_carre pour définir la couleur du carré
Il peut être peu pratique de spécifier directement les coordonnées. Une fonction peut être créée pour accepter la coordonnée du point haut-gauche, la largeur et la hauteur du rectangle.
Avec la méthode create_rectangle, il est possible de se demander si la bordure est interne ou externe. L'observation attentive révèle que les bordures sont à la fois internes et externes.
Le programme peut devenir moins pratique car la taille du rectangle dépend de la taille de la bordure. Une nouvelle fonction, rectangle_automatique, peut gérer la taille du rectangle en intégrant la taille de la bordure, mais cela peut nécessiter de se limiter aux cas où la bordure est de taille paire.
Dessiner des plateaux de jeu
Pour visualiser la structure du Canvas, un zoom en largeur avec des ensembles de 10 pixels représentés en jaune peut être utile.
Pour construire un plateau de jeu de 10 cases sur 10, il est possible de l'afficher en quelques lignes de code. Cela implique l'utilisation de deux boucles FOR imbriquées pour gérer les coordonnées x et y, en incrémentant de 46 pixels à chaque itération.
Dessiner des ellipses
Pour décrire une ellipse avec Tkinter, il faut identifier le rectangle qui la contient. De nombreux arguments permettent de personnaliser les ellipses, à l'instar des lignes et des rectangles.
Voici un programme qui trace un cercle centré en (250, 250) avec un rayon de 150 pixels. On observe que les points extrêmes des droites correspondantes ont les coordonnées des points désirés, ce qui montre une réutilisation partielle du code.
# Exemple de tracé d'un cercle (ellipse)canvas.create_oval(100, 100, 400, 400, outline='red', width=2)
La méthode append est utilisée sur des listes pour éviter de créer trop de variables intermédiaires.
Créer des polygones et des arcs
Pour créer n'importe quel polygone, il faut trouver les coordonnées manuellement. Un programme peut être fourni pour tracer un cercle, en utilisant les points extrêmes des droites correspondantes.
Remarque : l'ajout du paramètre smooth=1 lors de l'appel à create_polygon permet d'adoucir les formes.
Pour créer un Pac-Man crédible, on peut s'aider d'exemples avec le rectangle-conteneur tracé en gris clair.
Par défaut, il peut sembler que l'on ne crée que des arcs de cercle ou d'ellipse partant de l'axe horizontal avec un angle de +90°. L'angle de rotation par défaut est de 0° (start=0).
Des tests peuvent être effectués pour comprendre le principe de ce paramètre. Il est possible d'aller plus loin en définissant l'angle de l'arc de cercle avec le paramètre extent. Par défaut, extent=90, ce qui crée un quart de cercle.
Là encore, des tests sont nécessaires pour bien appréhender le fonctionnement de ce paramètre.
Conclusion partielle
Vous disposez désormais des connaissances nécessaires pour créer une interface graphique, ajouter des boutons, gérer les tests, définir des fonctions et afficher du dessin vectoriel dans un Canvas. La prochaine étape consistera à apprendre à créer du mouvement pour réaliser votre premier jeu.
tags: #tracer #des #points #sur #canvas #python