2D-Grafiken in Qt

Zweidimensionale Grafiken sind das Herzstück der Benutzeroberfläche von Qt. Diese Seite bietet einen Überblick über die Werkzeuge und APIs, die Ihnen für das Rendern Ihrer eigenen 2D-Grafiken zur Verfügung stehen. Sie soll auch den Unterschied zwischen APIs verdeutlichen, die ähnliche Aufgaben erfüllen.

Dies ist ein Überblick auf hoher Ebene, der sich auf die direkten Möglichkeiten zum Rendern von Grafikprimitiven wie Kreisen, Rechtecken, komplexen Formen und Bildern konzentriert. Für einen tieferen Einblick in die Grafik-Interna von Qt lesen Sie bitte die Dokumentation zur Grafikübersicht.

Qt bietet auch High-End-3D-Rendering-Fähigkeiten mit einer eigenen Reihe von APIs und Werkzeugen. Der Schwerpunkt des folgenden Überblicks liegt auf zweidimensionalen Grafiken, so dass Qt Quick 3D und verwandte Komponenten hier nicht behandelt werden.

Qt Quick

Qt Quick verfügt über die Werkzeuge für das Rendering hardwarebeschleunigter und animierter 2D-Grafiken. Es dient als Basis für die umfangreichen UI-Komponenten in Qt Quick Controls.

Das Modul Qt Quick stellt wesentliche Primitive wie rectangles, text und Bilder zur Verfügung. Diese bilden in der Regel die Grundlage für eine zweidimensionale Benutzeroberfläche.

Benutzeroberflächen in Qt Quick können mit geringem Leistungsaufwand umgewandelt und animiert werden, und dieses Versprechen ist der Kern des Moduls. Die API ist deklarativ, was es Qt ermöglicht, die Speicherung und das Rendern von Grafiken sowie die Verwaltung von Animations-Updates zu optimieren.

Qt Quick Formen

Zusätzlich zu den grundlegenden Primitiven verfügt Qt Quick über APIs für das Rendern komplexerer Formen. Auf diese kann durch Importieren des Qt Quick Shapes Modul in Ihren Code importieren.

Qt Quick Mit Shapes können Sie beliebige paths aus Pfadoperationen wie move-to, line-to, cubic-to und arc-to konstruieren.

Jeder Pfad kann einen Strich haben, der durch eine Vielzahl von Optionen definiert wird. Darüber hinaus kann er entweder mit einer Volltonfarbe, einem Farbverlauf, einem Bild oder sogar mit einem anderen Qt Quick Element gefüllt werden.

Das BeispielQt Quick Shapes zeigt, wie der klassische GhostScript-Tiger mit Pfaden gerendert werden kann, die mit Qt Quick Shapes erstellt wurden.

Kurven-Renderer

Standardmäßig verwendet Qt Quick Shapes Multi-Sampling für Antialiasing. Darüber hinaus werden Kurven zu kurzen Liniensegmenten abgeflacht, was beim Zoomen der Form sichtbar werden kann. Wenn Sie die Eigenschaft preferredRendererType des Elements Shape auf Shape.CurveRenderer setzen, wird intern ein anderer Renderer verwendet. Dieser Kurvenrenderer löst die Kurven auf der GPU selbst auf und wendet Antialiasing ohne MSAA an.

Dies geht zu Lasten der Leistung, wenn die Form zum ersten Mal gerendert wird. Danach kann die Form jedoch ohne zusätzliche Kosten reibungslos skaliert und transformiert werden.

Andere Operationen

Zusätzlich zu den grundlegenden Operationen zum Erstellen eines Pfades enthält Qt Quick Shapes auch einige leistungsstarke Komfortkomponenten.

• Die Komponente PathQuad kann verwendet werden, um dem Pfad eine quadratische Kurve hinzuzufügen.
• Die Komponente PathRectangle kann verwendet werden, um ein Rechteck zu konstruieren, optional mit abgerundeten Ecken.
• Die Komponente PathSvg kann verwendet werden, um einen Pfad mit der SVG-Pfadsyntax zu konstruieren. (Hinweis: Diese Komponente bietet nur eine kompakte Möglichkeit zur Beschreibung eines Pfades, sie unterstützt nicht die gesamte SVG-Syntax).
• Die Komponente PathText kann verwendet werden, um dem Pfad Umrisse einer Schriftart hinzuzufügen. Sie kommt zusätzlich zur Komponente Qt Quick's Text. Sie kann für fortgeschrittene Effekte verwendet werden, z. B. für Farbverlaufsfüllungen und Pfadoperationen wie das Subtrahieren von Text von einer anderen Form.

Rasterbilder

Rasterbilder (oder Pixmaps) können in Qt Quick mit der Komponente Image angezeigt werden. Eine Reihe von Bildformaten wird standardmäßig durch das Qt Gui Modul unterstützt (PNG, JPEG, BMP und GIF). Darüber hinaus bietet das Qt Image Formats Modul über Plugins zum Laden anderer Bildformate. Solange Ihre Anwendung auf das Plugin für ein bestimmtes Format zugreifen kann, kann es mit der Image-Komponente geladen werden.

Vektor-Bilder

Eine Einschränkung von Rasterbildern besteht darin, dass sie nicht skaliert oder anderweitig transformiert werden können, ohne dass es zu Qualitätseinbußen kommt. Für Bilder, die in verschiedenen Größen oder mit Transformationen angezeigt werden sollen, ist es in der Regel besser, stattdessen ein Vektorbildformat zu verwenden.

Die Komponente VectorImage kann verwendet werden, um skalierbare Vektorgrafiken direkt in Ihre Anwendung Qt Quick einzubinden. Sie unterstützt derzeit standardmäßig das SVG-Format. Wenn Sie ein Plugin mit Ihrer Anwendung bereitstellen, kann diese auch das Lottie-Format unterstützen. Beachten Sie, dass diese Unterstützung derzeit als experimentell angesehen wird.

VectorImage analysiert das Dokument und erstellt eine Qt Quick Szene im Speicher, die den Inhalt unter Verwendung von Qt Quick Shapes und anderen Primitiven darstellt. Daher verhält es sich genauso, als ob das Vektorbild mit Qt Quick geschrieben worden wäre.

Die Vektorbilder können auch im Voraus mit den Werkzeugen svgtoqml und lottietoqml in QML konvertiert werden. Dadurch wird die gleiche Darstellung des Vektorbildes unter Verwendung der Komponenten von Qt Quick erzeugt. Allerdings wird die Darstellung nicht im Speicher erstellt, sondern in einer Datei gespeichert. Die Vorgenerierung der QML-Datei bedeutet, dass sie als Teil der Anwendungs-Assets vorkompiliert werden kann, was beim Laden einige Zeit spart.

Das Beispiel der Wettervorhersage zeigt, wie svgtoqml in einer Anwendung verwendet werden kann. Wettersymbole, Karten und Icons sind SVG-Dateien, die in QML konvertiert und als Elemente in die Anwendungsszene geladen wurden.

In ähnlicher Weise kann das Werkzeug lottietoqml verwendet werden, um Lottie-Animationen in QML zu konvertieren.

Prerasterisierte Vektorbilder

Bei Vektorbildern, die immer nur in einer einzigen Größe angezeigt werden, ist es effizienter, sie im Voraus in Pixmaps zu rastern und diese mit Image anzuzeigen. Häufig werden solche Bilder als SVGs in den Quelldateien der Anwendung gespeichert und dann in vordefinierte Größen (z. B. PNGs) umgewandelt. Dies geschieht in der Regel im Rahmen des Build- und Paketierungsprozesses der Anwendung.

Das Rendern eines Bildes ist schneller als das Rendern komplexer Formen, so dass dies für statische Bilder der optimale Ansatz ist. Bei einigen Anwendungen ist es jedoch nicht sinnvoll, diese Konvertierung zum Zeitpunkt der Erstellung durchzuführen. Wenn die Anwendung beispielsweise auf viele verschiedene Formfaktoren abzielt, kann die Liste der vordefinierten Größen, die alle abdecken, sehr lang und schwer vorherzusehen sein. Da jedes vorgerenderte Bild zusätzlichen Platz in der Anwendungsbereitstellung verbraucht, ist dieser Ansatz auch mit Kosten verbunden.

Qt unterstützt daher auch die Rasterisierung von SVG-Dateien in einer bestimmten Größe, wenn das Bild geladen wird. Dies kann einfach durch das Laden der Datei über die reguläre Image-Komponente geschehen. Die sourceSize Eigenschaft kann verwendet werden, um die gerasterte Größe des Bildes zu kontrollieren.

Das Laden von SVG über Image unterscheidet sich in folgenden Punkten vom Laden über VectorImage:

• Bei Image wird das Bild auf der CPU gerastert, bevor es als Textur geladen wird. Es entstehen also zusätzliche Ladekosten, die von der Zielgröße des gerasterten Bildes abhängen. Das anschließende Rendern desselben Bildes ist jedoch genauso schnell, wie wenn das Bild vorher gerastert und als Pixmap geladen wurde.
• Außerdem kann das gerasterte Bild je nach Komplexität des Vektorbildes und der Größe der gerasterten Daten mehr Speicherplatz beanspruchen.
• Das Skalieren/Transformieren des Bildes hat die gleichen Nachteile wie beim Laden als Pixmap.
• Wenn das Bild Animationen enthält, zeigt Image nur das erste Bild an.

Als allgemeine Regel gilt daher, dass die Verwendung von vorgerasterten Vektorbildern besser ist, wenn das Bild nicht animiert ist und seine Größe über die gesamte Lebensdauer der Anwendung gleich bleibt. Ob die Bilder zur Erstellungszeit von einem Drittanbieter-Tool gerastert werden oder zur Laufzeit, wenn Qt das Bild lädt, ist ein Kompromiss zwischen Ladezeit und Komfort/Einsatzgröße.

Das Vektorbild-Beispiel zeigt eine SVG-Datei, die mit Image, VectorImage und einer mit svgtoqml erzeugten QML-Datei in verschiedenen Maßstäben angezeigt wird. Bei der Anzeige in der Ausgangsgröße sieht das Rendering durchweg gleich aus, und das Bild ist etwas schneller zu rendern. Bei höheren Skalierungen wird das Bild unscharf und pixelig, während die anderen Ansätze scharf und originalgetreu bleiben.

Animierte Vektorgrafiken

Animationen sind das Herzstück des Angebots von Qt Quick. Viele Vektorgrafik-Animationen können ausgeführt werden, ohne die Geometrien der Elemente zu verändern, und profitieren daher sehr von Qt Quick's hardwarebeschleunigtem Renderer.

VectorImagesvgtoqml und lottietoqml unterstützen Animationen für eine ausgewählte Teilmenge von Eigenschaften.

Das lottietoqml-Beispiel zeigt, wie animierte Lottie-Dateien in QML konvertiert werden können. Wie in diesem Screenshot zu sehen ist, sind mehrere animierte Bilder in einem Raster angeordnet. Sie können jeweils gezoomt werden, ohne dass Artefakte bei der Skalierung auftreten oder die Originaltreue verloren geht.

Effekte

Die Unterstützung für Nachbearbeitungseffekte gehört zu den Kernfunktionen von Qt Quick. Jedes Element kann in eine Textur umgewandelt werden, und die Komponente ShaderEffect kann verwendet werden, um einen beliebigen Effekt darauf anzuwenden.

Zusätzlich zu dieser Low-Level-Unterstützung für Effekte verfügt Qt Quick auch über einige High-Level-Komponenten, die den Prozess vereinfachen.

Die Komponente MultiEffect ermöglicht die Anwendung eines oder mehrerer vordefinierter allgemeiner Effekte auf ein Objekt.

Für komplexere Anwendungsfälle bietet der Qt Quick Effect Maker ein visuelles Werkzeug, mit dem Sie vordefinierte und benutzerdefinierte Effekte aneinanderreihen und den Shader-Code für die Verwendung mit ShaderEffect generieren können.

QPainter

QPainter ist die Grundlage von Qt Widgets. Er bietet eine zwingende API zum Zeichnen komplexer Formen und Bilder mit pixelgenauem Antialiasing.

Formen können mit QPainterPath spezifiziert werden und der Renderer unterstützt auch direkt Primitive wie Text und Bilder.

Der QPainter ist in erster Linie ein Software-Renderer, der für kleinere, partielle Aktualisierungen des Bildschirms optimiert ist. Daher eignet er sich gut für die traditionellen, desktopähnlichen Oberflächen von Qt Widgetsgeeignet, bei denen der größte Teil der Benutzeroberfläche von Bild zu Bild statisch ist. Daher kann das Rendern großer und komplexer 2D-Szenen mit diesem Renderer teuer sein, und es könnte eine Überlegung wert sein Qt Quick Shapes zu erwägen.

Andererseits ist die Rendering-Qualität höher, so dass es für viele Anwendungsfälle immer noch vorzuziehen sein wird. Beim Rendern eines SVG-Bildes durch Image, wie zuvor beschrieben, wird QPainter der zugrunde liegende Renderer sein.

Wenn Pixel-Perfektion das Ziel ist und Aktualisierungen selten und/oder auf kleine Bereiche beschränkt sind, dann ist QPainter ein leistungsfähiges Werkzeug. Wenn es zu einem Leistungsengpass wird, können Sie erwägen, auf die Verwendung von Qt Quick und Qt Quick Shapes stattdessen zu verwenden.

Komponenten auf höherer Ebene

Aufbauend auf diesen grundlegenden Grafikprimitiven bietet Qt auch viele spezialisierte High-Level-Komponenten.

Qt Quick Controls ist ein solches Modul. Es bietet einen reichhaltigen und stilisierbaren Satz allgemeiner Benutzeroberflächenkomponenten. Ähnlich, Qt Widgets bietet dasselbe für QPainter-basierte Anwendungen.

Darüber hinaus, Qt Graphs ist ein Modul zur Datenvisualisierung. Es bietet viele verschiedene Komponenten zur Visualisierung von Datensätzen und Diagrammen in einer Qt Quick Anwendung. Qt Graphs Es unterstützt sowohl 2D- als auch 3D-Diagramme.