Editeur de liste d'images (FireMonkey)

De RAD Studio
Aller à : navigation, rechercher

Remonter à Editeurs de propriétés - Index

Utilisez l'éditeur de liste d'images à la conception pour ajouter des bitmaps et des icônes à une liste d'images.

Vous pouvez regarder la vidéo expliquant comment utiliser l'éditeur de liste d'images pour créer et modifier des listes d'images (EN).

Ouverture de l'éditeur de liste d'images

  1. Cherchez un objet TImageList dans le Concepteur de fiches ou la vue Structure.
  2. Effectuez l'une des actions suivantes :
    • Double-cliquez sur l'objet TImageList.
    • Cliquez avec le bouton droit sur l'objet TImageList et sélectionnez Editeur de liste d'images dans le menu contextuel.
L'éditeur de liste d'images s'ouvre pour modifier l'objet TImageList sélectionné.

Editeur de liste d'images

Vous pouvez utiliser l'exemple ImageList pour tester toutes les fonctions et fonctionnalités présentées dans cette rubrique.

Volet Liste d'images

Le volet Liste d'images présente un aperçu de toutes les images de la collection Destination de la liste d'images en cours. Les numéros situés au-dessus des aperçus d'images indiquent les index (les positions), en partant de zéro, des images au sein de la liste d'images. Vous pouvez déplacer un aperçu d'image à une nouvelle position pour changer la position de l'image dans la collection Destination de la liste d'images.

Sélectionnez un aperçu d'image pour afficher l'image dans le volet Image sélectionnée.

Le volet Liste d'images fournit les commandes suivantes qui peuvent être activées en utilisant des boutons, icônes d'outils et commandes du menu contextuel.

Commande Conseil Description
Ajouter Ajouter des images du fichier dans la liste d'images (Ctrl+O)

Ouvre la boîte de dialogue Ajouter des images qui vous permet de sélectionner une image à ajouter dans la liste d'images. Vous pouvez effectuer une sélection parmi des formats de fichier graphique tels que .bmp, .png, .jpeg, .gif, .tiff, etc.

La boîte de dialogue invitant à taper le nom du nouvel élément source s'ouvre ; par défaut, elle affiche le nom du fichier sélectionné. Si la taille d'une image à ajouter est un multiple de la largeur et de la hauteur spécifiées, un message vous demande si l'éditeur de liste d'images doit diviser l'image en plusieurs images. Cela est particulièrement utile pour les bitmaps de la barre d'outils qui sont généralement composés de plusieurs petites images affichées dans un ordre précis et stockées sous la forme d'un bitmap plus grand.

L'image ajoutée apparaît en surbrillance dans la liste d'aperçus d'images du volet Liste d'images et s'affiche dans le volet Image sélectionnée. Notez que l'image est ajoutée dans la collection Source et s'affiche dans le volet Sources des images.

La boîte de dialogue Ajouter des images vous permet de sélectionner et d'ajouter plusieurs images à la fois. Vous pouvez ajouter plusieurs fichiers ayant des noms correspondant au masque suivant : NN.eee, FileNAme.eee, FileNAmeNN.eee, FileName_NN.eee ou [email protected], où eee fait référence à l'extension de fichier graphique et NN à une valeur entière quelconque.

Remarque : Vous pouvez ajouter plusieurs fichiers ayant le même nom de fichier (FileName). En effet, l'éditeur de liste d'images les interprète comme une seule image source ayant différentes échelles. Par exemple, si vous ajoutez en une seule fois trois images ayant des tailles physiques différentes nommées test_16.png, test_24.png et test_32.png dans le volet Liste d'images, les images sont ajoutées à la collection Source comme une seule image source appelée test et ayant trois échelles différentes. Dans ce cas, l'image la plus petite a l'échelle 1.0. Les images ont l'échelle 1.5, 2, 3, etc. Cliquez sur l'image test dans le volet Sources des images pour voir les différentes échelles de l'image test.
Supprimer Supprimer l'élément sélectionné de la liste d'images

Retire l'image sélectionnée du volet Liste d'images (à partir des images dans la collection Destination).
Notez que l'image n'est pas retirée de la collection Source affichée dans le volet Sources des images.

Exporter Exporte la liste d'images dans un fichier

Ouvre la boîte de dialogue Exporter des images qui vous permet d'enregistrer la liste d'images en cours dans un fichier. Vous pouvez effectuer une sélection parmi des formats de fichier graphique tels que .bmp, .png, .jpeg, .gif, .tiff, etc. Toutes les images de la liste d'images en cours sont collées ensemble afin d'être enregistrées dans un fichier spécifié. Chaque image est enregistrée avec la largeur et la hauteur spécifiées.

Largeur
Hauteur

Les valeurs des champs Largeur et Hauteur sont utilisées lors les commandes Ajouter et Exporter (voir la description de ces commandes).

New.png
Nouvelle image
Ajouter une nouvelle image à la liste d'images

Ajoute une image sélectionnée dans les sources des images ou dans une couche sélectionnée dans l'image sélectionnée.
L'image ajoutée apparaît en surbrillance dans la liste d'aperçus d'images. Si vous avez ajouté plusieurs images, leurs numéros ont des valeurs séquentielles dans la liste d'images.

Volet Image sélectionnée

Le volet Image sélectionnée présente des informations détaillées sur l'image de destination sélectionnée dans le volet Liste d'images. (Voir TCustomDestinationItem.Layers.)

Pour afficher une autre image, cliquez sur un autre aperçu d'image dans le volet Liste d'images.

Le volet Image sélectionnée fournit les commandes suivantes qui peuvent être activées en utilisant des boutons, icônes d'outils et commandes du menu contextuel.

Commande Conseil Description
New.png
Nouvelle couche
Ajouter une nouvelle couche dans l'image sélectionnée

Ajoute une nouvelle couche dans le volet Image sélectionnée. (Voir TLayer.)
Lorsqu'une image est sélectionnée dans le volet Sources des images, cette commande ajoute alors une nouvelle couche contenant l'image (avec ses coordonnées et sa taille) sélectionnée dans le volet Sources des images.
Lorsqu'une couche est sélectionnée dans le volet Image sélectionnée, cette commande crée alors une copie de la couche sélectionnée.

Action delete.jpg
Supprimer la couche
Supprimer la couche sélectionnée de l'image sélectionnée

Supprime la couche sélectionnée du volet Image sélectionnée.


Arrow up.jpg

Arrow down.jpg
Déplacer vers le haut la couche sélectionnée dans l'image sélectionnée

Déplacer vers le bas la couche sélectionnée dans l'image sélectionnée

Avec ces flèches, vous pouvez changer l'ordre des couches.
Notez que l'image d'une couche de numéro supérieur est dessinée sur les images dessinées par les couches précédentes en écrasant les parties de recouvrement de l'image générée.

Afficher l'éditeur

La sélection de la commande Afficher l'éditeur (à partir du menu contextuel) ou un double-clic sur une image a pour effet d'activer l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution dans la couche sélectionnée.


Le volet Image sélectionnée est utilisé pour former des images utilisées dans la liste d'images. Chaque image est une somme de sous-images placées dans les couches, une sous-image dans chaque couche. Chaque sous-image est un bitmap multi-résolution. Vous pouvez manipuler les couches d'images. Le volet Image sélectionnée présente les différentes couches. Chaque couche affiche un bitmap multi-résolution. Double-cliquer sur un bitmap multi-résolution active l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution.

Chaque couche est affichée dans un volet qui présente la sous-image et les propriétés suivantes :

  • Le bouton de liste Nom d'image où vous pouvez sélectionner le nom du bitmap multi-résolution à utiliser dans cette couche.
  • Les paramètres Gauche, Haut, Largeur et Hauteur du rectangle (pour l'échelle 1) utilisés pour dessiner le bitmap multi-résolution de cette couche. Tous ces rectangles s'intersectent avec le rectangle d'image résultant. Les bitmaps multi-résolution de toutes les couches sont dessinés dans les rectangles correspondants en écrasant les parties de recouvrement des bitmaps multi-résolution des couches inférieures.

Si un nom spécifié n'existe pas ou si le rectangle spécifié ne s'intersecte pas avec le rectangle de l'image, rien n'est alors dessiné et aucune exception n'est déclenchée. Vous pouvez lors de l'exécution définir l'image appropriée, et les images de tous les contrôles seront automatiquement mises à jour en utilisant cette image.

Typiquement, chaque image contient une seule couche. Toutefois, vous souhaiterez dans certains cas utiliser plusieurs couches pour former une image. Par exemple, il peut être pratique d'utiliser une couche distincte contenant une image représentant 'un texte barré' ou une 'loupe'. Cette couche peut alors être placée sur des couches contenant d'autres images ; par exemple, sur une couche contenant une 'liste d'images' ou une 'enveloppe'. Les deux couches peuvent alors former une image combinée, telle qu'une image 'liste d'images barrée' ou 'loupe sur enveloppe'.

La figure suivante illustre l'utilisation de deux couches pour former une image Liste d'images barrée :

L'utilisation de Deux couches produit l'image Liste d'images barrée

Comparez l'image Liste d'images barrée à l'image obtenue par dislocation du rectangle de la couche supérieure, contenant l'image 'Texte barré', avec Gauche = 5 et Haut = 6.

Cette dislocation est présentée dans la figure suivante :

Deux couches disloquées produit l'image Liste d'images marquée d'une croix décalée

Si le rectangle affiché dans le volet Couche couvre (montre) uniquement la partie du bitmap multi-résolution entier utilisée par la couche, ce rectangle peut alors être déplacé sur l'image entière. Pour illustrer cette fonctionnalité, chargez une grande image dans une couche.

Par exemple, chargez la grande image My 1 avec Largeur = 80 et Hauteur = 32 :

My_1_Picture

Si vous définissez Largeur = 16 et Hauteur = 16 pour réduire la taille du rectangle affiché dans le volet Couche, ce dernier ressemble à ceci :

My_1_Picture avec le rectangle redimensionné

Pour illustrer ce qui se produit, double-cliquez sur un bitmap multi-résolution dans un volet Couche pour activer l'éditeur MultiResBitmap. L'éditeur MultiResBitmap présente le bitmap multi-résolution entier. Dans ce bitmap, vous apercevez le rectangle sélectionné qui correspond au rectangle affiché dans la couche, et voyez que ce rectangle montre la même image que dans la couche :

Editeur MultiResBitmap pour My_1_Picture

A l'aide de la souris, vous pouvez déplacer et redimensionner le rectangle sélectionné comme une fenêtre d'affichage sur le bitmap entier. Voyez quelle partie du bitmap apparaît dans le volet Couche. Si vous placez le pointeur de la souris dans le volet Couche, vous pouvez alors déplacer le rectangle affiché en utilisant 'CTRL + molette de la souris' ou en cliquant sur les flèches gauche et droite dans la partie supérieure du volet Couche.

Volet Sources des images

Le volet Sources des images affiche toutes les images dans la collection Source de la liste d'images en cours. Ces images sont utilisées pour construire des images dans la collection Destination (affichées dans le volet Liste d'images).

Notez que lorsque vous supprimez un aperçu d'image de la collection Liste d'images, l'image source n'est pas supprimée dans la collection Sources des images. Utilisez le bouton d'outil Action delete.jpg Supprimer la source pour supprimer un élément de la collection Sources des images.

Icône Conseil Description
New.png
Nouvelle source
Ajouter un nouvel élément dans Sources des images

Ce bouton montre le message demandant le nom du nouvel élément source puis active l'éditeur MultiResBitmap. A l'aide de l'éditeur MultiResBitmap, vous pouvez ajouter plusieurs images optimisées pour différentes échelles. Lors de l'exécution, une application sélectionne l'image ayant l'échelle la plus appropriée.

Action delete.jpg
Supprimer la source
Supprimer l'élément sélectionné de Sources des images

Supprime l'élément sélectionné de la collection Sources.


Arrow up.jpg


Arrow down.jpg
Déplacer vers le haut l'élément sélectionné dans Sources des images

Déplacer vers le bas l'élément sélectionné dans Sources des images

A l'aide de ces flèches, vous pouvez déplacer vers le haut et vers le bas les images source, en changeant leur ordre. Vous pouvez utiliser ces flèches à votre convenance.

Broom.png
Effacer
Effacer les informations de conception

Les noms des fichiers à partir desquels les images source ont été chargées, les tailles utilisateur des images et les couleurs transparentes sont uniquement utilisés à la conception. Toutefois, ces paramètres sont stockés par défaut dans le fichier fmx. L'icône Broom.png
Effacer supprime ces informations facultatives du fichier fmx pour toutes les images source.

Afficher l'éditeur

La sélection de la commande Afficher l'éditeur (à partir du menu contextuel) ou un double-clic sur une image a pour effet d'activer l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution sélectionné. (Voir TLayer.MultiResBitmap.)

Boutons

L'éditeur de liste d'images contient les boutons suivants.

Bouton Description
OK

Applique vos modifications et ferme l'éditeur. (Ctrl+Entrée).

Appliquer

Applique vos modifications sans fermer l'éditeur.

Aide

Affiche cette page.

Annuler

Ferme l'éditeur sans appliquer les modifications.

Voir aussi