Beispiel für eine Wettervorhersage

Dieses Beispiel ist so gestaltet, dass es wie eine Wettervorhersage-App für Europa aussieht. Es veranschaulicht einige verschiedene Möglichkeiten, wie die „ QtQuick.Shapes “-API in einer Anwendung nützlich sein kann, und wie sich verschiedene Eigenschaften auf die Qualität und Leistung der Darstellung auswirken können.

Alle Grafiken in diesem Beispiel stammen ursprünglich aus „ .svg “-Dateien, die bei der Erstellung mithilfe des Tools „svgtoqml“ automatisch in QML konvertiert werden.

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    ASYNCHRONOUS_SHAPES
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

Die generierten QML-Dateien können wie jede andere auch im Anwendungscode verwendet werden.

Verschiedene Arten von Formen

Das Modul „ QtQuick.Shapes “ stellt APIs zum Rendern von Vektorgrafiken in einer „ Qt Quick “-Anwendung bereit. Dies ist eine Alternative zur Verwendung eines Raster- Image s für 2D-Grafiken und ist nützlich, wenn die Zielgröße des Bildes nicht im Voraus bekannt ist. Bei einem „ Image “ wird die gerasterte Pixmap bereits in einer bestimmten Größe vorerzeugt, und beim Skalieren des Bildes werden Informationen entweder hinzugefügt oder entfernt. Dies führt zu Pixelierung oder Unschärfe, je nachdem, ob die Eigenschaft „ smooth “ gesetzt ist.

Bei „ QtQuick.Shapes “ werden die Formen mathematisch als eine Reihe von Kurven und Liniensegmenten beschrieben und können daher beliebig skaliert werden, ohne dass Artefakte entstehen.

Im Beispiel „Wettervorhersage“ gibt es drei Hauptanwendungsbereiche für Formen:

• Symbole der Benutzeroberfläche, wie beispielsweise Wettersymbole und das Zahnrad auf der Schaltfläche „Einstellungen“.
• Die Übersichtskarte von Europa.
• Ländernamen-Beschriftungen, die beim Heranzoomen der Karte sichtbar werden.

Symbole der Benutzeroberfläche

Aus Leistungsgründen wird zwar in der Regel die Verwendung von Rasterbildern in geeigneter Größe für Symbole bevorzugt, doch kann dies unpraktisch sein, wenn dieselbe Anwendung auf viele verschiedene Bildschirmgrößen ausgerichtet ist. Damit die Symbole auf allen Bildschirmen scharf dargestellt werden, muss ein umfangreicher Satz verschiedener Größen vorab generiert werden. „ QtQuick.Shapes “ ermöglicht es der Anwendung, diese Anpassung zur Laufzeit vorzunehmen, indem die Symbole als Formen eingebunden und in einer für die aktuelle Bildschirmgröße geeigneten Größe gerendert werden.

Wenn Sie das Beispiel „Wettervorhersage“ auf einem Desktop-System ausführen, können Sie dies beobachten, indem Sie das Anwendungsfenster vergrößern oder verkleinern. Die Wettersymbole passen sich der Fenstergröße an, ohne dass die Qualität darunter leidet.

Zudem lassen sich animierte Effekte wie Zooms ohne Qualitätsverlust hinzufügen. Dies lässt sich beobachten, wenn man mit der Maus über die Wettersymbole fährt.

Für jeden Anwendungsfall, bei dem die Zielgröße unbekannt ist oder die Anzahl der Möglichkeiten so groß ist, dass die Erstellung spezifischer Pixmaps für alle Fälle unpraktisch wäre, kann die Verwendung von Formen für Symbole daher sinnvoll sein und die Leistungskosten für die Rasterung der Formen zur Laufzeit rechtfertigen.

Karte von Europa

Das Beispiel „Wettervorhersage“ verwendet ebenfalls eine vektorisierte Karte von Europa. Dies erleichtert die Erstellung von Effekten wie dem Heranzoomen der Karte, wenn wir ein bestimmtes Land hervorheben möchten. Da jedes Land zudem eine separate Unterform ist, können wir unterschiedliche Füllfarben und Konturen unabhängig voneinander anwenden.

Klicken Sie auf die Karte, um ein Land zu vergrößern. Der Maßstab wird so angepasst, dass die Landesform das Fenster ausfüllt, und die Füllfarbe wird etwas dunkler.

Ländernamen-Beschriftungen

Beim Vergrößern eines Landes erscheint dessen Name quer über die Landesform. Diese Beschriftung wird ebenfalls mit „ QtQuick.Shapes “ erstellt, und zwar mithilfe des Komponententyps „ PathText “, der eine Zeichenfolge in eine darstellbare Form umwandelt.

Dies ist nicht die übliche Vorgehensweise zum Erstellen von Textbeschriftungen in „ Qt Quick “. Für die meisten Zwecke ist die Verwendung des Elements „ Text “ der effizienteste und bequemste Ansatz. Allerdings gibt es bestimmte Visualisierungseffekte, die von „ QtQuick.Shapes “ unterstützt werden, die vom regulären Element „ Text “ jedoch nicht unterstützt werden. Farbverläufe bei der Füllung sind ein solcher Effekt.

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

Um dies zu veranschaulichen, wendet das Beispiel „Wettervorhersage“ einen dezenten radialen Farbverlauf auf die Deckkraft der Länderbeschriftungen an, sodass diese an den Rändern scheinbar in die Karte übergehen.

Verschiedene Arten von Renderern

Das Beispiel „Wettervorhersage“ veranschaulicht mehrere verschiedene Anwendungsfälle für QtQuick.Shapes. Darüber hinaus lässt sich anhand dieses Beispiels erkennen, welche Vor- und Nachteile die verschiedenen vom Modul unterstützten Renderer haben.

Klicken Sie auf das Zahnrad in der oberen linken Ecke, um ein Einstellungsfenster zu öffnen, in dem verschiedene Ansätze zur Rasterisierung ausgewählt werden können.

QtQuick.Shapes preferredRendererType unterstützt zwei verschiedene Renderer, die über die Eigenschaft „ “ ausgewählt werden können. Der im Beispiel bevorzugte Renderer ist „ “. Dieser unterstützt hardwarebeschleunigte Kurven und integriertes Antialiasing. Er ist nicht der Standard-Renderer in „ “, wird im Beispiel jedoch beim Start automatisch ausgewählt. CurveRenderer QtQuick.Shapes

Der Standard-Renderer in „ Qt Quick Shapes“ ist „ GeometryRenderer “. Dieser glättet die Kurven der Form zu sehr kleinen geraden Linien und zeichnet die Form als Polygon. Das Neuzeichnen der Form ist effizienter als mit „ CurveRenderer “, doch bei bestimmten Maßstäben wird sichtbar, dass die Kurven durch Linien approximiert werden.

Zudem unterstützt der „ GeometryRenderer “ kein Antialiasing, sodass Sie bei dessen Verwendung in der Regel Multi-Sampling aktivieren sollten. Dies kann erreicht werden, indem die Formen in Ebenen gerendert und dort Multi-Sampling aktiviert wird. Da wir die Formen in diesem Modus in Off-Screen-Puffer rendern, wird zusätzlicher Grafikspeicher benötigt und für jede Form ist ein zusätzlicher Rendering-Durchgang erforderlich.

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

Das Einstellungsfenster bietet außerdem die Option, den „ GeometryRenderer “ zusammen mit 4-fachem Multi-Sampling zu verwenden, sodass dessen Qualität mit dem integrierten Antialiasing des „ CurveRenderer “ verglichen werden kann.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Beispielprojekt @ code.qt.io