Créer un arc circulaire divisé en parts sur un Canvas Tkinter

L'objectif de cet article est de guider l'utilisateur dans la création d'un cercle divisé en plusieurs sections, semblables à des parts de camembert, en utilisant le module Tkinter et spécifiquement le widget Canvas. Nous nous concentrerons sur l'utilisation de la fonction create_arc pour réaliser cette tâche.

Comprendre le widget Canvas et la fonction create_arc

Le widget Canvas de Tkinter est une surface de dessin polyvalente qui permet de créer diverses formes géométriques, des lignes, des images et du texte. Il est particulièrement utile pour les graphiques et les interfaces utilisateur interactives.

La fonction canvas.create_arc est l'outil principal que nous utiliserons pour dessiner des arcs de cercle ou d'ellipse. Pour obtenir un cercle complet divisé en plusieurs parts, il est nécessaire de comprendre et d'ajuster plusieurs de ses paramètres clés :

  • start : Définit l'angle de départ de l'arc, mesuré en degrés à partir de l'axe horizontal dans le sens trigonométrique. Par défaut, il est de 0 degré.
  • extent : Définit l'angle de l'arc, également en degrés. Par défaut, il est de 90 degrés, créant ainsi un quart de cercle.
  • style : Ce paramètre peut influencer la manière dont l'arc est dessiné. Les options courantes incluent 'arc' (par défaut) et 'pieslice' (pour créer des parts de camembert).
Schéma expliquant les paramètres 'start' et 'extent' de create_arc

Mise en place de la fenêtre et du Canvas

Avant de dessiner, il est essentiel de configurer la fenêtre principale et la zone de dessin (Canvas).

Création de la fenêtre et du Canvas

Pour commencer, nous allons créer une fenêtre Tkinter et y intégrer un widget Canvas. Voici un exemple de code pour initialiser un Canvas de 500x500 pixels dans une fenêtre de 600x600 pixels :

import tkinter as tkfen = tk.Tk()fen.geometry("600x600")can = tk.Canvas(fen, width=500, height=500, bg="ivory")can.pack() # Ou can.place(x=50, y=50) pour le centrerfen.mainloop()

Gestion du positionnement et des marges

Il est important de noter que le widget Canvas peut avoir une marge par défaut de 2 pixels vers l'extérieur. Cela peut affecter le positionnement exact des éléments dessinés. Pour éviter cela, il faut soit prendre en compte ce décalage dans le calcul des coordonnées, soit supprimer cette marge lors de la création du Canvas si le comportement par défaut n'est pas souhaité.

Dans l'exemple ci-dessus, l'utilisation de can.pack() positionne le Canvas par défaut. Pour un centrage plus précis, la méthode can.place(x=50, y=50) peut être utilisée, ajustant les coordonnées selon la taille de la fenêtre et du Canvas.

Dessiner des formes géométriques de base

Le Canvas permet de dessiner diverses formes, ce qui est fondamental pour construire notre cercle divisé.

Dessin de lignes et de rectangles

La fonction create_line permet de tracer des segments de droite, tandis que create_rectangle dessine des rectangles. Les coordonnées sont spécifiées par les coins supérieur gauche (x0, y0) et inférieur droit (x1, y1).

  • Coordonnées : (x0, y0) pour le coin supérieur gauche, (x1, y1) pour le coin inférieur droit.
  • Options : fill (couleur de remplissage), outline (couleur du contour), width (épaisseur du contour).

Il est à noter que les coordonnées finales (x1, y1) définissent le pixel juste extérieur à la boîte. Par exemple, pour un rectangle allant de (0,0) à (10,5), la zone dessinée s'étend jusqu'au pixel (9,4).

Exemple de dessin de lignes et de rectangles sur un Canvas

Création d'ellipses et de cercles

Pour dessiner une ellipse ou un cercle, il faut définir le rectangle qui la contient. La fonction create_oval est utilisée à cet effet, en spécifiant les coordonnées du rectangle englobant.

Un cercle est simplement une ellipse où le rectangle englobant est un carré. Pour un cercle centré en (xC, yC) avec un rayon R, le rectangle englobant aura pour coins supérieur gauche (xC-R, yC-R) et inférieur droit (xC+R, yC+R).

L'option width contrôle l'épaisseur de la bordure du cercle. Si width est mis à 0, le cercle n'a plus de bord visible.

# Exemple pour tracer un cerclecentre_x, centre_y = 250, 250rayon = 150can.create_oval(centre_x - rayon, centre_y - rayon, centre_x + rayon, centre_y + rayon, outline="black", width=2)

Construction du cercle divisé en 9 parts

Maintenant que nous maîtrisons les bases, nous pouvons nous attaquer à la création du cercle divisé.

Utilisation de create_arc pour les parts

L'objectif est de créer 9 parts égales qui formeront un cercle complet. Un cercle complet représente 360 degrés. Pour 9 parts égales, chaque part aura un angle de 360 / 9 = 40 degrés.

Nous allons utiliser la fonction create_arc avec le style 'pieslice' pour obtenir des parts de camembert. Les paramètres start et extent seront ajustés pour chaque part.

Pour un cercle de 400x400, centré sur un Canvas de 400x400, le rectangle englobant sera de (0,0) à (400,400). Nous allons itérer 9 fois pour créer chaque part.

import tkinter as tkLARGEUR_CANEVAS = 400HAUTEUR_CANEVAS = 400NB_PARTS = 9ANGLE_PART = 360 / NB_PARTSfen = tk.Tk()can = tk.Canvas(fen, width=LARGEUR_CANEVAS, height=HAUTEUR_CANEVAS, bg="white")can.pack()# Coordonnées du rectangle englobant pour le cerclex0, y0 = 0, 0x1, y1 = LARGEUR_CANEVAS, HAUTEUR_CANEVASfor i in range(NB_PARTS): start_angle = i * ANGLE_PART # Utilisation de 'pieslice' pour créer des parts de camembert can.create_arc(x0, y0, x1, y1, start=start_angle, extent=ANGLE_PART, style=tk.PIESLICE, outline="black", fill="lightblue")fen.mainloop()
Illustration d'un cercle divisé en 9 parts égales

Ajustements des angles et des styles

Dans le code ci-dessus, nous avons utilisé tk.PIESLICE pour le style, ce qui est crucial pour obtenir la forme de part de camembert. L'angle de départ de chaque part est calculé en multipliant l'indice de la part par l'angle de chaque part. L'angle d'extension est défini comme l'angle calculé pour une seule part.

Il est possible d'expérimenter avec différents angles de départ et d'extension, ainsi qu'avec d'autres styles, pour observer leur influence sur le rendu graphique.

Fonctions et réutilisation du code

L'utilisation de fonctions est une pratique recommandée pour organiser le code et le rendre plus réutilisable.

Définir des fonctions pour le dessin

Il est possible de créer des fonctions pour encapsuler des opérations de dessin complexes, comme le tracé de lignes avec rotation ou la création de rectangles de taille automatique.

Par exemple, une fonction rotation_ligne pourrait être définie pour tracer une ligne avec un angle spécifié. De même, des fonctions comme rectangle_automatique peuvent simplifier la création de rectangles en gérant la taille et la bordure.

L'importance de comprendre le code

Il est essentiel de savoir lire et comprendre le code, même si l'on utilise des fonctions dont le fonctionnement interne n'est pas entièrement maîtrisé. Cela permet de mieux appréhender l'imbrication des appels de fonctions et l'utilisation des différents éléments graphiques.

Gestion des éléments graphiques sur le Canvas

Le Canvas offre des fonctionnalités avancées pour manipuler les objets dessinés.

IDs d'objets et manipulation

Chaque objet créé sur un Canvas (rectangle, arc, image, etc.) reçoit un identifiant unique (ID). Cet ID est un entier strictement positif et permet de référencer et de manipuler l'objet par la suite.

  • create_... : Ces méthodes retournent l'ID de l'objet créé.
  • delete(id) : Supprime un objet du Canvas en utilisant son ID. delete('all') efface tout le contenu.
  • itemconfigure(id, option=valeur) : Modifie les propriétés d'un objet existant (couleur, épaisseur, etc.).
  • itemraise(id) / itemlower(id) : Change l'ordre d'empilement des objets.
Illustration montrant les IDs des objets et leur ordre d'empilement

Déplacement et visibilité des objets

La méthode move(id, dx, dy) permet de déplacer un objet d'une certaine distance selon les axes x et y. L'option state dans itemconfigure permet de rendre un objet visible ('normal') ou invisible ('hidden').

Détection de collisions

La méthode find_overlapping(x1, y1, x2, y2) retourne une liste des IDs des objets qui se trouvent à l'intérieur d'une zone rectangulaire donnée. Ceci est utile pour implémenter des mécanismes de détection de collisions dans une application.

Exportation et affichage avancé

Il est possible de sauvegarder le contenu du Canvas et d'utiliser des fonctionnalités d'affichage plus complexes.

Sauvegarde en format PostScript

La méthode postscript(file="nom_fichier.eps") permet d'exporter le contenu du Canvas au format Encapsulated PostScript (EPS), qui peut ensuite être converti en d'autres formats d'image comme PNG.

Gestion des images

Tkinter peut afficher des images dans un Canvas en utilisant PhotoImage pour charger l'image et create_image pour l'insérer. Il faut veiller à conserver une référence à l'objet PhotoImage pour éviter qu'il ne soit supprimé par le ramasse-miettes de Python.

Comment afficher une image sur le canevas Tkinter

Conclusion partielle sur les bases de Tkinter Canvas

Vous disposez maintenant des connaissances nécessaires pour créer une interface, gérer des boutons, implémenter des fonctions et afficher du dessin vectoriel dans un Canvas Tkinter. Les prochaines étapes pourraient inclure l'ajout de mouvement pour créer des animations ou des jeux simples.

tags: #create #arc #canvas #tkinter #exemple

Articles populaires: