Tutoriel simple

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 click sur le rectangle

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

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 la classe au format texte(HTTP)
Importez le fichier clGdi32.cls contenu dans l'archive téléchargée.
Vous pouvez soit faire glisser le fichier vers l'exporateur 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.

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 la classe il est nécessaire de la déclarer.
La classe est un objet dont le type est le nom sous lequel on a sauvegardé notre module de classe.
Elle se déclare comme n'importe quelle autre variable.

Private oGdi As clGdi32

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 clGdi32
End Sub

Deuxième chose à faire : pensez à libérer la classe dès qu'elle n'est plus utile, au plus tard donc à la fermeture du formulaire.
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.

A 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 visualisez 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.

La fonction utilisée pour charger le fichier est OpenFile.
Une fois le fichier ouvert, il faut ensuite mettre à jour le contrôle pour voir le résultat à l'écran.
(La fonction OpenFile 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 RepaintControl.

Private Sub Form_Open(Cancel As Integer)
' Initialisation de la classe de dessin
Set oGdi = New ClGdi32
' Chargement d'une image de fond
oGdi.OpenFile CurrentProject.Path & "\DSCN1099.JPG"
' Affichage de l'image dans le contrôle
oGdi.RepaintControl 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 RepaintControl à Vrai.
Le problème d'affichage ne se produit pas pour un type d'image EMF.

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

Nous souhaitons maintenant dessiner du texte sur l'image :

- 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.

  - 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.
  - True dans le paramètre pAntialise pour lisser le texte.


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, , , , 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 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, remplacez -1 par un code couleur.

' 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.

Maintenant 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.

Comme pour le chargement de l'image de fond on défini 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.ImageListAdd "MonImage", CurrentProject.Path & "\logo.gif", 2 * oGdi.ImageWidth / 5

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

On utilise la fonction DrawImage qui permet de dessiner une image de la liste d'images.
On donne en paramètres de la fonction les mêmes coordonnées que pour le rectangle.
Puis on défini le mode d'affichage à Gdi32SizeModezoom et le positionnement à Gdi32AlignCenter.

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.

' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImage "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, Gdi32SizeModeZoom, Gdi32AlignCenter

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

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

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 ClGdi32

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 ClGdi32
' Chargement d'une image de fond
oGdi.OpenFile 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, , , , 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, 1
' Ajout de l'image à la liste d'images
oGdi.ImageListAdd "MonImage", CurrentProject.path & "\logo.gif", 2 * oGdi.ImageWidth / 5
' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImage "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, Gdi32SizeModeZoom, Gdi32AlignCenter
' Supprime l'image de la liste
oGdi.ImageListDel "MonImage"
' Affichage de l'image dans le contrôle
oGdi.RepaintControl 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 ça 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 et 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 et ajout de la région
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'évenement 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 converti d'abord la position de la souris en pixel sur l'image avec les fonctions CtrlToImgX et CtrlToImgY.

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(oGdi.CtrlToImgX(X, Me.Image0), oGdi.CtrlToImgY(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 HatchRegion.

On utilise les fonctions de sauvegarde en mémoire (KeepImage et ResetImage) pour rétablir l'image avant de la hachurer.
Ainsi on repart à chaque fois de l'image d'origine.
Il faut donc exécuter la fonction KeepImage 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(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.ResetImage
    ' Rempli la région en bleu
    oGdi.HatchRegion lRegion, vbBlue, , HatchStyleForwardDiagonal
    ' Affichage de l'image dans le contrôle
    oGdi.RepaintControl 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 (à ce jour) que le couple Access 2003 + Windows XP soit le plus touché par cet effet.

Une solution simple et efficace est d'utiliser la fonction RepaintControlNoFormRepaint au lieu de la fonction RepaintControl.

Il faudra alors peut-être apporter quelques corrections à l'affichage qui risque d'être décalé.
On utilise pour cela la fonction FastRepaintSetCorrection.
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 positionner 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.

' Corrections pour RepaintControlNoFormRepaint
oGdi.FastRepaintSetCorrection , , -1
' Affichage de l'image dans le contrôle
oGdi.RepaintControlNoFormRepaint Me.Image0, , , True

Voici le code complet de ce tutoriel :

Option Compare Database
Option Explicit

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

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 ClGdi32
' Chargement d'une image de fond
oGdi.OpenFile 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, , , , True
' Dessin du rectangle et ajout de la région
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.ImageListAdd "MonImage", CurrentProject.path & "\logo.gif", 2 * oGdi.ImageWidth / 5
' Dessine l'image dans le rectangle
' Mode Zoom centré
oGdi.DrawImage "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, Gdi32SizeModeZoom, Gdi32AlignCenter
' Supprime l'image de la liste
oGdi.ImageListDel "MonImage"
' Affichage de l'image dans le contrôle
oGdi.RepaintControl Me.Image0, , , True
' Conserve l'image
oGdi.KeepImage
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(oGdi.CtrlToImgX(X, Me.Image0), oGdi.CtrlToImgY(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.ResetImage
    ' Rempli la région en bleu
    oGdi.HatchRegion lRegion, vbBlue, , HatchStyleForwardDiagonal
    ' Corrections pour RepaintControlNoFormRepaint
    oGdi.FastRepaintSetCorrection , , -2, -1
    ' Affichage de l'image dans le contrôle
    oGdi.RepaintControlNoFormRepaint 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.


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 (HTTP)