2D-Grafiken in Qt

Zweidimensionale Grafiken bilden den Kern der Benutzeroberflächenfunktionen von Qt Core. Diese Seite bietet einen Überblick über die Werkzeuge und APIs, die Ihnen zum Rendern eigener 2D-Grafiken zur Verfügung stehen. Außerdem soll der Unterschied zwischen APIs, die ähnliche Aufgaben erfüllen, verdeutlicht werden.

Dies ist eine allgemeine Übersicht, die sich auf die direkten Möglichkeiten zum Rendern von Grafikprimitiven wie Kreisen, Rechtecken, komplexen Formen und Bildern konzentriert. Eine detaillierte Darstellung der internen Funktionsweise der Qt-Grafik finden Sie in der Dokumentation zur Grafikübersicht.

Qt umfasst zudem hochwertige 3D-Rendering-Funktionen mit eigenen APIs und Werkzeugen. Der Schwerpunkt der folgenden Übersicht liegt auf zweidimensionaler Grafik, daher Qt Quick 3D und die damit verbundenen Komponenten hier nicht behandelt.

Qt Quick

Qt Quick verfügt über die Werkzeuge zum Rendern von hardwarebeschleunigter und animierter 2D-Grafik. Es dient als Grundlage für die umfangreichen UI-Komponenten in Qt Quick Controls.

Das Modul „ Qt Quick “ stellt wesentliche Grundelemente wie „ rectangles “, „ text “ und Bilder bereit. Diese bilden in der Regel die Grundlage einer zweidimensionalen Benutzeroberfläche.

Benutzeroberflächen in „ Qt Quick “ lassen sich mit geringem Leistungsaufwand transformieren und animieren – dieses Versprechen bildet den Kern des Moduls. Die API ist deklarativ, was es Qt ermöglicht, die Speicherung und Darstellung von Grafiken sowie die Verwaltung von Animationsaktualisierungen zu optimieren.

Qt Quick Formen

Zusätzlich zu den grundlegenden Primitiven verfügt „ Qt Quick “ über APIs zum Rendern komplexerer Formen. Der Zugriff darauf erfolgt durch Einbindung des Qt Quick Shapes Moduls in Ihren Code.

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

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

Qt Quick-Shapes-Pfaden" src="images/tiger.png" title="GhostScript-Tiger, gerendert mit Qt Quick-Shapes-Pfaden"/>

Das Beispiel „Qt Quick Shapes“ zeigt, wie der klassische GhostScript-Tiger mithilfe von Pfaden gerendert werden kann, die mit „ Qt Quick Shapes“ erstellt wurden.

Kurven-Renderer

Standardmäßig nutzt „ Qt Quick Shapes“ Multi-Sampling für die Kantenglättung. Zudem werden Kurven zu kurzen Liniensegmenten abgeflacht, was sichtbar werden kann, wenn Sie die Form vergrößern. Indem Sie die Eigenschaft „ preferredRendererType “ des „ Shape “-Elements auf „ Shape.CurveRenderer “ setzen, wird intern ein anderer Renderer verwendet. Dieser Kurven-Renderer berechnet die Kurven direkt auf der GPU und wendet Antialiasing ohne MSAA an.

Dies geht beim ersten Rendern der Form mit einem gewissen zusätzlichen Leistungsaufwand einher. Danach lässt sich die Form jedoch ohne zusätzlichen Aufwand reibungslos skalieren und transformieren.

Weitere Operationen

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

• Mit der Komponente „ PathQuad “ lässt sich dem Pfad eine quadratische Kurve hinzufügen.
• Mit der Komponente „ PathRectangle “ lässt sich ein Rechteck erstellen, optional mit abgerundeten Ecken.
• Mit der Komponente „ PathSvg “ lässt sich ein Pfad unter Verwendung der SVG-Pfadsyntax erstellen. (Hinweis: Diese Komponente bietet lediglich 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 Konturen aus einer Schriftart hinzuzufügen. Dies ergänzt die Komponente „ Text “ von „ Qt Quick “. Sie kann für fortgeschrittene Effekte verwendet werden, zum Beispiel für Farbverlaufsfüllungen und Pfadoperationen wie das Subtrahieren des Textes von einer anderen Form.

Rasterbilder

Rasterbilder (oder Pixmaps) können in „ Qt Quick “ mithilfe der „Image“-Komponente angezeigt werden. Eine Reihe von Bildformaten wird standardmäßig über das Qt GUI Modul standardmäßig eine Reihe von Bildformaten unterstützt (PNG, JPEG, BMP und GIF). Darüber hinaus verfügt das Qt Image Formats Modul über Plugins zum Laden weiterer Bildformate. Solange Ihre Anwendung auf das Plugin für ein bestimmtes Format zugreifen kann, lässt sich dieses über die „Image“-Komponente laden.

Vektorgrafiken

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

Mit der „ VectorImage “-Komponente können skalierbare Vektorgrafiken direkt in Ihre „ Qt Quick “-Anwendung eingebunden werden. Derzeit wird standardmäßig das SVG-Format unterstützt. Durch die Bereitstellung eines Plugins mit Ihrer Anwendung kann die Unterstützung auch auf das Lottie-Format ausgeweitet werden.

Die „ VectorImage “-Komponente analysiert das Dokument und erstellt im Speicher eine „ Qt Quick “-Szene, die dessen Inhalt mithilfe von „ Qt Quick “-Formen und anderen Primitiven darstellt. Daher verhält sie sich genauso, als wäre das Vektorgrafikbild mit „ Qt Quick “ erstellt worden.

Die Vektorgrafiken können auch vorab mithilfe der Tools „svgtoqml“ und „lottietoqml“ in QML konvertiert werden. Dadurch entsteht dieselbe Darstellung der Vektorgrafik unter Verwendung von „ Qt Quick “-Komponenten. Anstatt die Darstellung jedoch im Arbeitsspeicher zu erzeugen, wird sie in einer Datei gespeichert. Durch die Vorabgenerierung der QML-Datei kann diese als Teil der Anwendungsressourcen vorkompiliert werden, was beim Laden Zeit spart.

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

Ebenso kann das Tool „lottietoqml“ verwendet werden, um Lottie-Animationen in QML zu konvertieren.

Vorab gerasterte Vektorgrafiken

Bei Vektorgrafiken, die stets nur in einer einzigen Größe angezeigt werden, ist es effizienter, sie vorab in Pixmaps zu rastern und diese mithilfe von `Image` darzustellen. Häufig werden solche Bilder als SVGs in den Quell-Assets der Anwendung gespeichert und dann (beispielsweise) in vordefinierte PNG-Größen konvertiert. Dies geschieht in der Regel im Rahmen des Erstellungs- und Paketierungsprozesses der Anwendung.

Das Rendern eines Bildes ist schneller als das Rendern komplexer Formen, daher ist dies bei statischen Bildern der optimale Ansatz. Für manche Anwendungen ist es jedoch nicht praktikabel, diese Konvertierung bereits beim Erstellen durchzuführen. Wenn die Anwendung beispielsweise auf viele verschiedene Formfaktoren ausgerichtet ist, kann die Liste der vordefinierten Größen, die alle abdecken sollen, sehr lang und schwer vorhersehbar sein. Da jedes vorgerenderte Bild zusätzlichen Speicherplatz bei der Bereitstellung der Anwendung beansprucht, ist dieser Ansatz auch mit einem gewissen Aufwand verbunden.

Qt unterstützt daher auch die Rasterung von SVG-Dateien in einer bestimmten Größe beim Laden des Bildes. Dies kann einfach durch das Laden der Datei über die reguläre Image-Komponente erfolgen. Mit der Eigenschaft „ sourceSize “ lässt sich die Rastergröße des Bildes steuern.

Das Laden der SVG-Datei über „Image“ unterscheidet sich in folgenden Punkten vom Laden über „ VectorImage “:

• Bei der „Image“-Komponente wird das Bild auf der CPU gerastert, bevor es als Textur geladen wird. Dadurch entstehen zusätzliche Ladeaufwände, die von der Zielgröße des gerasterten Bildes abhängen. Das anschließende Rendern desselben Bildes erfolgt jedoch genauso schnell, als wäre das Bild bereits vorab gerastert und als Pixmap geladen worden.
• Zudem 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 dieselben Nachteile wie beim Laden als Pixmap.
• Wenn das Bild Animationen enthält, zeigt „Image“ nur das erste Bild an.

Daher gilt als allgemeine Regel: Die Verwendung von vorgerasterten Vektorbildern ist vorteilhafter, wenn das Bild nicht animiert ist und seine Größe während der gesamten Laufzeit der Anwendung gleich bleibt. Ob die Bilder bereits zur Erstellungszeit durch ein Drittanbieter-Tool oder zur Laufzeit beim Laden des Bildes durch Qt gerastert werden, ist ein Kompromiss zwischen Ladezeit und Komfort bzw. der Größe der Bereitstellung.

Das Beispiel „Vektorbild“ zeigt eine SVG-Datei, die mit „Image“, „ VectorImage “ und einer mit „svgtoqml“ generierten QML-Datei in verschiedenen Skalierungen dargestellt wird. Bei Darstellung in der Originalgröße sieht die Darstellung durchweg gleich aus, und „Image“ rendert das Bild etwas schneller. Bei höheren Skalierungen wird das „Image“-Element unscharf und pixelig, während die anderen Ansätze scharf und originalgetreu bleiben.

Animierte Vektorgrafiken

Animationen bilden den Kern des Leistungsumfangs von „ Qt Quick “. Viele Vektorgrafik-Animationen können ausgeführt werden, ohne die Geometrien der Elemente zu verändern, und profitieren daher in hohem Maße vom hardwarebeschleunigten Renderer von „ Qt Quick “.

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 auf diesem Screenshot zu sehen ist, sind mehrere animierte Bilder in einem Raster angeordnet. Sie lassen sich jeweils zoomen, ohne dass Skalierungsartefakte oder Qualitätseinbußen auftreten.

Effekte

Die Unterstützung für Nachbearbeitungseffekte ist als Kernfunktion in „ Qt Quick “ enthalten. Jedes Element kann in eine Textur umgewandelt werden, und mit der „ ShaderEffect “-Komponente lassen sich beliebige Effekte darauf anwenden.

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

Die Komponente „ MultiEffect “ ermöglicht es, einen oder mehrere vordefinierte gängige Effekte auf ein Element anzuwenden.

Qt Quick Effect Maker – visuelles Tool zum Verketten und Erstellen von Effekten" src="images/quickeffectmaker.png" title="Qt Quick Effect Maker – visuelles Tool zum Verketten und Erstellen von Effekten"/>

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

QPainter

QPainter ist die Grundlage von Qt Widgets. Er bietet eine imperative API zum Zeichnen komplexer Formen und Bilder mit pixelgenauer Kantenglättung.

Formen können mithilfe von „ QPainterPath “ festgelegt werden, und der Renderer unterstützt zudem direkt Primitive wie Text und Bilder.

Der QPainter ist in erster Linie ein Software-Renderer und für kleinere, partielle Aktualisierungen des Bildschirms optimiert. Daher eignet er sich gut für die traditionellen, desktopähnlichen Benutzeroberflächen von Qt Widgets, bei denen der Großteil der Benutzeroberfläche von Bild zu Bild statisch bleibt. Das Rendern großer und komplexer 2D-Szenen kann daher aufwendig sein, und es könnte sich lohnen, Qt Quick Shapes .

Andererseits ist die Darstellungsqualität höher, sodass er für viele Anwendungsfälle dennoch vorzuziehen ist. Beim Rendern eines SVG-Bildes über `Image`, wie zuvor beschrieben, ist `QPainter` der zugrunde liegende Renderer.

Wenn pixelgenaue Darstellung das Ziel ist und Aktualisierungen selten sind und/oder sich auf kleine Bereiche beschränken, ist „ QPainter “ ein leistungsstarkes Werkzeug. Sollte es jedoch zu einem Leistungsengpass werden, können Sie in Erwägung ziehen, auf Qt Quick und Qt Quick Shapes zu verwenden.

Komponenten höherer Ebene

Aufbauend auf diesen grundlegenden Grafikprimitiven bietet Qt zudem zahlreiche spezialisierte, hochrangige Komponenten.

Qt Quick Controls ist ein solches Modul. Es bietet eine umfangreiche und anpassbare Auswahl gängiger Benutzeroberflächenkomponenten. In ähnlicher Weise Qt Widgets bietet dasselbe für QPainter-basierte Anwendungen.

Darüber hinaus Qt Graphs ist ein Modul zur Datenvisualisierung. Es stellt zahlreiche verschiedene Komponenten bereit, um Datensätze und Diagramme in einer Qt Quick Anwendung. Qt Graphs unterstützt sowohl 2D- als auch 3D-Diagramme.