Tutoriel simple d'utilisation de clGdiplus

Nous allons au cours de ce tutoriel :

• charger une image de fond ;
• dessiner du texte ;
• dessiner un rectangle ;
• dessiner une image dans ce rectangle par-dessus l'image de fond ;
• détecter le survol du rectangle ;
• détecter le clic sur le rectangle.

L'exemple est créé avec Access mais il est possible d'adapter facilement pour les autres applications Office.

Consultez la documentation des fonctions et des propriétés de clGdiplus

Lien vers la bibliothèque gdiplus.dll en téléchargement sur Microsoft.com pour Windows sans Gdi+

Créez un formulaire et placez-y un contrôle image de n'importe quelle taille.
Il n'est pas utile d'intégrer une image dans le contrôle car on va dessiner dessus.

Si nécessaire, choisissez une image quelconque pour créer le contrôle puis dans les propriétés du contrôle dans l'onglet Format, effacez la propriété Image.

Définissez le mode d'affichage à Zoom. L'image sera redimensionnée en conservant ses proportions.

Vérifiez le nom du contrôle dans l'onglet Autres, changez le si-besoin en Image0 (c'est le nom qu'on va utiliser dans ce tutoriel)

Téléchargez le module de classe clGdiplus.
Puis importez le fichier clGdiplus.cls contenu dans l'archive téléchargée.

Vous pouvez soit faire glisser le fichier vers l'explorateur de projet VBA, soit importer le fichier à partir du menu : Fichier => Importer un fichier…

Pour accéder à l'éditeur VBA, vous pouvez utiliser le raccourci clavier ALT-F11.

Ce module de classe VBA utilise la bibliothèque gdiplus.dll de Microsoft.

Si vous utilisez une version de Windows antérieure à XP, téléchargez la bibliothèque gdiplus.dll et placez la dans le même répertoire que le fichier Access.

On va écrire notre code dans le module du formulaire. Cliquez sur Affichage => Code pour ouvrir ce module.

Vérifiez que vous avez l'instruction Option Explicit en haut du module.

Sinon rajoutez le pour imposer la déclaration de toutes les variables, cela évite les étourderies.

Option Compare Database
Option Explicit

Pour pouvoir utiliser le module il est nécessaire de déclarer un objet dont le type est le nom sous lequel on a sauvegardé notre module de classe.

Private oGdi As clGdiPlus

Première chose à faire : il faut créer une instance de l'objet classe.
(Pour l'instant oGdi a pour valeur Nothing).

On écrit ce code dans l'événement Sur Ouverture du formulaire.
Dans les propriétés du formulaire, définissez [Procédure événementielle] dans l'événement Sur Ouverture.
Cliquez sur les trois petits points […] pour générer l'événement dans le code.

Private Sub Form_Open(Cancel As Integer)
' Initialisation de la classe de dessin
Set oGdi = New clGdiPlus
End Sub

Deuxième chose à faire : pensez à libérer la classe dès qu'elle n'est plus utile.

La libération de la classe est importante car elle supprime tous les objets graphiques de la mémoire.

Dans les propriétés du formulaire, définissez [Procédure événementielle] dans l'événement Sur Fermeture.

Cliquez sur les trois petits points […] pour générer l'événement dans le code.

À l'intérieur de la procédure Form_Close on va libérer la classe : il suffit de lui donner la valeur Nothing si elle n'a pas déjà cette valeur.

Private Sub Form_Close()
' Libération de la classe à la fermeture du formulaire
If Not oGdi is Nothing Then Set oGdi = Nothing
End Sub

Si vous affichez le formulaire, vous ne voyez rien.

C'est normal car on n'a encore rien fait…

On va maintenant charger une image dans le contrôle.
Placez une image dans le même répertoire que votre base de données.
Mon image s'appelle DSCN1099.JPG, remplacez ce nom de fichier par le vôtre dans le code ci-dessous.

La fonction utilisée pour charger le fichier est LoadFile.
Une fois le fichier ouvert, il faut ensuite mettre à jour le contrôle pour voir le résultat à l'écran.
La fonction LoadFile ouvre le fichier en mémoire mais n'affiche rien.
L'affichage à l'écran s'effectue en mettant à jour la propriété PictureData de l'image grâce à la fonction Repaint.

Private Sub Form_Open(Cancel As Integer)
' Initialisation de la classe de dessin
Set oGdi = New clGdiPlus
' Chargement d'une image de fond
oGdi.LoadFile CurrentProject.Path & "\DSCN1099.JPG"
' Affichage de l'image dans le contrôle
oGdi.Repaint Me.Image0
End Sub

On obtient alors l'image dans le formulaire.

Il peut parfois y avoir un problème d'affichage au redimensionnement de l'image, généralement lors de l'affichage d'une image plus grande que le contrôle qui la contient.

Pour résoudre ce problème, passez le paramètre pUseEMF de la fonction Repaint à Vrai.
Ce problème d'affichage ne se produit pas pour un type d'image EMF.

' Affichage de l'image dans le contrôle
oGdi.Repaint Me.Image0, , , True

Il est également possible d'utiliser la méthode Resize pour redimensionner l'image en mémoire avant de l'injecter dans le contrôle.

Nous souhaitons maintenant dessiner du texte sur l'image avec ces paramètres :

• texte = Essais de texte ;
• taille = 16 points ;
• police = Comic sans MS ;
• Position = En bas, centré horizontalement ;
• couleur du texte = Bleu ;
• couleur du fond = Jaune pâle ;
• italique = Oui ;
• souligné = Non ;
• barré = Non.

On passe 4 coordonnées en paramètres, ce sont les coordonnées d'un rectangle dans lequel on va dessiner le texte.
On utilise les coordonnées (0, 0, oGdi.ImageWidth - 1, oGdi.ImageHeight - 1) qui sont celles de l'image complète, les coordonnées du point haut-gauche d'une image étant (0,0).

HorzAlignCenter et VertAlignBottom sont les alignements du texte : centré horizontalement et positionné en bas dans le rectangle défini précédemment.

VbBlue est la couleur du texte : on écrit le texte en bleu.

RGB(255, 255, 200) correspond à une couleur de fond jaune pastel.

True dans le paramètre pItalic pour afficher le texte en italique.

La taille du texte pour la fonction DrawText est exprimée en pixel sur l'image.
Pour l'exemple nous souhaitons que le texte affiché à l'écran soit de la même taille qu'un contrôle de taille de police égal à 16.

Cette valeur 16 est exprimée en points.

La fonction FontSizeToPixel va convertir les twips (ou points) en pixels sur l'image.

Pour tester j'ai placé un contrôle étiquette pour vérifier que la taille du texte correspond.

' Dessin du texte
oGdi.DrawText "Essais de texte", oGdi.FontSizeToPixel(16, Me.Image0), "Comic sans MS", _
                    0, 0, oGdi.ImageWidth - 1, oGdi.ImageHeight - 1, HorzAlignCenter, VertAlignBottom, _
                    vbBlue, , RGB(255, 255, 500), , True

Placez ce code avant l'instruction d'affichage dans le contrôle.

Une seule mise à jour de la propriété PictureData du contrôle sera nécessaire une fois tout le dessin effectué en mémoire.

Voilà ce que l'on obtient.

On va maintenant afficher un rectangle au centre de l'image.

On donne les coordonnées du rectangle à dessiner à la fonction DrawRectangle.

On dessine ici un rectangle rouge dont la taille est égale à 2/5 de la taille de l'image visible.

L'intérieur du rectangle est transparent ; pour ajouter une couleur de remplissage, ajoutez un code couleur dans le paramètre pBackColor.

' Dessin du rectangle
oGdi.DrawRectangle oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    , vbRed, 2

Placez ce code avant l'instruction d'affichage dans le contrôle.

On obtient un rectangle au centre de l'écran.

Ensuite on va afficher une petite image à l'intérieur du rectangle que l'on vient de dessiner.

On écrit toujours le code avant l'instruction d'affichage dans le contrôle.

Pour dessiner une image il faut d'abord l'ajouter à la liste d'images secondaires.

Comme pour le chargement de l'image de fond on définit le chemin du fichier et on limite la taille de l'image chargée à la largeur du rectangle qui va contenir l'image.

On donne un nom à cette image : MonImage.

' Ajout de l'image à la liste d'images
oGdi.ImgNew("MonImage").LoadFile CurrentProject.Path & "\logo.gif", 2 * oGdi.ImageWidth / 5

On va ensuite dessiner l'image « MonImage » dans le rectangle.

On utilise la fonction DrawImg qui permet de dessiner une image secondaire.
On donne en paramètres de la fonction les mêmes coordonnées que pour le rectangle.
Puis on définit le mode d'affichage à GdipSizeModezoom et le positionnement à GdipAlignCenter.

L'image est dessinée dans le rectangle comme elle le serait dans un contrôle image avec les mêmes propriétés de mode d'affichage et de positionnement.

Si votre image a une couleur que vous souhaitez rendre transparente, mettez cette couleur dans le paramètre pTranspColor (vbWhite par exemple).

' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImg "MonImage", oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    -1, GdipSizeModeZoom, GdipAlignCenter

On n'a plus besoin de l'image secondaire donc on la supprime.

' Supprime l'image de la liste
oGdi.ImgDelete "MonImage"

Et voilà, on a fini de dessiner !

Voilà le code complet qui s'exécute à l'ouverture du formulaire.

Option Compare Database
Option Explicit
            
' Déclaration de la classe
Private oGdi As New ClGdiPLus
            
Private Sub Form_Close()
' Libération de la classe à la fermeture du formulaire
If Not oGdi Is Nothing Then Set oGdi = Nothing
End Sub
            
Private Sub Form_Open(Cancel As Integer)
' Initialisation de la classe de dessin
Set oGdi = New clGdiplus
' Chargement d'une image de fond
' On précise la largeur de l'image car il n'est pas nécessaire de charger une image plus large que le contrôle
' La hauteur sera automatiquement calculée en fonction de la largeur précisée et des proportions de l'image
oGdi.LoadFile CurrentProject.path & "\DSCN1099.JPG"
' Dessin du texte
oGdi.DrawText "Essais de texte", oGdi.FontSizeToPixel(16, Me.Image0), "Comic sans MS", _
                    0, 0, oGdi.ImageWidth - 1, oGdi.ImageHeight - 1, HorzAlignCenter, VertAlignBottom, _
                    vbBlue, , RGB(255, 255, 500), , True 
' Dessin du rectangle
oGdi.DrawRectangle oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    , vbRed, 2
' Ajout de l'image à la liste d'images
oGdi.ImgNew("MonImage").LoadFile CurrentProject.path & "\logo.gif", 2 * oGdi.ImageWidth / 5
' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImg "MonImage", oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    -1, GdipSizeModeZoom, GdipAlignCenter
' Supprime l'image de la liste
oGdi.ImgDelete "MonImage"
' Affichage de l'image dans le contrôle
oGdi.Repaint Me.Image0, , , True
End Sub

Et le résultat obtenu.

On peut à présent passer à l'interactivité.

Dessiner sur un contrôle c'est bien mais c'est encore mieux de rendre des zones sensibles et de réagir aux actions de l'utilisateur.

Pour faire cela il faut passer par la création de régions.

Pour créer une région on peut utiliser les fonctions dédiées : CreateRegionRect, CreateRegionPolygon, CreateRegionEllipse…

Pour créer une région correspondant au rectangle rouge cela donne :

oGdi.CreateRegionRect "MaRegion", oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5

On voit que l'on serait obligé de passer à nouveau les mêmes coordonnées en paramètres.
Il y a plus simple, il suffit d'utiliser le paramètre pRegion de la fonction DrawRectangle avec laquelle on a dessiné le rectangle.

On modifie alors le précédent appel à la fonction DrawRectangle comme suit :

' Dessin du rectangle
oGdi.DrawRectangle oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    , vbRed, 2, , , "MaRegion"

On a simplement rajouté le paramètre « MaRegion » à la fin.
Cela va créer automatiquement une région nommée « MaRegion » définie par les coordonnées du rectangle dessiné.

On voudrait dans la suite afficher une boîte de message si l'utilisateur clique dans le rectangle rouge.

L'événement Sur clic du contrôle image ne propose pas de paramètre donnant la position de la souris alors on va utiliser l'événement Sur souris appuyée.

La fonction GetRegionXY nous renvoie le nom de la région située sous le curseur de la souris.
Notez qu'on précise le nom de l'objet Me.Image0 sur lequel sont prises les coordonnées.

Si on a cliqué dans le rectangle rouge on reçoit alors la valeur « MaRegion ».

On peut à ce moment afficher une boîte de message.

Private Sub Image0_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Dim lRegion As String
' On teste si la classe est initialisée
If oGdi Is Nothing Then Exit Sub
' Récupère le nom de la région sur laquelle on a cliqué
lRegion = oGdi.GetRegionXY(X, Y, , , Me.Image0)
' Si on a cliqué dans le rectangle rouge alors on affiche un message
If lRegion = "MaRegion" Then MsgBox "Vous avez cliqué dans le rectangle rouge!"
End Sub

On obtient bien un message seulement si on clique dans le rectangle.

Mais on aimerait faire mieux parce qu'on n'a pas d'information qui nous indique qu'on survole une zone sensible de l'image…

On va, pour terminer, déterminer si on survole notre rectangle et le hachurer.

Pour savoir le nom de la région survolée on va procéder de la même manière que pour le clic mais sur l'événement Sur souris déplacée.

Si on survole le rectangle on souhaite hachurer la région avec la fonction RegionHatch.

On utilise les fonctions de sauvegarde en mémoire (ImageKeep et ImageReset) pour rétablir l'image avant de la hachurer.
Ainsi on repart à chaque fois de l'image d'origine sans avoir besoin de tout redessiner.

Il faut donc exécuter la fonction ImageKeep une fois l'image dessinée dans la procédure Form_Open

La variable Static sRegion nous est utile pour ne dessiner ou retirer les hachures que si la région survolée change.

' Conserve l'image
oGdi.KeepImage

Private Sub Image0_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Dim lRegion As String
Static sRegion As String
' On teste si la classe est initialisée
If oGdi Is Nothing Then Exit Sub
' Récupère le nom de la région sur laquelle on a cliqué
lRegion = oGdi.GetRegionXY(X, Y, , , Me.Image0)
' si changement de région
If sRegion <> lRegion Then
    ' Rétabli l'image originale
    oGdi.ImageReset
    ' Rempli la région en bleu
    oGdi.RegionHatch lRegion, vbBlue, , HatchStyleForwardDiagonal, 150
    ' Affichage de l'image dans le contrôle
    oGdi.Repaint Me.Image0, , , True
End If
' Conserve le nom de la dernière région survolée
sRegion = lRegion
End Sub

Voilà c'est fini on a bien notre région hachurée au survol du rectangle.

Le changement d'image lors du survol de la souris peut produire un effet de clignotement.
Il semble que le couple Access 2003 + Windows XP soit le plus touché par cet effet

Une solution simple et efficace est d'utiliser la fonction RepaintNoFormRepaint au lieu de la fonction Repaint.

Il faudra alors peut-être apporter quelques corrections à l'affichage qui risque d'être décalé d'un ou deux pixels.
On utilise pour cela la fonction RepaintFastSetCorrection.
Les paramètres sont à adapter en fonction des décalages éventuellement observés.

Pour éviter ces décalages, préférez un contrôle image sans bordure et si possible positionné en haut à gauche du formulaire.

Déplacer ou redimensionner légèrement (avec la touche ALT) le contrôle peut aussi aider à résoudre ce problème de décalage.

J'ai essayé au fil des versions de réduire au maximum ces décalages dus aux arrondis de conversion entre les unités.
Utiliser donc de préférence la dernière version disponible.

' Affichage de l'image dans le contrôle
oGdi.RepaintNoFormRepaint Me.Image0, , , True

Voici le code complet de ce tutoriel :

Option Compare Database
Option Explicit

' Déclaration de la classe
Private oGdi As New clGdiplus

Private Sub Form_Close()
' Libération de la classe à la fermeture du formulaire
If Not oGdi Is Nothing Then Set oGdi = Nothing
End Sub

Private Sub Form_Open(Cancel As Integer)
' Initialisation de la classe de dessin
Set oGdi = New clGdiplus
' Chargement d'une image de fond
' On précise la largeur de l'image car il n'est pas nécessaire de charger une image plus large que le contrôle
' La hauteur sera automatiquement calculée en fonction de la largeur précisée et des proportions de l'image
oGdi.LoadFile CurrentProject.Path & "\DSCN1099.JPG"
' Dessin du texte
oGdi.DrawText "Essais de texte", oGdi.FontSizeToPixel(16, Me.Image0), "Comic sans MS", _
                    0, 0, oGdi.ImageWidth - 1, oGdi.ImageHeight - 1, HorzAlignCenter, VertAlignBottom, _
                    vbBlue, , RGB(255, 255, 500), , True
' Dessin du rectangle
oGdi.DrawRectangle oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    , vbRed, 2, , , "MaRegion"
' Ajout de l'image à la liste d'images
oGdi.ImgNew("MonImage").LoadFile CurrentProject.Path & "\logo.gif", 2 * oGdi.ImageWidth / 5
' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImg "MonImage", oGdi.ImageWidth / 2 - oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 - oGdi.ImageHeight / 5, _
                    oGdi.ImageWidth / 2 + oGdi.ImageWidth / 5, _
                    oGdi.ImageHeight / 2 + oGdi.ImageHeight / 5, _
                    -1, GdipSizeModeZoom, GdipAlignCenter
' Supprime l'image de la liste
oGdi.ImgDelete "MonImage"
' Conserve l'image
oGdi.ImageKeep
' Affichage de l'image dans le contrôle
oGdi.Repaint Me.Image0, , , True
End Sub

Private Sub Image0_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Dim lRegion As String
' On teste si la classe est initialisée
If oGdi Is Nothing Then Exit Sub
' Récupère le nom de la région sur laquelle on a cliqué
lRegion = oGdi.GetRegionXY(X, Y, , , Me.Image0)
' Si on a cliqué dans le rectangle rouge alors on affiche un message
If lRegion = "MaRegion" Then MsgBox "Vous avez cliqué dans le rectangle rouge!"
End Sub

Private Sub Image0_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Dim lRegion As String
Static sRegion As String
' On teste si la classe est initialisée
If oGdi Is Nothing Then Exit Sub
' Récupère le nom de la région sur laquelle on a cliqué
lRegion = oGdi.GetRegionXY(oGdi.CtrlToImgX(X, Me.Image0), oGdi.CtrlToImgY(Y, Me.Image0))
' si changement de région
If sRegion <> lRegion Then
    ' Rétabli l'image originale
    oGdi.ImageReset
    ' Rempli la région en bleu
    oGdi.RegionHatch lRegion, vbBlue, , HatchStyleForwardDiagonal, 150
    ' Affichage de l'image dans le contrôle
    oGdi.RepaintFastSetCorrection , , , , , , -1, -1 ' Corrections affichage
    oGdi.RepaintNoFormRepaint Me.Image0, , , True
End If
' Conserve le nom de la dernière région survolée
sRegion = lRegion
End Sub

On a donc dessiné sur un contrôle image et on a rendu une zone sensible pour donner de l'interactivité à l'image.

C'est assez simple et il y a beaucoup d'autres possibilités.

Consultez la page d'accueil de clGdiplus pour plus de tutoriels.

Merci à l'équipe Office de developpez.com pour ses relectures, commentaires et encouragements !

Télécharger la base Access de ce tutoriel au format ACCESS 2000