Dessin

Avant de commencer, nous allons fabriquer un petit programme créant une fenêtre. La fonction de dessin de cette fenêtre sera modifiée au fur et à mesure pour illustrer les différentes fonctions vues.

(ok:init)

; création de la fenêtre
(define f (ok:create-window
           #f       ; parent
           ok:gray  ; couleur de fond
           100      ; x
           100      ; y
           200      ; largeur
           150))    ; hauteur

; fonction de dessin - redéfinie plus bas
(define (refresh)
  #t)

; affectation de la fonction de dessin
(ok:refresh-callback! f refresh)

; affichage de la fenêtre
(ok:show f ok:show:normal)

; gestion des événements (optionnel)
(ok:exec)

Point

La fonction :

(ok:draw-point device x y)

dessine un point à position (x,y) avec la couleur du trait du device.

La fonction :

(ok:get-point device x y)

retourne une couleur OK correspondant au point situé à la position (x,y) du device. Cette fonction s'applique aussi bien aux bitmaps qu'aux fenêtres. Les valeurs peuvent être positives ou négatives.

Ligne

La fonction :

(ok:draw-line device x y largeur hauteur)

dessine une droite avec la couleur de trait du device entre les points (x,y) et (x+lareur,y+hauteur). Les coordonnées peuvent être positives ou négatives.

le dessin des lignes peut être modifié par un style permettant par exemple de dessiner une ligne en pointillés. La fonction :

(ok:line-style! device largeur style)

modifie le style de tracé de ligne. L'argument largeur détermine la largeur du trait, en pixels, et l'argument style est soit ok:line:solid pour une ligne pleine, soit ok:line:dot pour une ligne dessinée avec des points, ou enfin ok:line:dash pour une ligne dessinée avec des tirets. La fonction ok:line:style appliquée à un device retourne une paire contenant la largeur du tracé, et le style du tracé, dans ce device.

Redéfinissons la fonction refresh de l'exemple donné en introduction :

(define (refresh)
  (ok:line-style! f ok:line:solid 3)
  (ok:draw-line   f 10 10 0 150)
  
  (ok:line-style! f 1 ok:line:dash)
  (ok:draw-line   f 10 10 150 150)
  
  (ok:foreground! f ok:red)
  (ok:line-style! f 4 ok:line:dot)
  (ok:draw-line   f 10 10 150 0))

Nous obtenons alors l'affichage de la figuer 16.1.

Figure 16.1: Tracé de lignes.

Polylines / Béziers et polygones

La fonction :

(ok:draw-polyline device x y . couples-de-points)

dessine une série de droites avec la couleur de trait du device à partir du point (x,y). Couples-de-points est une série d'entiers représentant les coordonnées des sommets. Les valeurs sont des déplacements par rapport au point initial (x,y).

Redéfinissons la fonction refresh de l'exemple donné en introduction :

(define (refresh)
  (ok:foreground!   f ok:black)
  (ok:background!   f ok:white)
  (ok:draw-polyline f
                    75  75
                     0  50
                    50  50
                    50   0
                    25 -50
                     0   0
                    50   0))

Nous obtenons alors l'affichage de la figure 16.2.

Figure 16.2: Tracé de polygones.

La fonction ok:draw-bezier est équivalente à ok:draw-polyline, mais les points sont utilisés pour dessiner une courbe de bézier. De même, la fonction ok:draw-polygone pourra être utilisée pour dessiner un polygone.

Rectangle

La fonction :

(ok:draw-rectangle device x y largeur hauteur)

est utilisée pour dessiner un rectangle avec la couleur de trait et de fond du device entre le point (x,y) et le point (x+largeur,y+hauteur).

Redéfinissons la fonction refresh afin de dessiner un rectangle :

(define (refresh)
  (ok:foreground!    f ok:black)
  (ok:background!    f ok:white)
  (ok:draw-rectangle f 50 30 100 70)
  
  (ok:mode!          f ook:mode:xor)
  (ok:draw-rectangle f 70 60 70 70))

L'utilisation du mode ok:mode:xor permet de dessiner en combinant la couleur existante sur le device et la couleur utilisée pour dessiner le pixel. Ce mode permet d'inverser les couleurs, comme on peut le voir en figure 16.3.

Figure 16.3: Tracé de rectangle.

Cercle

La fonction suivante permet de dessiner un cercle :

(ok:draw-circle device x y rayon)

est utilisée pour dessiner un cercle avec la couleur de trait et de fond du device entre le point (x,y) et le point (x+largeur,y+hauteur).

Redéfinissons la fonction refresh afin de dessiner un cercle :

(define (refresh)
  (ok:foreground! f ok:black)
  (ok:background! f ok:white)
  (ok:draw-circle f 50 50 40)
  
  (ok:foreground! f ok:black)
  (ok:background! f ok:transparent)
  (ok:draw-circle f 100 50 40))

L'utilisation de la couleur transparente pour le fond permet de dessiner un cercle non plein. Nous obtenons l'affichage de la figure 16.4.

Figure 16.4: Tracé de cercles.

Arc

Les cercles sont un cas particulier des arcs qui permettent de dessiner des formes complexes. Un arc est dessiné avec la fonction :

(ok:draw-arc device x y largeur hauteur angle-1 angle-2)

L'arc est dessiné sur le device, avec la couleur de trait et la couleur de fond en cours. L'arc est inscrit dans le rectangle situé entre les points (x,y) et (x+largeur,y+hauteur). L'angle-1 est l'angle en degré multiplié par 100 du départ de l'arc et l'angle-2 est l'angle en degré multiplié par 100 contenant l'arc. Ceci est résumé sur le graphique suivant dans la figure 16.5.

Figure 16.5: Valeurs de dessin des arcs..

Les arcs peuvent être refermés en passant par le centre ou directement en reliant les deux sommets extrêmes. Ceci est un style de dessin des arcs que l'on règle en appelant la fonction :

(ok:arc:style! device style)

où style est soit ok:arc:pie (passage par le centre) ou ok:arc:chord (passage par la corde). La fonction ok:arc:style retourne le style en cours dans le device passé en argument.

Le programme suivant utilise les arcs :

(define (refresh)
  (ok:foreground! f ok:black)
  (ok:background! f ok:white)
  
  (ok:arc-style!  f ok:arc:chord)
  (ok:draw-arc    f 10 10 100 100 3000 18000)
  
  (ok:arc-style!  f ok:arc:pie)
  (ok:draw-arc    f 30 50 170 190 3000 105000))

On obtient alors l'affichage de la figure 16.6.

Figure 16.6: Tracé d'arcs passant par la corde ou par le centre.

Texte

La fonction :

(ok:draw-text device x y chaîne . début fin)

dessine une chaîne de caractères sur le device, à la position (x,y). Si début est spécifié, les caractères à partir de début sont pris en compte. Si fin est précisé, seuls les caractères avant fin sont pris en compte. La position à laquelle la chaîne sera dessinée dépend des options d'alignement du device.

Le texte est aligné horizontalement et verticalement avec la fonction :

(ok:text-align! device align-h align-v)

La valeur align-h peut prendre les valeurs ok:align:left (alignement à gauche), ok:align:center (alignement au centre) et ok:align:right (alignement à droite). La valeur align-v prend l'une des valeurs ok:align:top (alignement au sommet), ok:align:midle (alignement au milieu de la hauteur de la ligne), ok:align:baseline (alignement sur la ligne de base) ou ok:align:bottom (alignement au bas de a ligne). La fonction ok:text-align appliquée à un device retourne un paire contenant les valeurs de l'alignement du texte. Ceci est résumé sur la figure 16.7.

Figure 16.7: Alignement du texte.

La chaîne est dessinée avec la police de caractère en cours dans le device (voir plus bas).

Pour dessiner du texte, on peut écrire par exemple :

(define (refresh)
  (ok:origin! f 100 75)
  (let* ([colors (list
                  ok:black ok:red ok:white 
                  ok:green ok:blue ok:yellow
                  ok:gray ok:light-gray
                  ok:dark-gray)]
         [ncols  (length colors)])
    (do ([i     0 (+ i 20)]
         [color 0 (+ color 1)])
        ((eq? i 360))
     (if (eq? color ncols) (set! color 0))
     (ok:foreground! f (list-ref colors
                                 color))
     (ok:angle! f i)
     (ok:draw-text f 20 0 "OpenScheme"))))

On obtient alors l'affichage de la figure 16.8.

Figure 16.8: Tracé de texte.

La fonction :

(ok:text-dim device chaîne)

retourne des informations concernant la chaîne de caractères passée en argument sur le device, en fonction des réglages actifs sur le device. Les informations sont retournées sous la forme d'un vecteur à quatre valeurs : La première valeur est la largeur de la chaîne de caractères, la seconde valeur est la hauteur totale de la chaîne, la troisième est la distance qui sépare le bas de la chaîne de ligne de base et la dernière est la hauteur relative de la chaîne qui dépend des caractères dessinés. Ceci est résumé sur la figure 16.9.

Figure 16.9: Signification des valeurs du vecteur retourné par ok:text-dim.

Cette fonction est importante pour effectuer de manière précise des placements de textes.

Flèches

La fonction :

(ok:draw-arrow device x y largeur hauteur a b c)

dessine une flèche sur le device à la position (x,y). Le tracé de la flèche est contrôlé par les valeurs a, b et c, suivant le schéma en figure 16.10.

Figure 16.10: Contrôle du dessin d'une flèche.

Par exemple, on aura :

(define (refresh)
 ;                 x   y   w    h  a  b   c
 (ok:draw-arrow f 10  10 100    0 30 10  30)
 (ok:draw-arrow f 10  30 100    0 30 10   0)
 (ok:draw-arrow f 10  50 100    0 30 10 -30)
 (ok:draw-arrow f 50 150 100 -100 30 10 10))

Ce qui provoque l'affichage en figure 16.11.

Figure 16.11: Affichage de flèches.

Copie d'images

La fonction :

(ok:copy src-device 
         x       y
         largeur hauteur
         dest-device
         a       b)

copie la zone rectangulaire comprise entre les points (x,y) et (x+largeur,y+hauteur) du device src-device dans le device dest-device, à la position (a,b). Les devices source et destination peuvent être des bitmaps ou des fenêtres. Cette fonction peut servir, notamment, à la gestion du double-buffering qui permet d'accélérer l'affichage. On pourra aussi l'utiliser pour copier une image bitmap dans une fenêtre.

Dessins de formes

La fonctions:

(ok:draw-frame device 
               x       y
               largeur hauteur
               largeur-bordure
               couleur-haut-gauche
               couleur-bas-droite
               couleur-centre)

dessine un cadre à la position (x,y) jusqu'à (x+largeur,y+hauteur) sur le device. Ce cadre est dessiné avec couleur-haut-gauche sur les bordures en haut et à gauche, couleur-bas-droite sur les bordures en bas et à droite, et couleur-centre au centre. La largeur des bordures est largeur-bordure.

Cette fonction peut être utilisée pour dessiner les boutons graphiques.

La fonction :

(ok:draw-diamond device 
                 x       y
                 largeur hauteur
                 largeur-bordure
                 couleur-haut-gauche
                 couleur-bas-droite
                 couleur-centre)

possède les mêmes arguments que la précédente. Elle dessine un losange inscrit dans le rectangle (x,y,x+largeur,y+hauteur).

La fonction :

(ok:draw-left device 
              x       y
              largeur hauteur
              largeur-bordure
              couleur-haut-gauche
              couleur-bas-droite
              couleur-centre
              a
              b
              c)

dessine une flèche en relief orientée à gauche. La signification des neuf premiers arguments est la même que pour la fonction précédente. La signification des trois derniers arguments est la même que pour la fonction ok:draw-arrow.

Il existe aussi les fonctions ok:draw-right, ok:draw-up, et ok:draw-bottom sont utilisées pour dessiner des flèches dans les autres directions.