Unterstützen von High-DPI-Bildern mit den Komponenten TImageCollection und TVirtualImageList
Inhaltsverzeichnis
Übersicht
Mit RAD Studio können Sie skalierende High-DPI- und Bilder mit Mehrfachauflösung in Ihre Windows-VCL-Anwendungen einfügen, indem Sie die Komponente TImageCollection in Kombination mit der Komponente TVirtualImageList verwenden.
Diese verbundenen Komponenten trennen das Konzept einer Sammlung von Bildern (in der jedes logische Bild mehrere Auflösungen haben kann) von einer Liste mit Bildern in einer einzigen bestimmten Größe, die für ein Steuerelement verwendet wird. Kurz gesagt, laden Sie mehrere Auflösungen der Bilder ein eine Bildersammlung. Die Bilderliste enthält einen Satz Bilder aus einer Bildersammlung und stellt sie in einer bestimmten Größe dar (z. B. 16x16.) Die Größer der Bilder wird stufenlos geändert und skaliert, und die tatsächliche Auflösung der Darstellung der Bilderliste kann basierend auf DPI geändert werden. TVirtualImageList ist vollständig kompatibel mit herkömmlichen Bilderlisten und ein 1:1-Ersatz dafür, einschließlich der Bereitstellung eines HIMAGELIST-Handle. Die Komponente kann von VCL-Steuerelementen und von Code verwendet werden, die Bilderlisten über die Windows-API aufrufen.
Bilder unterstützen Alphakanäle, und Sie können PNGs in die Bildersammlung laden. Sie können auch farbcodierte, transparente Bitmaps im alten Stil laden.
Verwenden der Komponente TImageCollection
TImageCollection ermöglicht Ihnen, über die Klasse TWICImage Bilder mit nativen Formaten zu speichern, zu skalieren und zu zeichnen.
Jedes Bild in der Sammlung kann eine Reihe von Versionen mit unterschiedlichen Größen haben. Die Komponente wählt die optimale Größe für die Skalierung aus oder verwendet ein Bild, wenn die verfügbare Größe der erforderlichen Größe entspricht. Die Komponente kann auch eine skalierte 32-Bit-Version des TBitmap mit einem Alphakanal erstellen, das direkt in TCustomImageList eingefügt werden kann.
TImageCollection ist von der Klasse TCustomImageCollection abgeleitet (Unit Vcl.BaseImageCollection), die die Basismethoden für eine Sammlung definiert.
Editor für Bildersammlungskomponenten
Um den Editor für Bildersammlung zu öffnen, ziehen Sie eine TImageCollection-Komponente auf das Formular oder Datenmodul und doppelklicken im Formular auf die Komponente oder klicken mit der rechten Maustaste und wählen aus dem Kontextmenü die Option Sammlungseditor anzeigen… aus. Sie können auch im Objektinspektor auf die Eigenschaft TImageCollection.Images doppelklicken.
Im Fenster Editor für Bildersammlung können Sie der Komponente Bilder hinzufügen und sie in Kategorien anordnen.
Klicken Sie auf Hinzufügen, um das Dialogfeld "Öffnen" anzuzeigen und navigieren Sie zu dem Ordner, in dem Ihre Bilder gespeichert sind. Sie können Bilder einzeln hinzufügen oder mehrere Bilder aus einem Ordner auswählen und sie gleichzeitig hinzufügen. Im "Editor für Bildersammlung" werden die Bilder in alphabetischer Reihenfolge angezeigt.
Aktivieren Sie das Kontrollkästchen Größe im Dateinamen prüfen, um beim Hinzufügen von Bildern nach Informationen zur Bildgröße (Dimensionen) im Dateinamen zu suchen. Sie können aus den Dropdown-Optionen auch ein Trennzeichen für die Bildgröße auswählen. Dadurch werden automatisch mehrere Auflösungen desselben Bilds mit bis auf die Pixel-Größe gleichem Dateinamen erkannt und als mehrere Auflösungen eines einzelnen Bilds der Sammlung hinzugefügt.
Die Einstellung Trennzeichen für Bildgröße steuert, wie Bildgrößen analysiert werden, und enthält Optionen für allgemeine Dateinamenskonventionen für Symbol und Bildgröße.
Um Quellen für ein bestimmtes Bild hinzuzufügen, wählen Sie das Bild in der Sammlung aus und klicken unten im Fenster auf Hinzufügen…. Dadurch wird das Dialogfeld "Öffnen" angezeigt, in dem Sie die Bilddatei auswählen können.
Derzeit werden Kategorien nur für die Organisation verwendet. (In VCL-Steuerelementen wird auf Bilder weiterhin nur per Index verwiesen.)
Um Bilder in einer Kategorie anzuordnen, wählen Sie die Bilder aus und klicken auf Kategorie festlegen.
Mit der Schaltfläche Löschen im oberen Abschnitt des Fensters entfernen Sie bestimmte Bilder aus der Sammlung und mit der Schalfläche Alle löschen entfernen Sie alle Bilder aus der Sammlung.
Nach dem Hinzufügen von Bildern zu der Sammlung können Sie Bilder auswählen und die folgenden Aktionen ausführen:
- Ändern Sie den Namen eines Bildes.
- Weisen Sie einem Bild eine benutzerdefinierte Beschreibung zu.
- Zuweisen eines Indexwerts, um die Reihenfolge der Bilder in der Sammlung zu ändern
- Hinzufügen alternativer Quellen für dasselbe Bild
- Löschen einer Quelle für das Bild
- Ersetzen einer vorhandenen Bildquelle
- Ändern Sie index[name] und übernehmen Sie die Änderungen (VirtualImageList aktualisiert Images nach index[name] mit name[index] aus der Sammlung).
- Ändern Sie name[index] und übernehmen Sie die Änderungen (VirtualImageList aktualisiert Images nach name[index] mit index[name] aus der Sammlung).
- Speichern eines Bilds unter einem anderen Namen (Speichern unter…)
Laden einer vorhandenen TImageList in TImageCollection
Zur Unterstützung der Konvertierung von Bilderlisten im alten Stil in das neue System können Sie Bilder aus alten TImageList-Komponenten in eine neue TImageCollection laden. Wenn in verschiedenen TImageList-Komponenten unterschiedliche Größen desselben Bilds vorhanden sind, können Sie beide gleichzeitig laden; die Bilder werden zusammengeführt, sodass die Bildersammlung mehrere Auflösungen desselben Bilds enthält.
Um Bilder aus TImageList in TImageCollection zu laden, müssen sich beide Komponenten auf demselben Formular befinden.
Führen Sie die folgenden Schritte aus, um Bilder aus der auf dem Formular vorhandenen TImageList in TImageCollection zu laden:
- Klicken Sie mit der rechten Maustaste auf dem Formular auf die Komponente TImageCollection und wählen Sie aus dem Kontextmenü die Option Aus vorhandener TImageList laden… aus.
- Wählen Sie die TImageList aus, die Sie laden möchten, und weisen Sie eine Kategorie für die Bilder zu. Sie können mehrere TImageList-Komponenten auswählen. Das ist insbesondere beim Laden mehrerer Auflösungen für dasselbe Bild hilfreich, die zuvor in mehreren Bilderlisten gespeichert wurden.
- Klicken Sie auf Nach Reihenfolge laden, um die Bilder in der Reihenfolge der Bilderlisten zu laden.
- Klicken Sie auf Mit Zusammenführung laden, um unterschiedliche Bildquellen aus verschiedenen Bilderlisten zu laden. Beim Laden mit Zusammenführung müssen die Bilderlisten dieselbe Anzahl an Bilddateien und unterschiedliche Bildgrößen enthalten.
- Klicken Sie auf Sammlung anzeigen…, um zu überprüfen, wie die Bilder in den Komponente TImageCollection geladen wurden, ohne das Dialogfeld zu schließen.
- Klicken Sie auf OK, um die Einstellungen zu übernehmen und das Dialogfeld zu schließen.
- Klicken Sie auf Übernehmen, um eine bestimmte Gruppe von Änderungen zu übernehmen und mit den Konfigurationseinstellungen fortzufahren.
- Klicken Sie auf Abbrechen, um das Dialogfeld zu schließen und alle Änderungen an der Bildersammlung zu verwerfen.
Verwenden der Komponente TVirtualImageList
Mit TVirtualImageList können Sie eine Bilderliste generieren und Änderungen an allen Bildern gleichzeitig vornehmen.
TVirtualImageList verwendet TCustomImageCollection (TImageCollection) zum Generieren einer dynamischen Liste mit internen Bildern.
Für TVirtualImageList können Sie benutzerdefinierte Breite- und Höhe-Eigenschaften festlegen und die Komponente skaliert alle Bilder automatisch. Wenn sich die DPI ändern, werden die Bilder skaliert, damit sie auf hochauflösenden Displays korrekt angezeigt werden.
VCL-Steuerelemente können die Komponente TVirtualImageList ohne Änderungen verwenden, weil sie von TCustomImageList abgeleitet ist.
Editor für virtuelle Bilderlistenkomponenten
Um den Editor für die virtuelle ImageList-Komponente und den Komponenten-Editor zu verwenden, müssen Sie zuerst im Objektinspektor die Eigenschaft ImageCollection festlegen.
Datei:VImageList ObjectInspector.png
Um den Editor für virtuelle Bilderlisten zu öffnen, können Sie im Formular auf die Komponente klicken oder mit der rechten Maustaste klicken und aus dem Kontextmenü die Option Bilderlisten-Editor anzeigen… auswählen.
Wenn Sie die Eigenschaft AutoFill auf True setzen, wird die virtuelle Bilderliste automatisch mit allen Bildern aus der Sammlung gefüllt. Andernfalls können Sie der Liste mit dem Bilderlisten-Editor manuell Bilder aus der Sammlung hinzufügen.
Im Fenster Editor für virtuelle Bilderlisten können Sie der Komponente Bilder hinzufügen, deaktivierte Versionen des Bilds einfügen und die Bilder in Kategorien anordnen.
Klicken Sie auf Hinzufügen, um die zugehörige Bildersammlung zu öffnen, und wählen Sie die Bilder aus, die in die virtuelle Bilderliste aufgenommen werden sollen. Sie können bestimmte Bilder oder alle Bilder aus der Bildersammlung oder einer Kategorie auswählen.
Das Fenster "Editor für virtuelle Bilderlisten" enthält außerdem die folgenden Optionen:
- Deaktivierte hinzufügen: Ermöglicht das Erstellen und Hinzufügen von Versionen mit geringerer Deckkraft oder mit Graustufen der Bilder, die Sie auswählen. Das Erscheinungsbild von deaktivierten Bildern wird von den Eigenschaften DisabledGrayscale und DisabledOpacity der Bilderliste gesteuert.
- Hinzufügen mit Kopie von Deaktivierten: Ermöglicht das Hinzufügen von Bildern aus der zugehörigen Bildersammlung sowie das gleichzeitige Erstellen und Hinzufügen deaktivierter Versionen der Bilder, die Sie auswählen.
- Ersetzen: Ermöglicht das Ersetzen eines ausgewählten Bilds.
- Kategorie festlegen: Ermöglicht die Gruppierung der Bilder in Kategorien. Um eine Kategorie festzulegen, wählen Sie die Bilder aus, die Sie in eine Kategorie aufnehmen möchten, und klicken auf Kategorie festlegen…. Geben Sie einen Namen für die Kategorie ein und klicken Sie auf OK, um das Bild in der Kategorienliste anzuzeigen. Der Komponenten-Editor fügt dem Bildnamen den Kategorienamen hinzu.
- Alle deaktivieren: Konvertiert alle Bilder, die Sie zuvor hinzugefügt haben, in deaktivierte Bilder.
Nach dem Hinzufügen von Bildern zur virtuellen Bilderlistenkomponente können Sie die folgenden Aktionen durchführen:
- Neu laden: Lädt Bildnamen und -beschreibungen aus der ImageCollection.
- Löschen: Entfernt das ausgewählte Bild oder die Bilder aus der virtuellen Bilderlistenkomponente.
- Alle löschen: Entfernt alle Bilder aus der Sammlung.
- Name: Ändern Sie den Bildnamen.
- Beschreibung: Weisen Sie einem Bild eine benutzerdefinierte Beschreibung zu.
Verwenden der Bild-Komponente mit Mehrfachauflösung
Die Komponente TVirtualImage unterstützt mehrere Auflösungen für eine TImage-ähnliche Komponente. Die Quelle der Bilder stammt aus einer ImageCollection, und kann je nach der Bildschirm-DPI mehrere Auflösungen haben. Die Komponente verwendet je nach angezeigtem Monitor die richtige Version.
Zu den Konfigurationseinstellungen und wichtigen Eigenschaften der Komponente VirtualImage zählen: ImageCollection, ImageHeight, ImageIndex, ImageName und ImageWidth.
Wenn Sie die Logik für die Bitmap-Skalierung zum reibungslosen Zeichnen einer beliebigen, skalierten VCL-TGraphic verwenden (z. B. StretchDraw), ermöglicht die Klasse TScaledGraphicDrawer das Zeichnen mit HQ-Skalierung für verschiedene TGraphic-Klassen, mit Aufrufen wie:
MyBitmap.EnableScaler(TD2DGraphicScaler);
Image1.Picture.Graphic.EnableScaler(TWICGraphicScaler);
Verschiedene Lösungen bieten Kombinationen aus besserem oder schlechterem Rendering und langsamerer oder schnellerer Leistung. Sie können benutzerdefinierte, abgeleitete TScaledGraphicDrawer-Klassen schreiben, die weitere Skalierungsalgorithmen definieren.
Bewährtes Vorgehen
TVirtualImageList-Komponenten werden mit der DPI-Auflösung des Formulars skaliert, in dem sie platziert sind. Dadurch können Steuerelemente auf dem Formular, das mit der Bilderliste gezeichnet wird, immer mit der richtigen Auflösung dargestellt werden. Dies bedeutet jedoch Folgendes:
- Steuerelemente sollten immer auf eine Bilderliste auf demselben Formular verweisen. Wenn ein Steuerelement auf eine Bilderliste auf einem anderen Formular verweist und die beiden Formulare unterschiedliche DPI verwenden, sich z. B. auf unterschiedlichen Bildschirmen befinden, dann könnten die Bilder falsch gezeichnet werden.
- Eine TVirtualImageList-Komponente sollte immer auf einem Formular, nicht in einem Datenmodul platziert werden. Formulare haben einen zugeordneten Monitor und eine zugeordnete Auflösung (DPI); Datenmodule nicht. TImageCollection-Komponenten können beliebig platziert werden, da sie einfach die Quelle sind und nicht von DPI-Änderungen beeinflusst werden: sie sind die Quelle und die virtuelle Bilderliste ist die Darstellung.
Platzieren Sie daher immer eine oder mehrere TVirtualImageLists-Komponenten auf dem Formular und verweisen Sie von den Steuerelementen aus nur auf diese lokalen Bilderlisten auf demselben Formular, wenn Steuerelemente auf einem Formular eine Bilderliste verwenden. Diese TVirtualImageLists-Komponenten können auf dieselbe TImageCollection verweisen.
Die virtuelle Bildersammlung ist ein sehr nützliches Steuerelement, das das Konzept einer Sammlung von Bildern (TImageCollection) von einem Satz von Bildern mit bestimmter, wenn auch mit DPI skalierbarer Größe (TVirtualImageList) trennt. Eine Bildersammlung wird von DPI-Änderungen nicht beeinflusst, da sie einfach ein Container ist. Virtuelle Bilderlisten können auf Bilder aus einer anderen Sammlung auf einem anderen Formular oder Datenmodul verweisen. Gute Designs verwenden nur eine Bildersammlung für zugehörige Bilder – z. B. alle Symbolleisten- und Menübilder – auf dem Hauptformular der Anwendung oder sogar noch besser in einem gemeinsam genutzten Datenmodul. Andere Formulare verfügen jeweils über eigene virtuelle, für das Formular spezifische Bilderlisten, die die zentrale Bildersammlung verwenden.
Mehrere Größen
Wenn Sie für dasselbe Bild mehrere Größen benötigen, z. B. für eine TListView mit den Eigenschaften SmallImages und LargeImages, verwenden Sie zwei TVirtualImageLists genau wie bei herkömmlichen TImageLists. Beide virtuelle Bilderlisten verweisen auf dieselbe Bildersammlung.
Unterstützen von High-DPI in Anwendungen: Konvertieren alter TImageLists
Es ist üblich, in VCL-Anwendungen TImageLists in TVirtualImageLists zur Verbesserung der Bildqualität und Unterstützung von High DPI zu konvertieren.
TVirtualImageList ist von TCustomImageList abgeleitet, deshalb müssen Sie eine Codeänderung vornehmen sowie eine HIMAGELIST-Handle-Eigenschaft angeben, um die Windows-API-Methoden direkt aufzurufen.
Wir empfehlen zwei Methoden, um eine App für die Verwendung der neuen hochauflösenden (High DPI) Bilderlisten zu konvertieren.
Erstens: Möglicherweise aktualisieren Sie gleichzeitig Ihre Symbole von einem älteren Stil auf einen moderneren Stile oder von farbcodierter Transparenz auf 32-Bit-Bilder mit einem Alphakanal. In diesem Fall ist es vermutlich am einfachsten, diese Bilder einer neuen Bildersammlung hinzuzufügen, neue Bilderlisten zu erstellen und Ihre Komponenten so zu ändern, dass sie auf die neuen Bilderlisten verweisen.
Zweitens: Sie könnten stattdessen eine schrittweise Aktualisierung durchführen und alte Bilder nacheinander oder sogar überhaupt nicht ersetzen (es ist jedoch ratsam, das neue System zu nutzen, das den Alphakanal mit 32 Bit pro Pixel unterstützt). Platzieren Sie dazu eine TImageCollection auf dem Formular, klicken Sie mit der rechten Maustaste und wählen Sie Aus vorhandener TImageList laden aus. Wählen Sie die Bilderlisten aus und legen Sie fest, ob das Bild hinzugefügt oder Bilder zusammengeführt werden sollen, wenn sie dieselben Bilder mit mehreren Auflösungen enthalten. Vollständige Informationen dazu finden Sie unter TImageList in TImageCollection und Laden einer vorhandenen TImageList in TImageCollection.
Die Bildersammlung enthält dann Ihre alten Bilder. Obwohl bei der Verwendung alter Bilder keine Verbesserung der Grafikqualität oder Transparenz erfolgt wie bei der Verwendung neu entworfener Bilder, können die Bilder aber entsprechend der DPI jedes Formulars skaliert werden. Erstellen Sie auf jedem Formular neue TVirtualImageList-Komponenten und fügen Sie die Bilder aus der Sammlung hinzu: sie behalten dieselbe relative Reihenfolge und ihren Index bei, es sei denn, es waren bereits Bilder in der Sammlung. Ändern Sie dann die Komponenten so, dass sie die neuen TVirtualImageLists verwenden.
Fließende Skalierung beim Zeichnen auf TCanvas
TCanvas.StretchDraw ermöglicht das Zeichnen von TGraphic auf ein beliebiges Rechteck. Die Implementierung der TGraphic-Unterklassen legt fest, wie das Zeichnen ausgeführt wird. In der Praxis verwendet die VCL beim Zeichnen (wie bei TBitmap) in der Regel ein Resampling des nächsten Nachbarn über GDI, was häufig zu einem nicht ideal skalierten oder gestreckten Bild von schlechter Qualität führt.
Sie können eine TImageCollection-Komponente zur Aufnahme eines Bilds (intern gespeichert und gezeichnet mit WIC) verwenden und sie in ein beliebiges Rechteck zeichnen. Dadurch wird ein Resampling mit hoher Qualität verwendet.