Beispiel für eine Vektorgrafik

Es gibt verschiedene Möglichkeiten, zweidimensionale Vektorgrafiken in Ihre Qt-Anwendung einzubinden. Dieses Beispiel konzentriert sich auf das SVG -Format und dessen Verwendung mit Qt. Grundsätzlich unterstützt Qt die statischen Funktionen des „ SVG Tiny 1.2 “-Profils. Darüber hinaus Qt SVG unterstützt es optional einige Funktionen aus dem vollständigen Profil, die in diesem Beispiel jedoch nicht verwendet werden.

Das Beispiel zeigt ein Raster aus 3×3 Zellen, die jeweils dasselbe Vektorbild eines Herzens enthalten. Das Herzbild wird als „ SVG “-Datei mit dem Beispiel bereitgestellt.

In dem Raster wird das Bild in jeder Zeile mit einem anderen Skalierungsfaktor angezeigt (1x, 2,5x bzw. 4x).

Jede Spalte repräsentiert eine andere Methode zur Darstellung der Vektorgrafiken in Qt. Die Spalten ganz links ist eine „ Image “-Komponente, die mittlere Spalte ist eine „ VectorImage “-Komponente und die Spalten ganz rechts ist eine vorab generierte „ QML “-Darstellung, die mit dem Tool „svgtoqml“ erstellt wurde.

Jede Methode zur Darstellung der Vektorgrafiken hat ihre eigenen Vor- und Nachteile und eignet sich für unterschiedliche Anwendungsfälle. Um eine fundierte Entscheidung darüber zu treffen, welche Methode verwendet werden soll, kann es hilfreich sein, die Unterschiede im Detail zu verstehen.

Die Image -Komponente und Qt SVG

Wenn Sie das Element „ Image “ verwenden und eine „ SVG “-Datei als Quelle festlegen, wird dadurch das Bildformat-Plugin in Qt SVGaufgerufen. Das Plugin analysiert die „ SVG “-Datei, rastert sie mithilfe des Software-Rasterisierers in „ QPainter “ und stellt sie anschließend „ Qt Quick “ als Pixmap-Bild zur Verfügung. Dies entspricht der Verwendung der Klasse „ QSvgRenderer “ zum Zeichnen des Bildes.

        Image {
            sourceSize: Qt.size(topLevel.sourceSize, topLevel.sourceSize)
            source: "heart.svg"
        }

Da das Vektorbild in einer bestimmten Größe gerastert wird, wird jede Transformation, die wir auf die ` Image ` anwenden, auch auf das gerasterte Bild angewendet. Dies kann zu Pixelierungsartefakten und ungleichmäßigen Kurven führen.

Das Laden eines Vektorbildes über „ Image “ funktioniert am besten, wenn Sie das Bild in genau der Größe anfordern, in der Sie es anzeigen möchten. Wenn das „ Image “ in der obersten Zeile im Maßstab 1:1 angezeigt wird, sieht es identisch mit den anderen aus, bei höheren Maßstäben beginnt es jedoch, unscharf zu wirken.

Wenn das Bild ausschließlich in einer einzigen Größe angezeigt wird, ist dies in der Regel die leistungsstärkste Option. Es entstehen zwar anfängliche Kosten für die Rasterung des Bildes in der angegebenen Größe, doch danach sind die Kosten für das Kopieren der Daten auf den Bildschirm sehr gering.

Wird das Bild jedoch in mehreren verschiedenen Größen angefordert, steigen die Anfangskosten ebenso wie der kumulierte Speicherverbrauch. Animierte Zooms des Bildes können auf Geräten der unteren Preisklasse oft zu rechenintensiv sein, um mit voller Bildrate ausgeführt zu werden. Dies sind die Anwendungsfälle, für die „ VectorImage “ und „svgtoqml“ in Betracht gezogen werden sollten.

Die Komponente „ VectorImage “

Als Alternative zu „ Image “ stellt Qt die Komponente „ VectorImage “ zur Verfügung. Diese konvertiert das Bild „ SVG “ in eine Vektorgrafikdarstellung im Format „ Qt Quick “, und die Rasterisierung erfolgt bedarfsweise auf der Grafik-Hardware, während das Bild auf den Bildschirm gerendert wird.

        VectorImage {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
            preferredRendererType: VectorImage.CurveRenderer
            source: "heart.svg"
        }

Da das Bild nicht vorab gerastert wird, können wir Transformationen darauf anwenden, ohne dass die Originalformen an Genauigkeit verlieren. Beachten Sie, dass im Beispiel der Renderertyp „ VectorImage.CurveRenderer “ verwendet wird. Dieser wird für Anwendungsfälle empfohlen, in denen das Bild transformiert wird und Antialiasing erforderlich ist.

Das bedeutet, dass wir das Bild in beliebiger Größe anzeigen und sogar die Skalierung des Bildes animieren können, wobei die gesamte Arbeit von der Grafikhardware übernommen wird. Allerdings ist das Rendern von „ VectorImage “ auf dem Bildschirm mit etwas höheren Kosten verbunden als das Rendern von „ Image “. Dies liegt daran, dass die Rasterisierung der Kurven bei jedem Rendern der Komponente erfolgt und nicht im Voraus.

Daher eignet sich „ VectorImage “ am besten für Vektorgrafiken, bei denen sich die Größe häufig ändert. Es kann auch geeignet sein, wenn die Zielgröße des Bildes sehr groß ist und der Speicherverbrauch eine Rolle spielt. Bei der Verwendung von „ Image “ muss das vollständig gerasterte Bild im Grafikspeicher gespeichert werden. Somit skaliert der Speicherverbrauch mit der Größe des Bildes. Der von VectorImage beanspruchte Speicher ist unabhängig von der Zielgröße, in der es gerendert wird, immer gleich.

Das Tool „svgtoqml “

Die Komponente „ VectorImage “ analysiert die „ SVG “-Datei und erstellt zur Laufzeit eine äquivalente Szene aus „ Qt Quick “-Elementen.

Wenn die Datei „ SVG “ Teil der Anwendungsressourcen ist, kann ein Teil der Arbeit stattdessen im Voraus mithilfe des Tools „svgtoqml“ erledigt werden. Dieses Tool erzeugt dieselbe Szene wie „ VectorImage “, erstellt jedoch keine Szene zur Laufzeit, sondern eine „ QML “-Datei, die in das Anwendungsprojekt eingebunden werden kann.

In diesem Beispiel wird die Datei „ heart.svg “ während des Build-Vorgangs automatisch in „ Heart.qml “ konvertiert.

qt_target_qml_from_svg(vectorimageexample
    CURVE_RENDERER
    OPTIMIZE_PATHS
    FILES heart.svg
    OUTPUTS Heart.qml
    COPYRIGHT_STATEMENT
        "Copyright © 2024 The Qt Company Ltd.\\nSPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause"
)

Diese Komponente kann wie jedes andere „ Qt Quick “-Element in der Szene instanziiert werden.

        Heart {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
        }

Durch diesen Ansatz müssen wir die „ SVG “-Datei nicht bei jedem Start der Anwendung neu parsen. Zudem kann das Tool „ svgtoqml “ die Formen optimieren und analysieren, um dem Renderer Hinweise zu geben, die dessen Laufzeitverarbeitung weiter beschleunigen.

Das Tool „svgtoqml“ sollte für dieselben Anwendungsfälle wie „ VectorImage “ in Betracht gezogen werden und immer dann bevorzugt werden, wenn die Datei „ SVG “ beim Erstellen der Anwendung als Asset verfügbar ist und nicht vom Endnutzer der Anwendung bereitgestellt wird.

Beispielprojekt @ code.qt.io