Les composants affichant des images dans FireMonkey

Il existe plusieurs façons d'incorporer des images (photographies, dessins, ...) aux formats habituels (JPG, PNG) dans FireMonkey. Chaque composant a cependant ses spécificités qu'il est préférable de connaître avant de les utiliser.

Le premier réflexe qu'on a en tant que développeur est d'utiliser un composant TImage pour afficher une image dans une fiche, mais voilà, est-ce le plus pertinent dans un environnement multiplateforme aux écrans à résolution variable ?

Je vous propose une sélection des composants disponibles en standard avec Delphi et leurs caractéristiques principales avec le lien vers la page de documentation correspondante sous Delphi 10.2 Tokyo.

TImage

Le stockage d'une image dans TImage se fait à travers la propriété MultiResBitmap depuis le concepteur de fiches ou par programmation. Ce composant gère donc la profondeur des pixels en fonction des caractéristiques de l'écran utilisé.

On peut également accéder à sa propriété Bitmap par programmation si on ne désire pas gérer la version multirésolution.

Des événements interactifs sont disponibles comme le classique onClick.

La documentation du TImage est disponible sur cette page.

TImageControl

Ce composant ne gère pas la multirésolution des images. Il ne possède qu'une propriété Bitmap modifiable dans le concepteur de fiches ou par programmation.

Par défaut il possède un cadre délimitant sa zone. Il n'est pas possible de le retirer sans bidouiller le style d'affichage.

Les événements interactifs sont disponibles.

La documentation du TImageControl est disponible sur cette page.

TImageViewer

Comme pour TImageControl, le TImageViewer ne gère pas la multirésolution. On peut changer l'image qui s'y affiche à travers sa propriété Bitmap. Il est également délimité par un cadre et possède une couleur de fond par défaut.

Contrairement aux autres composants d'affichage d'images, celui-ci est un conteneur et agit comme tel : il permet de gérer le zoom sur l'image avec la propriété BitmapScale et le positionnement de l'image à l'intérieur de sa zone. Il se comporte un peu comme une TScrollBox qui ne contiendrait qu'une image.

Ce composant gère automatiquement la molette de la souris pour du zoom-in / zoom-out mais on peut le désactiver grâce à ses propriétés DisableMouseWheel et MouseScaling.

Les événements sont gérés au niveau du conteneur. En cas de onClic c'est donc à nous de nous assurer que l'image est bien dans la zone cliquée si on veut un clic sur une zone précise de celle-ci et non globalement au niveau du TImageViewer.

La documentation du TImageViewer est disponible sur cette page.

TImage3D

Ce composant ne fonctionne que sur un TLayout3D. Il permet d'afficher une image avec sa propriété Bitmap et gère les événements interactifs classiques.

La documentation du TImage3D est disponible sur cette page.

TGlyph

Le TGlyph est le seul composant du lot (jusqu'à la version 10.2 Tokyo) à pouvoir s'interfacer avec une TImageList (le composant de liste d'images gérant la mutltirésolution).

Pour y afficher une image il faut donc l'avoir stockée dans un composant TImageList (idéalement isolé dans un TDataModule) et associer ses propriétés ImageList et ImageIndex au visuel désiré.

Du côté des événements c'est le parent pauvre du lot. Bizarrement pas de onClick mais on peut gérer le onTap (sur les appareils tactiles) et les mouvements avec l'événement onGesture. Il peut donc servir à afficher des images non utiles à l'interface utilisateur comme des logos ou des visuels de présentation.

La documentation du TGlyph est disponible sur cette page.

Les formes et autres composants

Ce qui est bien avec le framework FireMonkey c'est que tout étant graphique tout est susceptible de pouvoir afficher une image.

On peut en effet modifier tout composant et lui ajouter des visuels grâce à l'éditeur de styles mais on peut même aller encore plus loin en utilisant la propriété Fill de type TBrush qui se trouve dans un grand nombre de composants à commencer par la fiche elle-même (TForm).

Le type TBrush possède en effet une propriété Bitmap qui permet d'associer une image directement à quasiment tout composant graphique. Par contre ils ne gèrent pas la multirésolution sur l'image associée. Cela pourrait changer dans le futur.

Grâce à cette propriété on peut modifier l'affichage du background de nombreux composants : la fiche et les composants de formes (TRectangle, TRoundRect, TEllipse, TCircle, TPie, ...) sont les premiers visés.

Cela permet par exemple d'afficher sous forme de rond une partie d'une image (idéalement carrée au départ) comme on le voit régulièrement pour les photos de profils sur les réseaux sociaux. En y associant des filtres et effets on peut obtenir tout un tas de choses qu'il aurait été très compliqué de gérer en VCL et si en plus on met ça sous forme de DLL, on peut importer dans un projet Windows VCL pur des images sympa générées par un morceau de FMX... mais je m'égare.

J'espère que ce tour d'horizon des composants affichant des images dans FireMonkey vous sera utile lorsque vous aurez besoin de faire un choix.


Mug Toucan DX dans la baie de RioMug Toucan DX dans la baie de Rio