Choisissez maintenant un fichier image.
Gdi+ supporte notamment les formats BMP, GIF, JPEG, PNG, TIFF et EMF.
Pour l'exemple je choisis une photo JPEG que je copie dans le répertoire de mon fichier Office.
Pour charger l'image du PC, on utilise la fonction LoadFile.

Dim oGdi As clGdiplus
Set oGdi = New clGdiplus
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "P1010940.jpg") Then
    ' Chargement réussi
Else
    ' Erreur de chargement
    MsgBox "Erreur au chargement de l'image"
End If

Mon image étant dans le même dossier que mon fichier Excel, j'utilise la fonction ApplicationPath qui est dépendante de l'application utilisée.
Pour mon fichier Excel j'obtiens ThisWorkbook.Path (+ un antislash final).
Dans une application Access par exemple, la valeur serait celle de CurrentProject.Path (+ un antislash final).
Ainsi on peut utiliser des chemins relatifs sans avoir besoin de modifier le code en fonction de l'application ciblée.
Notez qu'il est bien sûr également possible d'utiliser un chemin absolu du type C:\Documents and Settings\monuser\Mes documents\monimage.jpg.
Ou même un chemin réseau du type \\serveur.fr\images\monimage.jpg.

La fonction de chargement, comme beaucoup de fonctions de clGdiplus, retourne Vrai si elle s'est correctement exécutée.
Il convient de vérifier ce retour pour continuer l'exécution ou afficher un message d'erreur par exemple.

Notez que la fonction LoadFile accepte deux autres paramètres :

• pThumbNail pour charger la miniature EXIF ;
• pIcon pour charger l'icône associée au fichier.

Nous verrons l'utilisation de ces deux paramètres dans le chapitre suivant.

Une fois l'image chargée, on peut commencer par lire ses informations.

Les informations les plus courantes sont :

• le format de l'image ;
• la largeur de l'image ;
• la hauteur de l'image.

Ces informations sont respectivement accessibles par les propriétés ImageFormat (ou ImageFormatText), ImageWidth et ImageHeight.

Dim oGdi As clGdiplus
Set oGdi = New clGdiplus
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "P1010940.jpg") Then
    ' Chargement réussi
    Debug.Print "Format :", oGdi.ImageFormatText
    Debug.Print "Taille :", oGdi.ImageWidth & " x " & oGdi.ImageHeight    
Else
    ' Erreur de chargement
    MsgBox "Erreur au chargement de l'image"
End If

Pour afficher des informations lors du déroulement du code, on utilise Debug.Print pour écrire dans la fenêtre d'exécution.
Si elle n'est pas affichée, vous la trouverez dans le menu Affichage => Fenêtre Exécution.

Le code précédent affiche par exemple :

Format : JPEG
Taille : 3264 x 2448

Le format de l'image est JPEG, ce qui est logique lors d'un chargement de fichier jpg.
Quant à la taille elle est donnée en pixels.

Utilisons maintenant les paramètres supplémentaires de la fonction LoadFile.

Avec pThumbnail pour chargement de la miniature EXIF :

[...]
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "P1010940.jpg", True) Then
[...]

Format : JPEG
Taille : 160 x 120

On a donc chargé une image JPEG de faible taille.
Cette option est très pratique pour rapidement charger et afficher des miniatures de photos.
Les appareils photos utilisent cette miniature EXIF, ainsi que l'explorateur Windows.
Si l'image ne contient pas de miniature EXIF, alors l'image complète est chargée.

Ou avec pIcon pour chargement de l'icône associée :

[...]
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "P1010940.jpg", , GdipLargeIcon) Then
[...]

Format : MemoryBMP
Taille : 32 x 32

On a ici chargé une image de 32 pixels (GdipSmallIcon donnerait une image de 16 pixels).
Notez que ce n'est pas une vrai icone, c'est un format BMP (il y a une conversion de format par clGdiplus lors de la recherche de l'icône associée au fichier).

Pour pouvoir observer les modifications appliquées à l'image, nous allons ajouter une sauvegarde à l'aide la fonction SaveFile.

Sub TestImage()
Dim oGdi As clGdiplus
Set oGdi = New clGdiplus
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "P1010940.jpg") Then
    ' Chargement réussi
    Debug.Print "Format :", oGdi.ImageFormatText
    Debug.Print "Taille :", oGdi.ImageWidth & " x " & oGdi.ImageHeight
    ' Sauvegarde de l'image
    If oGdi.SaveFile(oGdi.ApplicationPath & "tuto.jpg") Then
        Debug.Print "Sauvegarde OK"
    Else
        Debug.Print "Sauvegarde KO"
    End If
Else
    ' Erreur de chargement
    MsgBox "Erreur au chargement de l'image"
End If
End Sub

Ici on sauvegarde une image au format JPEG.
Les différents formats de sauvegarde possibles sont : BMP, EMF, JPEG, PNG, GIF et TIFF.
Si le paramètre pFormat n'est pas précisé (comme c'est le cas ici), le format est déterminé en fonction de l'extension du fichier cible.

Le format BMP est volumineux mais n'altère pas l'image.
Le format JPEG est peu volumineux mais altère l'image.
Le format PNG est un bon compromis pour des images ayant des zones unies (donc généralement pas pour des photographies) et supporte la transparence.
Évitez le format GIF qui ne donne pas de bons résultats avec Gdi+.

Notez la possibilité pour le format JPEG de préciser une qualité de compression entre 0 et 100, à l'aide du troisième paramètre pQuality de la fonction SaveFile.
Par défaut ce paramètre de qualité est à 75.
Ici le paramètre n'est pas précisé, mais aucune compression n'a eu lieu.
L'image n'ayant pas été modifiée, elle n'a pas été altérée.
En regardant de plus près les données dans le fichier (avec un éditeur hexa par exemple) on s'aperçoit qu'il est identique à l'original, à quelques données d'en-tête près.

Maintenant on va modifier l'image.

Les modifications que l'on peut appliquer à l'image sont :

• les transformations (redimensionnement, recadrage, rotation…) ;
• la modification des couleurs ;
• le dessin de formes (rectangle, ellipse…) ou de textes.

Pour illustrer ce chapitre, nous utilisons comme image source le logo de la FAQ Access :

Cette image au format GIF a un fond transparent.
L'enregistrement au format GIF n'étant pas très bien géré par Gdi+ (perte de couleurs), nous allons la sauvegarder dans un autre format.
Si on charge l'image et qu'on la sauvegarde ensuite au format JPEG, on perd la transparence.

Pour obtenir de la transparence, il faut le préciser avec la propriété HasTransparency et sauvegarder dans un format qui gère la transparence (PNG par exemple).

Sub TestImage()
Dim oGdi As clGdiplus
Set oGdi = New clGdiplus
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "faqaccess.gif") Then
    ' Active la transparence
    oGdi.HasTransparency = True
    ' Sauvegarde de l'image au format png
    If oGdi.SaveFile(oGdi.ApplicationPath & "tuto.png") Then
        Debug.Print "Sauvegarde OK"
    Else
        Debug.Print "Sauvegarde KO"
    End If
Else
    ' Erreur de chargement
    MsgBox "Erreur au chargement de l'image"
End If
End Sub

On obtient bien la transparence avec le format PNG.

V-D-1. Transformations▲

Toutes les transformations de ce chapitre créent une nouvelle image.
Si vous travaillez sur un fichier JPEG contenant des données EXIF, celles-ci ne seront recopiées dans la nouvelle image, sauf si vous passez en paramètre pKeepExifData la valeur True.
Si vous modifiez un fichier JPEG, celui-ci sera à nouveau compressé et l'image s'en trouvera altérée (sauf utilisation de SaveTransformFile).

Ces codes de transformation de l'image seront à écrire juste avant l'instruction de sauvegarde (fonction SaveFile).

Le redimensionnement :
Il est possible de modifier la taille de l'image avec les fonctions Resize ou ScaleI.
Resize défini une nouvelle taille en pixels :

 

Sélectionnez

oGdi.Resize 60

Le code précédent redimensionne l'image à 60 pixels en largeur.
La hauteur n'étant pas précisée, elle sera calculée en fonction de la nouvelle largeur pour conserver les proportions de l'image originale.

ScaleI défini un facteur de redimensionnement :

 

Sélectionnez

oGdi.ScaleI 0.5, 0.5

Le code précédent redimensionne l'image à 50% de sa taille sur les deux dimensions.

Le recadrage :

La fonction Crop permet de recadrer l'image :

 

Sélectionnez

oGdi.Crop 50, 40, 80, 70

Le code précédent extrait une portion de l'image originale selon les coordonnées précisées.

La rotation :

La fonction Rotate permet de tourner l'image d'un angle quelconque :

 

Sélectionnez

oGdi.Rotate 30

Le code précédent tourne l'image d'un angle de 30° (vers la droite car positif).

L'image résultante est un rectangle contenant l'image tournée.
Il y a donc des zones non remplies par l'image après rotation.
Ces zones sont noires et transparentes.
La transparence est obtenue car on a précisé la propriété HasTransparency = True et sauvegardé dans un format qui gère la transparence (PNG).

Sont également disponibles des transformations standards pour les rotations multiples de 90° et les retournements (flip) de l'image.

Utilisez pour cela la fonction RotateFlip :

 

Sélectionnez

oGdi.RotateFlip Rotate90FlipY

Le code précédent tourne l'image d'un angle de 90° (vers la droite) et retourne l'image sur l'axe vertical.

Il reste une dernière subtilité pour les images au format JPEG (la plupart des photographies de nos appareils), la transformation sans perte.

En effet si vous souhaitez tourner une photo de 90° par exemple et que vous sauvegardez ensuite l'image, celle-ci est altérée par une compression.
La fonction SaveTransformFile permet de transformer une image et la sauvegarder sans perte.
Les transformations sont toutefois limitées aux rotations multiples de 90° et aux retournements (flip).
De plus la largeur et la hauteur de l'image doivent toutes deux être des multiples de 16 pixels.

 

Sélectionnez

oGdi.SaveTransformFile(oGdi.ApplicationPath & "tuto.jpg", EncoderValueTransformRotate90)

Le code précédent tourne l'image de 90° et la sauvegarde sans altérer les données de l'image.
C'est-à-dire que l'image sera tournée mais il n'y aura pas nouvelle compression JPEG.

V-D-2. Couleurs▲

La fonction ReplaceColor remplace une couleur par une autre dans l'image.

 

Sélectionnez

oGdi.ReplaceColor RGB(164, 192, 239), vbGreen

Le code précédent remplace la couleur de composantes RGB (164, 192, 239) par du vert.
J'ai lu les composantes de la couleur avec un logiciel tiers (msPaint).
On peut également lire la couleur d'un pixel à partir de ses coordonnées (fonction GetPixel).

 

Sélectionnez

oGdi.ReplaceColor oGdi.GetPixel(50, 100), vbGreen

Les troisièmes et quatrièmes paramètres définissent les transparences des couleurs.

On peut donc remplacer par une couleur transparente :

 

Sélectionnez

oGdi.ReplaceColor oGdi.GetPixel(50, 100), vbGreen, , 0

Notez également les paramètres pX1, pY1, pX2, pY2 qui définissent un rectangle qui limite la zone à traiter.

La fonction ApplyColorMatrix applique une matrice de couleur à l'image.

Cette matrice est divisée en 4 paramètres : pRed, pGreen, pBlue et pAlpha.
Chacun de ces paramètres est un tableau de 5 valeurs comprises entre 0 et 1.
Les 4 premières valeurs sont les multiplicateurs respectivement des composantes Rouge, Vert, Bleu et Alpha (transparence) du pixel.
La 5^e valeur est une constante à ajouter (1 étant la valeur maximum).

Pour l'exemple, voici un appel à cette fonction … qui ne fait aucune modification :

Matrice identité

Sélectionnez

oGdi.ApplyColorMatrix Array(1, 0, 0, 0, 0), _
                                Array(0, 1, 0, 0, 0), _
                                Array(0, 0, 1, 0, 0), _
                                Array(0, 0, 0, 1, 0)

En effet :

• le paramètre pRed est Array(1, 0, 0, 0, 0), c'est-à-dire qu'on multiplie la composante rouge par 1 ;
• le paramètre pGreen est Array(0, 1, 0, 0, 0), c'est-à-dire qu'on multiplie la composante verte par 1 ;
• le paramètre pBlue est Array(0, 0, 1, 0, 0), c'est-à-dire qu'on multiplie la composante bleue par 1 ;
• le paramètre pAlpha est Array(0, 0, 0, 1, 0), c'est-à-dire qu'on multiplie la composante alpha par 1 ;

Un autre filtre :

Inverse la transparence

Sélectionnez

oGdi.ApplyColorMatrix Array(1, 0, 0, 0, 0), _
                          Array(0, 1, 0, 0, 0), _
                          Array(0, 0, 1, 0, 0), _
                          Array(0, 0, 0, -1, 1)

Ici on multiplie la composante alpha par -1 et on lui ajoute 1.
Donc pour une couleur transparente, la composante alpha est 0 et est transformée en 1.
Pour une couleur opaque, la composante alpha est 1 et est transformée en 0.
Ce qui était transparent devient opaque et vice-versa.

Et comme on peut combiner les couleurs entre elles, on peut écrire un filtre noir et blanc.

Appliquer un filtre noir et blanc

Sélectionnez

oGdi.ApplyColorMatrix Array(0.222, 0.707, 0.071, 0, 0), _
                                Array(0.222, 0.707, 0.071, 0, 0), _
                                Array(0.222, 0.707, 0.071, 0, 0), _
                                Array(0, 0, 0, 1, 0)

Les nuances de gris sont obtenues en multipliant chacune des composantes de manière à ce qu'il y ait autant de rouge, de vert et de bleu dans chaque pixel.
En effet : 0.222 + 0.707 + 0.071 = 1

On aurait pu utiliser des multiplicateurs 0.333 par exemple, mais les valeurs ci-dessus donnent de meilleurs résultats.

Si les modifications de couleurs souhaitées ne sont pas possibles avec une matrice, vous pouvez utiliser les fonctions SavePixels et LoadPixels.

SavePixels permet de récupérer les couleurs des pixels dans un tableau.
Ce tableau peut alors être modifié puis réinjecté dans l'image avec la fonction LoadPixel.

 

Sélectionnez

' Tableau pour recevoir les pixels
    Dim lPixels() As Byte
    ' Compteurs
    Dim lCptX As Long, lCptY As Long
    ' Lecture des pixels de l'image
    lPixels = oGdi.SavePixels
    ' Boucle sur les pixels
    For lCptX = LBound(lPixels(), 2) To UBound(lPixels(), 2)
        For lCptY = LBound(lPixels(), 3) To UBound(lPixels(), 3)
            ' Composante bleue = lPixels(1, lCptX, lCptY)
            ' Composante verte = lPixels(2, lCptX, lCptY)
            ' Composante rouge = lPixels(3, lCptX, lCptY)
            ' Composante alpha = lPixels(4, lCptX, lCptY)
            If lCptX > lCptY Then lPixels(3, lCptX, lCptY) = 255
        Next
    Next
    ' Réinjecte les pixels dans l'image
    oGdi.LoadPixels lPixels

lPixels est un tableau à 4 dimensions retourné par la fonction SavePixels.
Quel que soit le format de l'image, il y a toujours 3 composantes de couleur (rouge, vert et bleu) et une composante alpha. Si l'image ne gère pas la transparence alors cette composante est ignorée.
Les valeurs vont de 0 à 255.

Il suffit alors de parcourir le tableau comme dans l'exemple ci-dessus et remplacer les valeurs de chaque composante.

Dans l'exemple on remplace la composante Rouge par 255 (c'est-à-dire le plus de rouge possible) pour les pixels dont X est supérieur à Y.
On conserve intact les autres composantes de la couleur.

Une fois les pixels modifiés dans le tableau, on le réinjecte dans l'image avec LoadPixels.
On obtient une image passée dans un filtre rouge sur la moitié en haut à droite :

Si possible, utilisez la fonction ApplyColorMatrix qui est plus rapide.

V-D-3. Dessin▲

Dans ce chapitre nous allons dessiner sur l'image : des rectangles, des ellipses, des polygones, du texte…

Les noms des fonctions de dessin de clGdiplus commencent par Draw, par exemple Drawline, DrawRectangle…

V-D-3-a. Précision : Long ou Single▲

Dans le module de classe clGdiplus, vous trouverez une constante de compilation #Const UseSingle

Cette constante permet de définir la précision des coordonnées utilisées : Long (entier) ou Single (virgule flottante).

Donnez à cette constante la valeur True pour utiliser des coordonnées Single ou False pour des valeurs Long.

C'est-à-dire qu'en précision Long, les coordonnées seront des entiers, alors qu'en précision Single les cordonnées pourront être des nombres avec décimales.

Cependant, l'unité de base d'une image reste le pixel que vous voyez à l'écran.
Il n'est pas possible de dessiner réellement à une position de 10.3 pixels par exemple ; l'utilisation de coordonnées avec décimales induit un mélange des pixels pour faire croire à une précision supérieure.

En précision Single, le dessin est un peu plus lent mais plus précis.

Pour obtenir de bons résultats avec des Single, définissez la propriété SmoothingMode à GdipSmoothingAntialias ou GdipSmoothingHighQuality.

Sinon par défaut l'effet de lissage n'est pas présent.

Sur l'image ci-dessous nous pouvons voir comment Gdi+ procède pour dessiner un carré décalé de un dixième de pixel à chaque image.

À chaque image il y a un mélange entre le noir, le rouge, et le fond blanc.

À la dixième image, le carré est complément décalé de un pixel.

Si on affiche un tel déplacement à l'écran, l'œil ne verra pas de saccades car les positions intermédiaires nous trompent et nous font penser que le carré est déplacé d'un dixième de pixel à chaque image.

Avec des coordonnées entières, le déplacement est beaucoup moins fluide.

Dans le cas de l'affichage d'un défilement à l'écran, il faut évidemment trouver un juste milieu entre fluidité et rapidité.

V-D-3-b. Dessin de formes▲

Commençons par dessiner tout simplement une ligne :

 

Sélectionnez

oGdi.DrawLine 10, 10, 150, 100, vbRed, 10

Ce code dessine une ligne rouge de 10 pixels de large entre les points de coordonnées (10,10) et (150,100).

Le dessin de lignes n'est pas lissé par défaut. Pour appliquer un lissage, définissez la propriété SmoothingMode.

 

Sélectionnez

oGdi.SmoothingMode = GdipSmoothingAntialias
oGdi.DrawLine 10, 10, 150, 100, vbRed, 10 ', GdipDashDASH

Pour chaque dessin à base de lignes, vous pouvez définir plusieurs paramètres à l'appel des fonctions :

• pDash pour lignes pointillées ;
• pAlpha pour des lignes transparentes.

 

Sélectionnez

oGdi.SmoothingMode = GdipSmoothingAntialias
oGdi.DrawLine 10, 10, 150, 100, vbRed, 10, GdipDashDASH

Et voici une ligne pointillée avec une transparence de 150 (sur un maximum de 255).

Et toujours pour chaque dessin à base de lignes, vous pouvez définir plusieurs propriétés (à définir une fois pour toutes les fonctions), notamment :

• LineStart pour le type de départ de ligne (rond, carré, flèche…) ;
• LineEnd pour le type de fin de ligne ;
• LineJoin pour le type de jointure entre chaque ligne.

Par exemple pour une fin de ligne en flèche pleine de taille 3 (c'est-à-dire 3 fois l'épaisseur du trait) :

 

Sélectionnez

oGdi.LineEnd = LineCapArrowAnchor
oGdi.LineArrowLength = 3
oGdi.LineArrowFill = True
oGdi.DrawLine 10, 10, 150, 100, vbRed, 10

LineJoin est inutile dans le cas d'un dessin d'une unique ligne.
Il sera utile pour dessiner des rectangles, des polygones…

Le dessin d'un rectangle est tout aussi facile :

Par exemple pour un rectangle rouge dessiner avec un trait rouge de 10 pixels :

 

Sélectionnez

oGdi.DrawRectangle 10, 10, 150, 100, , vbRed, 10

Il est ensuite facile de colorer l'intérieur du rectangle, de jaune par exemple :

 

Sélectionnez

oGdi.DrawRectangle 10, 10, 150, 100, vbYellow, vbRed, 10

Vous vous en doutez, il est possible de rendre transparent le rectangle :

 

Sélectionnez

oGdi.DrawRectangle 10, 10, 150, 100, vbYellow, vbRed, 10, , 150

Pour dessiner le cadre opaque et l'intérieur transparent, il faut dessiner en deux temps :

• d'abord l'intérieur en précisant une épaisseur de trait à zéro ;
• ensuite le cadre en ne précisant pas de couleur de fond.

Et pour un dessin de rectangle avec des coins arrondis :

 

Sélectionnez

oGdi.DrawRoundRectangle 10, 10, 150, 100, 30, 30, vbYellow, vbRed, 10, , 150

Les paramètres à 30 définissent le rayon des arrondis.

Poursuivons avec le dessin d'une ellipse :

Ce code dessine une ellipse qui s'inscrit dans un rectangle de coordonnées 10, 10, 150, 100.

 

Sélectionnez

oGdi.DrawEllipse 10, 10, 150, 100, TypeEllipseRectangle, vbRed, vbBlue, 5, GdipDashDASH, , , 150

Et le code suivant dessine une ellipse de centre 100, 50 et de rayons 60 et 40.

 

Sélectionnez

oGdi.DrawEllipse 100, 50, 60, 40, TypeEllipseCenter, vbRed, vbBlue, 5, GdipDashDASH, , , 150

Un peu plus complexe avec le dessin d'une courbe de Bézier :

Une courbe de Bézier nécessite au minimum quatre points : le point de départ, deux points de contrôle et un point d'arrivée.

La courbe ne passe pas par les points de contrôle.

 

Sélectionnez

oGdi.DrawCurve Array(20, 60, 50, 10, 80, 100, 150, 60), , vbBlue, 5

Sur cette image, la courbe de Bézier est en bleu.

J'ai ajouté les points en rouge et les lignes joignant ces points en noir.

Notez comme la courbe s'applique à être tangente au segment entre les points.

Il est également possible de dessiner une courbe cardinale :

Cette courbe passe par tous les points définis.

 

Sélectionnez

oGdi.DrawCardinal Array(20, 60, 50, 10, 80, 100, 150, 60), 0.7, , vbBlue, 5

J'ai ici aussi ajouté les points en rouge et les lignes joignant ces points en noir.

Le deuxième paramètre est la tension de la courbe, par défaut égale à 0,5.

Plus la tension est grande, plus la courbe sera arrondie.

Une tension à zéro dessine des segments droits joignant les points.

Pour dessiner un polygone :

 

Sélectionnez

oGdi.DrawPolygon Array(20, 60, 50, 10, 80, 100, 150, 60), , vbBlue, 5

C'est ici que la propriété LineJoin est utile.

Avec par exemple oGdi.LineJoin = LineJoinRound, on obtient des angles arrondis.

V-D-3-c. Dessin de texte▲

Afficher des informations sur l'image peut être utile, la méthode DrawText est faite pour cela.

Le code suivant dessine du texte avec une police de caractères Arial (la police est optionnelle) de taille 20.

Le texte est ici positionné centré en position 100, 50.

Pour modifier l'alignement, modifier les paramètres pAlignHoriz et pAlignVert.

 

Sélectionnez

oGdi.DrawText "Essais gdi+", 20, "Arial", 100, 50

Pour mieux voir le texte vous pouvez ajouter un fond de couleur :

 

Sélectionnez

oGdi.DrawText "Essais gdi+", 20, "Arial", 100, 50, , , , , , , vbRed, 150

Si vous précisez les deux autres coordonnées, le texte est alors positionné dans le rectangle défini.

 

Sélectionnez

oGdi.DrawText "Essais gdi+", 20, "Arial", 50, 50, 150, 100, , , , , , vbRed, 150

J'ai ajouté ici le rectangle de positionnement en noir qui ne s'affiche pas automatiquement.

Notez bien que le surlignage du texte ne se fait que sur la zone écrite et pas sur tout le rectangle.

Le texte étant trop grand, il y a un retour à la ligne automatique.

Si on agrandit le texte (taille 40 par exemple), il ne tient plus dans le rectangle :

Utilisez les propriétés MinTextSize et/ou MaxTextSize pour définir une taille minimale ou maximale du texte.

 

Sélectionnez

oGdi.MinTextSize = 5
oGdi.DrawText "Essais gdi+", 40, "Arial", 50, 50, 150, 100, , , , , vbRed, 150

Le texte est dimensionné pour tenir dans le rectangle.

La propriété LastTextSize contient alors la taille utilisée pour dessiner le texte.

Notez également les propriétés LastTextRight et LastTextBottom qui contiennent la dernière position droite et base du texte et sont utiles pour dessiner du texte à la suite d'un autre.

La méthode DrawText a également des paramètres pour écrire en gras, italique, souligné ou barré.

Cette méthode que nous avons utilisée précédemment injecte l'image dans le contrôle.

Le dessin de l'image est ensuite effectué par l'application Office.

Cette méthode n'est pas très rapide et peut provoquer des clignotements de l'image (plus ou moins visibles selon la configuration).

Comme son nom l'indique, cette méthode est la plus rapide.

Elle se contente de dessiner l'image sur l'écran, à l'emplacement actuel du contrôle ciblé.

Le dessin est alors temporaire ; si vous affichez une autre fenêtre et que vous revenez sur votre formulaire, les modifications apportées à l'image avec RepaintFast ne seront plus là.

On utilisera cette méthode par exemple pour une animation ou pour dessiner sur un événement « sur souris déplacée ».

Cette méthode injecte l'image dans le contrôle mais ne laisse pas l'application Office la redessiner.

Le dessin est ensuite effectué sur l'écran comme avec RepaintFast.

Il n'y a donc pas d'effet de clignotement de l'image, tout en ayant un dessin permanent.

On utilisera cette méthode pour finaliser un dessin par exemple à la fin d'une animation ou sur un événement « sur souris relâchée ».

Préparez un formulaire Access (ou un UserForm) contenant une image nommée image0 et un bouton nommé btnRecadre.

Nous allons devoir agir sur l'image dans différentes procédures ; l'objet oGdi (de type clGdiplus) sera donc créé en entête du module du formulaire pour pouvoir être accessible dans toutes les procédures du formulaire.

Il nous sera utile de conserver également les coordonnées du rectangle de sélection ; on ajoute donc quatre variables gX1, gY1 (coordonnées du premier point) et gX2, gY2 (coordonnées du second point).
Ces variables contiendront des valeurs en pixels, nous les déclarons donc en entiers longs.

Option Explicit
' Objet clGdiplus
Private oGdi As clGdiplus
' Coordonnées de sélection
Private gX1 As Long, gY1 As Long
Private gX2 As Long, gY2 As Long

L'image est chargée dans l'événement « sur chargement » du formulaire Access :

' Sur chargement du formulaire
Private Sub Form_Load()
Set oGdi = New clGdiplus
' Chargement de l'image
If oGdi.LoadFile(oGdi.ApplicationPath & "image3.gif") Then
    ' Conserve l'image initiale
    oGdi.ImageKeep
    ' Injecte l'image dans le contrôle
    oGdi.Repaint Me.Image0
Else
    ' Erreur de chargement
    MsgBox "Erreur au chargement de l'image"
End If
End Sub

Pour un UserForm, utilisez la procédure UserForm_Initialize.

L'image s'affichage alors dans le contrôle, par défaut non redimensionnée et centrée (mode découpage et alignement au centre).

Nous utilisons tout simplement les événements souris du contrôle image.

1. Sur souris appuyée, nous sauvegardons les coordonnées dans gX1 et gY1.
2. Sur souris déplacée, nous sauvegardons les coordonnées dans gX2 et gY2 et dessinons le rectangle sur l'image.
3. Sur souris relâchée, nous sauvegardons les coordonnées dans gX2 et gY2.

IX-C-1. Sur souris appuyée▲

' Sur souris appuyée
Private Sub Image0_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = vbKeyLButton Then
    gX1 = oGdi.CtrlToImgX(X, Me.Image0)
    gY1 = oGdi.CtrlToImgY(Y, Me.Image0)
End If
End Sub

Private Sub Image0_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

IX-C-2. Sur souris déplacée▲

' Sur souris déplacée
Private Sub Image0_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = vbKeyLButton Then
    gX2 = oGdi.CtrlToImgX(X, Me.Image0)
    gY2 = oGdi.CtrlToImgY(Y, Me.Image0)
    Render
    oGdi.RepaintFast Me.Image0
End If
End Sub

Private Sub Image0_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

' Dessine l'image avec le rectangle de sélection
Private Sub Render()
    ' Rétabli l'image initiale
    oGdi.ImageReset
    ' Dessine le rectangle de sélection
    oGdi.DrawRectangle gX1, gY1, gX2, gY2, , vbRed, 1, GdipDashDash
End Sub

IX-C-3. Sur souris relâchée▲

' Sur souris relachée
Private Sub Image0_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = vbKeyLButton Then
    gX2 = oGdi.CtrlToImgX(X, Me.Image0)
    gY2 = oGdi.CtrlToImgY(Y, Me.Image0)
    Render
    oGdi. RepaintNoFormRepaint Me.Image0
End If
End Sub

Private Sub Image0_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

Pour un recadrage, il suffit d'utiliser la méthode Crop sur l'image originale avec en paramètres les coordonnées sauvegardées.

On effectue cette opération sur clic sur le bouton btnRecadre.

' Clic sur bouton de recadrage
Private Sub btnRecadre_Click()
' Rétabli l'image initiale
oGdi.ImageReset
' Recadre l'image
oGdi.Crop gX1, gY1, gX2, gY2
' Dessine l'image recadrée
oGdi.Repaint Me.Image0
End Sub

Un clic sur le bouton « Recadre » remplace l'image originale par l'image recadrée.

Préparez un formulaire Access (ou un UserForm) contenant une image nommée image0.

Nous allons devoir agir sur l'image dans différentes procédures ; l'objet oGdi (de type clGdiplus) sera donc créé en entête du module du formulaire pour pouvoir être accessible dans toutes les procédures du formulaire.

L'utilisation des barres de défilement implique de réagir à des événements ; l'objet oGdi est donc déclaré avec le mot-clé WithEvents.

Option Explicit
' Objet clGdiplus
Private WithEvents oGdi As clGdiplus

Les barres de défilement vont par paire : une horizontale et une verticale.

Elles sont attachées à un objet clGdiplus, et il est possible de gérer plusieurs barres de défilements par objet.

Sur cette image on voit le contrôle image avec un fond blanc.

On a dessiné dessus deux images ayant chacune ses barres de défilement.
On a donc une image principale (celle dessinée dans le contrôle) et deux images secondaires (qui sont dessinées sur l'image principale).
Les barres de défilement sont attachées à l'image principale.

Le texte en bleu sur fond jaune est écrit une seule fois lors de l'initialisation de l'image.
Lors du défilement d'une image, seule cette image et ses barres de défilement sont redessinées.
Le reste de l'image est inchangé.

Mais nous allons commencer en douceur avec une seule image recouvrant tout le contrôle :

X-C-1. Initialisation des images et barres de défilement▲

Dans la procédure d'initialisation (UserForm_Initialize pour un UserForm, Sur ouverture ou Sur chargement pour un formulaire Access), il faut d'abord créer l'image principale et charger l'image secondaire.

Bien qu'on n'ait qu'une seule image, on en utilise deux :

• l'image principale est le reflet de ce qu'on verra à l'écran ;
• l'image secondaire est l'image complète que l'on dessine sur l'image principale.

Ensuite on crée un ensemble de barres de défilement.

 

Sélectionnez

' Sur chargement du formulaire
Private Sub UserForm_Initialize()
' Crée l'objet clGdiplus
Set oGdi = New clGdiplus
' Crée l'image principale de la taille du contrôle Image
If oGdi.CreateBitmapForControl(Me.Image1) Then
    ' Remplit l'image de blanc
    oGdi.Clear vbWhite
    ' Crée une image secondaire
    With oGdi.ImgNew("photo")
        ' Charge le fichier image dans l'image secondaire
        .LoadFile oGdi.ApplicationPath & "P1010940.jpg"
        ' Crée un ensemble de barres de défilement
        oGdi.BarNew
        ' Définit la barre horizontale
        oGdi.BarScaleX .ImageWidth
        ' Définit la barre verticale
        oGdi.BarScaleY .ImageHeight
        ' Définit le contrôle source d'événement
        oGdi.BarObject = Me.Image1
    End With
End If
' Dessine l'image secondaire et les barres
PaintImage
' Dessine l'image sur le contrôle
oGdi.RepaintNoFormRepaint Me.Image1
End Sub
            
' Dessine l'image secondaire et les barres
Private Sub PaintImage()
' Dessine l'image en mode découpage et alignée en haut à gauche
' La position de dessin est fonction des positions de la barre de défilement
oGdi.DrawImg "photo", oGdi.BarStartX, oGdi.BarStartY, , , , GdipSizeModeClip, GdipAlignTopLeft
' Dessine les barres
oGdi.BarDraw
End Sub
            
' Fermeture du formulaire
Private Sub Form_Close()
' Libère l'objet oGdi
Set oGdi = Nothing
End Sub

Dans le code précédent on a trois procédures :

• UserForm_Initialize (ou Form_Load ou Form_Open pour Access) qui s'exécute à l'ouverture du formulaire ;
• PaintImage qui dessine l'image et les barres.
• UserForm_Terminate (ou Form_Unload ou Form_Close pour Access) qui s'exécute à la fermeture du formulaire pour libérer l'objet oGdi.

Il est important, voir indispensable, de libérer l'objet oGdi explicitement à la fermeture du formulaire.

Le fait d'avoir dans l'objet oGdi une référence à un contrôle du formulaire contenant cet objet oGdi (référence circulaire) risque de bloquer l'application lors de sa fermeture.

À l'ouverture du formulaire, on crée l'image principale avec CreateBitmapForControl.

Cette image est de la taille du contrôle image.

Puis on remplit l'image de blanc.

Ensuite on crée une image secondaire, c'est le rôle de la fonction ImgNew : l'image est nommée « photo ».
Cette image est chargée à partir d'un fichier à l'aide de la fonction LoadFile.

Les barres de défilement sont initialisées dans la suite avec les méthodes Bar* :

• BarNew initialise un nouvel ensemble de barres ;
• BarScaleX et BarScaleY définissent ensuite la taille totale du contenu à faire défiler : ici la largeur et la hauteur de l'image ;
• BarObject définit le contrôle qui recevra les événements de défilement.

Ces quatre méthodes sont obligatoires ; c'est le strict minimum pour gérer des barres de défilement.

Enfin on effectue le rendu avec la procédure PaintImage et on dessine l'image principale dans le contrôle avec RepaintNoFormRepaint.

La procédure de rendu PaintImage dessine l'image secondaire et les barres sur l'image principale.

L'image « photo » est d'abord dessinée à une position définie par les propriétés BarStartX et BarStartY.

On la dessine en mode découpage (GdipSizeModeClip) et alignée en haut à gauche (GdipAlignTopLeft).

L'image suivante illustre commence s'effectue ce rendu :

On termine enfin le rendu avec la méthode BardDraw qui dessine les deux barres horizontale et verticale.

X-C-2. Faire défiler l'image▲

Pour que les barres de défilement soient opérationnelles, il faut gérer un événement important : BarOnRefreshNeeded.

Pour créer la procédure gérant cet événement sélectionnez oGdi en haut à gauche de la barre de code, puis BarOnRefreshNeeded à droite.

Notez que l'objet oGdi est disponible dans la liste déroulante car il a été déclaré avec le mot-clé WithEvents.

 

Sélectionnez

' Sur demande de rafraichissement des barres de défilement
Private Sub oGdi_BarOnRefreshNeeded(BarName As String, MouseUp As Boolean)
' Redesine l'image et les barres à nouvelle position
PaintImage
' Test si souris relâchée
If MouseUp Then
    ' Dessin permanent si souris relâchée
    oGdi.RepaintNoFormRepaint Me.Image1
Else
    ' Dessin temporaire si souris appuyée
    oGdi.RepaintFast Me.Image1
End If
End Sub

À chaque déplacement des barres de défilement à l'aide de la souris, cet événement est déclenché.

Il suffit alors d'exécuter la procédure de rendu PaintImage, puis de dessiner l'image principale sur le contrôle.

Pour plus de fluidité, on effectue un dessin temporaire avec RepaintFast si la souris est appuyée.

Lorsque la souris est relâchée, on effectue un dessin permanent.

Tout est maintenant opérationnel, on peut faire défiler l'image en cliquant sur les barres de défilement.

Commençons par placer la première image à un endroit précis de l'image principale.

Pour cela on définit la position des barres de défilement lors de l'appel de BarScaleX et BarScaleY :

• BarScaleX définit les positions gauche et droite ;
• BarScaleY définit les positions hautes et basses.

On reprend le code du chapitre précédent et on modifie ainsi :

' Définit la barre horizontale
        oGdi.BarScaleX .ImageWidth, , 50, 200
        ' Définit la barre verticale
        oGdi.BarScaleY .ImageHeight, , 100, 250

Ici on place notre image et ses barres dans un rectangle de coordonnées (50,100) et (200,250).

Ensuite il faut modifier la procédure de rendu PaintImage pour dessiner l'image au bon endroit, en ajoutant la position des barre de défilement BarLeft et BarTop :

' Dessine l'image secondaire et les barres
Private Sub PaintImage()
' Dessine l'image en mode découpage et alignée en haut à gauche
' La position de dessin est fonction des positions de la barre de défilement
' On ajoute la position des barres de défilement pour afficher l'image au bon endroit
oGdi.DrawImg "photo", oGdi.BarLeft + oGdi.BarStartX, oGdi.BarTop + oGdi.BarStartY, , , , GdipSizeModeClip, GdipAlignTopLeft
' Dessine les barres
oGdi.BarDraw
End Sub

Mais il y a un petit problème : l'image « déborde » :

Il faut en effet limiter le dessin pour qu'il ne dépasse pas.

La méthode DrawClipRectangle nous permet de définir sur l'image principale un rectangle dans lequel sera limité le dessin : les zones extérieures à ce rectangle ne seront pas dessinées.

Puis on annule cette limitation après avoir dessiner l'image secondaire avec la méthode DawClipRegion.

Pour faire la finition, on ajoute le dessin d'un rectangle qui encadre l'image et ses barres.

' Dessine l'image secondaire et les barres
Private Sub PaintImage()
' Limite le dessin à la zone souhaitée
oGdi.DrawClipRectangle oGdi.BarLeft, oGdi.BarTop, oGdi.BarRight, oGdi.BarBottom
' Dessine l'image en mode découpage et alignée en haut à gauche
' La position de dessin est fonction des positions de la barre de défilement
' On ajoute la position des barres de défilement pour afficher l'image au bon endroit
oGdi.DrawImg "photo", oGdi.BarLeft + oGdi.BarStartX, oGdi.BarTop + oGdi.BarStartY, , , , GdipSizeModeClip, GdipAlignTopLeft
' Retire la limite de dessin
oGdi.DrawClipRegion = ""
' Dessine les barres
oGdi.BarDraw
' Dessine en rectangle qui encadre l'image et ses barres
oGdi.DrawRectangle oGdi.BarLeft, oGdi.BarTop, oGdi.BarRight, oGdi.BarBottom
End Sub

Et voici le résultat :

Nous souhaitons maintenant ajouter une deuxième image.

Dans le code d'initialisation, il faut créer deux images secondaires et deux ensembles de barres de défilement :

' Sur chargement du formulaire
Private Sub UserForm_Initialize()
' Crée l'objet clGdiplus
Set oGdi = New clGdiplus
' Crée l'image principale de la taille du contrôle Image
If oGdi.CreateBitmapForControl(Me.Image1) Then
    ' Remplit l'image de blanc
    oGdi.Clear vbWhite
    ' Ecrit un texte en haut
    oGdi.DrawText "Tutoriel barres de défilement", 20, , 0, 0, oGdi.ImageWidth - 1, 100, , , vbBlue, , vbYellow, 150    ' Crée une image secondaire
    With oGdi.ImgNew("photo1")
        ' Charge le fichier image dans l'image secondaire
        .LoadFile oGdi.ApplicationPath & "P1010940.jpg"
        ' Crée un ensemble de barres de défilement
        oGdi.BarNew .ImgName
        ' Définit la barre horizontale
        oGdi.BarScaleX .ImageWidth, , 50, 200, .ImgName
        ' Définit la barre verticale
        oGdi.BarScaleY .ImageHeight, , 100, 250, .ImgName
        ' Dessine l'image secondaire et les barres
        PaintImage .ImgName
    End With
    ' Crée une image secondaire
    With oGdi.ImgNew("photo2")
        ' Charge le fichier image dans l'image secondaire
        .LoadFile oGdi.ApplicationPath & "P1020363.jpg"
        ' Crée un ensemble de barres de défilement
        oGdi.BarNew .ImgName
        ' Définit la barre horizontale
        oGdi.BarScaleX .ImageWidth, , 250, 400, .ImgName
        ' Définit la barre verticale
        oGdi.BarScaleY .ImageHeight, , 100, 250, .ImgName
        ' Dessine l'image secondaire et les barres
        PaintImage .ImgName
    End With
    ' Définit le contrôle source d'événement (un seul contrôle pour les deux images)
    oGdi.BarObject = Me.Image1
End If
' Dessine l'image sur le contrôle
oGdi.RepaintNoFormRepaint Me.Image1
End Sub

Nous ajoutons donc deux images secondaires « photo1 » et « photo2 ».

Pour chacune de ces images, on ajoute un ensemble de barres de défilement.
Dans les méthodes BarNew, BarScaleX et BarScaleY, il faut préciser un nom de barre.
Pour faciliter la suite on utilise le nom de chaque image (.ImgName) pour nommer chaque barre « photo1 » et « photo2 ».

Ensuite on dessine chacune des deux barres en exécutant la procédure de rendu PaintImage avec en paramètre le nom de l'image (nous allons ajouter ce paramètre ensuite dans la procédure).

Par contre BarObject n'est défini qu'une seule fois : il n'y a qu'un contrôle pour les deux images.

Notez qu'on en a profité pour ajouter un appel à DrawText afin d'écrire du texte en haut de l'image principale.

La procédure de rendu doit également être mise à jour pour dessiner une des deux images en ajoutant un paramètre pImage.

' Dessine l'image secondaire et les barres
Private Sub PaintImage(pImage As String)
' Limite le dessin à la zone souhaitée
oGdi.DrawClipRectangle oGdi.BarLeft(pImage), oGdi.BarTop(pImage), oGdi.BarRight(pImage), oGdi.BarBottom(pImage)
' Dessine l'image en mode découpage et alignée en haut à gauche
' La position de dessin est fonction des positions de la barre de défilement
' On ajoute la position des barres de défilement pour afficher l'image au bon endroit
oGdi.DrawImg pImage, oGdi.BarLeft(pImage) + oGdi.BarStartX(pImage), oGdi.BarTop(pImage) + oGdi.BarStartY(pImage), , , , GdipSizeModeClip, GdipAlignTopLeft
' Retire la limite de dessin
oGdi.DrawClipRegion = ""
' Dessine les barres
oGdi.BarDraw pImage
' Dessine en rectangle qui encadre l'image et ses barres
oGdi.DrawRectangle oGdi.BarLeft(pImage), oGdi.BarTop(pImage), oGdi.BarRight(pImage), oGdi.BarBottom(pImage)
End Sub

DrawImg dessinera l'image passée en paramètre.

Les méthodes Bar* doivent toutes préciser le nom de la barre de défilement concernée.
Comme on a nommé nos barres comme nos images c'est facile.

Pour terminer on met à jour l'événement BarOnRefreshNeeded.

Celui-ci possède un paramètre BarName qui est le nom de la barre de défilement déplacée.

Il suffit donc de passer ce nom en paramètre de la procédure de rendu :

' Sur demande de rafraichissement des barres de défilement
Private Sub oGdi_BarOnRefreshNeeded(BarName As String, MouseUp As Boolean)
' Redesine l'image et les barres à nouvelle position
PaintImage BarName
' Test si souris relâchée
If MouseUp Then
    ' Dessin permanent si souris relâchée
    oGdi.RepaintNoFormRepaint Me.Image1
Else
    ' Dessin temporaire si souris appuyée
    oGdi.RepaintFast Me.Image1
End If
End Sub

C'est enfin terminé :