LE CANVAS
Le canvas est un widget très puissant qui vous permet de dessiner, afficher une image, de créer de nouveaux widgets et bien d'autres choses encore.
Voici des tutoriels puisés sur internet qui regorgent d'exemples sur ce widget:
Dessiner des formes simples
Voici le code de cet exemple :
canvas .can .can create oval 10 11 80 80 -outline #777 -fill #777 .can create oval 110 10 210 80 -outline #777 -fill #777 .can create rect 230 10 290 60 -outline #777 -fill #777 .can create arc 30 200 90 100 -start 0 -extent 210 -outline #777 -fill #777 set points [ list 150 100 200 120 240 180 210 200 150 150 100 200 ] .can create polygon $points -outline #777 -fill #777 pack .can wm title . "shapes" wm geometry . 350x250+300+300
Commentons un peu le code :
- OUTLINE est la couleur du contour
- FILL est la couleur de remplissage (ici #000777 que l'on peut simplifier en #777)
- Pour un OVALE, les 4 coordonnées sont x1, y1, x2, y2
- Pour un RECTANGLE les 4 coordonnées sont x1,y1,x2,y2 (trace un rectangle du point haut gauche au point bas droit)
- Pour un ARC (Angle) les 4 coordonnées sont x1,y1,x2,y2 (trace un ovale en enlevant l'arc tracé par les coordonnée)
Le canvas peut aussi tracer des lignes, afficher des images et écrire du texte.
Afficher une Image dans un Canvas
Voici le code de cet exemple :
package require Img image create photo img -file "tatras.jpg" set height [image height img] set width [image width img] canvas .can -height $height -width $width .can create image 0 0 -anchor nw -image img pack .can wm title . "High Tatras" wm geometry . +300+300
Tout d'abord pour pouvoir afficher une image dans un Canvas , il vous faut télécharger la librairie tkimg et tkpng depuis vos dépots.
Ensuite voici les étapes essentielles :
- Définir une image à l'aide d'un fichier ou de DATA par la commande CREATE
- Définir l'option -image dans la création d votre image sur votre canvas.
Une petite remarque intéressante qui n'a rien à voir avec le Canvas dans ce code:
Il est définit la géometrie (c'est à dire la taille et disposition de la fenêtre) par la commande
wm.geometry . +300+300
Seule la taille est définit et non le placement
Dessiner un arbre avec des lignes
Cet exemple utilise la fonction SINUS et COSINUS ainsi que le nombre PI (arrondi à 7 chiffres après la virgule.
Voici comment réaliser cet arbre :
pack [canvas .c -width 400 -height 300 -bg white]
proc drawBranch {xstart ystart length angle rgb} {
# Compose the colour foreach {red green blue} $rgb {break} set colour [format "#%2.2x%2.2x%2.2x" $red $green $blue] # Determine the end point set phi [expr {$angle * 3.1415926 / 180.0}] set xend [expr {$xstart + $length * cos($phi)}] set yend [expr {$ystart + $length * sin($phi)}] # The line thickness set width 3 if { $length < 25 } { set width 2 } if { $length < 5 } { set width 1 }
# Draw the branch and the sub-branches
.c create line $xstart $ystart $xend $yend -fill $colour -width $width if { $length > 1.0 } { set rgbLeft [list [expr {int(0.8*$red)}] $green $blue] set rgbRight [list $red $green [expr {int(0.8*$blue)}]] set angleLeft [expr {$angle + 45.0}] set angleRight [expr {$angle - 45.0}] set length [expr {2.0*$length/3.0}] drawBranch $xend $yend $length $angleLeft $rgbLeft drawBranch $xend $yend $length $angleRight $rgbRight } } drawBranch 200 280 100 270 {255 0 255}
Une procédure drawBranch est créée pour réaliser cet arbre.
Cet exemple montre comment dessiner une ligne (code en rouge)
Remplir des formes avec des couleurs
Dans cet exemple nous allons remplir 3 carrés avec des couleurs différentes.
Voici le code :
canvas .can .can create rect 30 10 120 80 -outline #fb0 -fill #fb0 .can create rect 150 10 240 80 -outline #f50 -fill #f50 .can create rect 270 10 370 80 -outline #05f -fill #05f pack .can wm title . "Couleurs" wm geometry . 400x100+300+300
Rien de compliqué dans cet exemple, je pense que vous aurez vite compris.
Dessiner du texte dans un Canvas
Voici le code :
canvas .can .can create text 10 30 -anchor w -font Purisa -text "Most relationships seem so transitory" .can create text 10 60 -anchor w -font Purisa -text "They're good but not the permanent one" .can create text 10 110 -anchor w -font Purisa -text "Who doesn't long for someone to hold" .can create text 10 140 -anchor w -font Purisa -text "Who knows how to love without being told" .can create text 10 170 -anchor w -font Purisa -text "Somebody tell me why I'm on my own" .can create text 10 200 -anchor w -font Purisa -text "If there's a soulmate for everyone" pack .can -fill both wm title . "lyrics" wm geometry . 430x250+300+300
Ce qu'il faut retenir dans cet exemple :
- l'option ANCHOR (ancre en Français) fixe le texte suivant les points cardianux W pour west(ouest) ou n,ne,e,se,s,so,o,no
- l'option FONT fixe la police utilisée pour afficher le texte (ici Purisa)
- Les deux coordonées (10 et 30 en première ligne) fixe l'endroit où sera positionné le texte en X et Y (X=10 et Y=30)
Dessiner des partitions musicale
Cet exemple est particulièrement intéressant car:
A l'aide d'une suite de lettre (notes anglaises), il écrit la partition lisible par un musicien.
Le code étant très long dans le fichier, la mise en page de cette page serait non lisible.
Je mets le code uniquement en téléchargement ci-dessus et non affiché ici.
Déplacer des Formes dans un Canvas
Cet exemple est très intéressant. Il permet de faire bouger deux formes (un rond et une ligne) dans un Canvas.
Voici le code :
proc moveit {object x y} { .c coords $object [expr $x-25] [expr $y-25] [expr $x+25] [expr $y+25] } canvas .c -width 250 -height 100 set myoval [.c create oval 0 0 50 50 -fill orange] 'Crée un objet Ovale set myline [.c create line 50 50 100 100 -fill blue -width 4] 'Crée un objet ligne .c bind $myoval{moveit $myoval %x %y} 'Evènement à un clic gauche sur l'ovale .c bind $myline {moveit $myline %x %y} 'Evènement à un clic gauche sur la ligne grid .c -row 0 -column 0
Commentons ce code :
Les caractères en rouge ne sont là que pour expliquer et doivent être effacés pour exécuter ce code.
On crée 2 objets myoval et myline qui lors d'un clic gauche lanceron la procédure moveit.
Cette procédure a 3 paramètres:
- OBJECT : nom de l'objet à traiter
- X : Position horizontale actuelle de cet objet dans le canvas
- Y : Position verticale actuelle dans le canvas
Pourquoi -25 et +25 me direz-vous? regardez la taille de l'ovale ou la ligne ce sont des multiples de 50.
Si vous définissez une autre valeur, l'ovale ou la ligne auront des déformations lors du déplacement.
Déplacer à l'identique deux formes dans deux Canvas différents
Ce petit exemple est tout simplement bleuffant !
Quand vous déplacez le rond bleu, il se déplace à l'identique dans l'autre fenêtre.
Le mode echo vous permet même d'effectuer un ralenti.
