CANVAS

Méthodes : (Canevas)

Un canevas est une zone rectangulaire destinée à contenir des dessins ou d’autres figures complexes. Vous pouvez y placer des graphiques, du texte, des composants graphiques (widgets) ou des cadres (frames). Veuillez consulter les sections suivantes pour les méthodes qui servent à créer de tels objets sur un canevas:

create_arc()
Une portion d’ellipse.
create_bitmap()
Une image de type bitmap.
create_image()
Une image plus riche.
create_polygon()
Un polygone.
create_oval()
Une ellipse.
create_rectangle()
Un rectangle.
create_line()
Un ou plusieurs segments.
create_text()
Insertion de texte.

Utiliser cette méthode pour dessiner des cercles qui sont des cas particuliers d’ellipses. Pour créer un objet de type Canvas:

Canevas=Canvas(fenetre, option=valeur, ...)
_images/blanc.png
Paramètres Effet
fg
Précise le texte à afficher
bg
Précise la couleur du fond.
height
Précise la hauteur du canevas.
width
Précise la largeur du canevas.
font
Précise la police de caractères ainsi que la mise en forme (gras, italique, taille..).

Exemple

#Le canevas s'appelle can, il est dans la fenetre, la police est verdana de taille 12 et en gras
    #le fond du canevas est bleu.
    can=Canvas(fenetre,width=largeur,height=hauteur,fg='red',bg='blue',font='verdana 12 bold')

pacman dans un Canevas

_images/image119.png _images/image120.png

Les arcs :

Un arc, dans sa forme générale, est une portion d’ellipse. Une ellipse tout entière ou un cercle forment des cas particuliers. Le constructeur retourne l’identifiant numérique du nouvel arc créé. Le point (x0, y0) est le coin supérieur gauche et (x1, y1) le coin inférieur droit du rectangle dans lequel s’inscrit l’ellipse. Si le rectangle est un carré, vous obtenez un arc de cercle. _images/arc.PNG

Création

Pour créer un arc sur un canvas, utiliser :

Canvas.create_arc(x0, y0, x1, y1, extent= , start=...)
#{start= angle en degrés, extent = mesure en degrés de l’arc}

_images/image121.png _images/image122.png

Les ellipses et les cercles :

Création

Pour créer l’ellipse (ou le cercle) qui s’inscrit dans le rectangle (ou le carré) (x0, y0), (x1, y1) où les premières coordonnées sont celles du coin supérieur gauche et les secondes celles du coin inférieur droit, utiliser :

Canvas.create_oval( x0,y0,x1,y1,options...)

_images/image123.png _images/ellipse.PNG

Cercle

Le cercle jaune est inscrit dans le carré de côté 180 pixels avec :(ligne 8) L’ellipse bleue est inscrite dans le rectangle de largeur 240 pixels et de longueur 360 pixels avec : (ligne 9) _images/image124.png
Options Effet
fill
        fill=couleur
        #exemple
        fill=’yellow’
L’intérieur du l’ellipse est transparent si l’option fill n’est pas donnée ou si on a fill= , pour obtenir un remplissage de l’ellipse avec une couleur on utilise :
outline
Précise la couleur de la bordure de l’ellipse (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur.
tag
Chaîne de caractères qui sert à marquer l’ellipse (voir programme fonctionnel).
width
Précise la largeur de la bordure, 1 pixel par défaut.

Les rectangles :

Création

_images/rectangle.PNG Un rectangle est défini par deux points \((x0,y0)\) pour son coin supérieur gauche et \((x1,y1)\) pour son coin inférieur droit.
Options Effet
fill
        fill=couleur
        #exemple
        fill=’yellow’
L’intérieur du rectangle est transparent si l’option fill n’est pas donnée ou si on a fill= , pour obtenir un remplissage de rectangle avec une couleur on utilise fill.
outline
Précise la couleur de la bordure du rectangle (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur.
tag
Chaîne de caractères qui sert à marquer le rectangle (voir programme fonctionnel).
width
Précise la largeur de la bordure, 1 pixel par défaut.

Les lignes :

En général, une ligne est une succession de segments connectés les uns aux autres. Pour créer une ligne, utiliser :

Canvas.create_line(x0,y0,x1,y1..., xn,yn,options , ...)
_images/blanc.png
option Effet
fill
Couleur utilisée pour colorée la ligne, noir si elle n’est pas appelée.
fill=couleur .
dash
Pour produire une ligne hachurée : dash=(3,5), 3 pixels colorés et 5 pixels transparents.
width
Précise la largeur de la ligne, 1 pixel par défaut.
tag
Chaîne de caractères qui sert à marquer la ligne (voir programme fonctionnel)

Les polygones :

Création

_images/poligone.PNG

Un polygone est une ligne fermée. Ainsi, il possède une ligne de contour (formée de segments) et une zone intérieure. Pour le définir, on utilise une série de points x0,y0,x1,y1,….

Le premier point et le dernier sont reliés par un segment afin de le fermer. Pour créer un polygone, utiliser:

Canvas.create_polygon(x0,y0,x1,y1,...,options ...)
option Effet
fill
L’intérieur du polygone est transparent si l’option fill n’est pas donnée ou si on a fill=”” , pour obtenir un remplissage du polygone avec une couleur on utilise :
fill=couleur (exemple fill=’green’ ).
outline
Précise la couleur de la bordure du polygone (noir si l’option n’est pas donnée, pour changer la couleur : outline=couleur .
width
Précise la largeur de la bordure, 1 pixel par défaut, utiliser width=0  rend la bordure invisible.
smooth
La bordure est formée par des segments si l’option smooth n’est pas indiquée ou si smooth=0 , pour obtenir une courbe qui passe par les points utiliser smooth=1.
tag
Chaîne de caractères qui sert à marquer le polygone (voir programme fonctionnel)
_images/image125.png
Variables
_images/image126.png _images/image127.png
_images/blanc.png

Les textes :

Vous pouvez afficher une ou plusieurs lignes de texte sur un canevas en utilisant :

Canvas.create_text(x,   y,   options,   )
option Effet
anchor
Par défaut vaut ‘center’ la position du texte est centrée sur (x,y).
height
Hauteur de la zone du texte.
width
Largeur de la zone du texte ;
font
#Change la police du texte , exemple :
font=  "arial 20 bold",
police =arial, taille= 20 , bold= gras)
tag
Chaîne de caractères qui sert à marquer la ligne (voir programme fonctionnel)
_images/image128.png _images/image129.png _images/blanc.png

Création d’une image dans un canevas:

_images/blanc.png

Pour afficher l’image paysage.png, on utilise la fonction « PhotoImage » (ligne 4) qui permet d’afficher l’image sur le canevas. Les lignes 14 et 16 sont les commandes destinées à afficher du texte sur le canevas.

_images/image130.png _images/image131.png

Les arcs, les rectangles, les ellipses, les lignes, les textes et les polygones sont des items d’un canevas.

_images/blanc.png