Exemple de prévisions météorologiques

Cet exemple est conçu pour ressembler à une application de prévisions météorologiques pour l'Europe. Il démontre les différentes façons dont l'API QtQuick.Shapes peut être utile dans une application, et comment les différentes propriétés peuvent affecter la qualité et les performances du rendu.

Tous les graphiques de l'exemple proviennent de fichiers .svg qui sont convertis en QML à l'aide de l'outil svgtoqml automatiquement au moment de la construction.

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

Les fichiers QML générés peuvent être utilisés dans le code de l'application comme n'importe quel autre.

Différents types de formes

Le module QtQuick.Shapes fournit des API pour le rendu de graphiques vectoriels dans une application Qt Quick. Il s'agit d'une alternative à l'utilisation d'une image matricielle Image pour les graphiques 2D, utile si la taille cible de l'image n'est pas connue à l'avance. Avec une Image, la pixmap tramée est précréée à une taille spécifique et la mise à l'échelle de l'image ajoutera ou soustraira des informations. Il en résultera une pixellisation ou un flou, selon que la propriété smooth est activée ou non.

Avec QtQuick.Shapes, les formes sont décrites mathématiquement, comme un ensemble de courbes et de segments de ligne, et peuvent donc être mises à l'échelle arbitrairement sans introduire d'artefacts.

Dans l'exemple des prévisions météorologiques, les formes sont principalement utilisées à trois fins :

• Les icônes de l'interface utilisateur, telles que les symboles météorologiques et la roue dentée du bouton "Paramètres".
• La carte générale de l'Europe.
• Les étiquettes des noms de pays visibles lorsque l'on zoome sur la carte.

Icônes d'interface utilisateur

Bien que l'utilisation d'images matricielles de taille appropriée pour les icônes soit généralement préférable pour des raisons de performances, elle peut s'avérer peu pratique si la même application est destinée à plusieurs tailles d'écran différentes. Pour que les icônes soient nettes sur tous les écrans, vous devez prégénérer un grand nombre de tailles différentes. QtQuick.Shapes permet à l'application d'effectuer cette adaptation au moment de l'exécution, en incluant les icônes sous forme de formes et en les rendant à une taille appropriée à la taille actuelle de l'écran.

Lorsque l'exemple des prévisions météorologiques est exécuté sur un système de bureau, il suffit d'agrandir ou de réduire la fenêtre de l'application pour s'en rendre compte. Les symboles météorologiques s'adaptent à la taille de la fenêtre sans perte de qualité.

En outre, des effets animés, tels que des zooms, peuvent être ajoutés sans perte de qualité. On peut s'en rendre compte en survolant les symboles météorologiques.

Ainsi, dans tous les cas d'utilisation où la taille cible est inconnue, ou lorsque le nombre de possibilités est si important que la création de pixmaps spécifiques pour tous les cas ne serait pas pratique, l'utilisation de formes pour les icônes peut s'avérer utile et valoir le coût de performance de la rastérisation des formes au moment de l'exécution.

Carte de l'Europe

L'exemple des prévisions météorologiques utilise également une carte vectorielle de l'Europe. Cela facilite la création d'effets tels que le zoom sur la carte lorsque nous voulons mettre l'accent sur un pays spécifique. En outre, comme chaque pays est une sous-carte distincte, nous pouvons lui appliquer des remplissages et des traits différents de manière indépendante.

Cliquez sur la carte pour zoomer sur un pays. L'échelle sera ajustée de manière à ce que la forme du pays remplisse la fenêtre et la couleur de remplissage sera légèrement plus foncée.

Étiquettes des noms de pays

Lorsque l'on zoome sur un pays, son nom apparaît en travers de la forme du pays. Cette étiquette est également créée avec QtQuick.Shapes, en utilisant le type de composant PathText qui convertit une chaîne de caractères en une forme pouvant être rendue.

Ce n'est pas la façon habituelle de créer des étiquettes de texte dans Qt Quick. Dans la plupart des cas, l'utilisation de l'élément Text est l'approche la plus efficace et la plus pratique. Cependant, certains effets de visualisation pris en charge par QtQuick.Shapes ne le sont pas par l'élément Text. Les gradients de remplissage sont l'un de ces effets.

                        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
                            }
                        }

Pour illustrer cet effet, l'exemple des prévisions météorologiques applique un subtil dégradé radial à l'opacité des étiquettes des pays, ce qui donne l'impression qu'elles se fondent dans la carte sur les bords.

Différents types de rendus

L'exemple des prévisions météorologiques illustre différents cas d'utilisation de QtQuick.Shapes. En outre, il peut être utilisé pour voir les avantages et les inconvénients des différents moteurs de rendu pris en charge par le module.

Cliquez sur la roue dentée dans le coin supérieur gauche pour ouvrir un panneau de configuration, où différentes approches de tramage peuvent être sélectionnées.

QtQuick.Shapes prend en charge deux rendus différents, sélectionnables à l'aide de la propriété preferredRendererType. Le moteur de rendu préféré dans l'exemple est CurveRenderer. Il prend en charge les courbes accélérées par le matériel et l'anticrénelage intégré. Ce n'est pas le moteur de rendu par défaut dans QtQuick.Shapes, mais dans l'exemple, il est automatiquement sélectionné au démarrage.

Le moteur de rendu par défaut dans Qt Quick Shapes est GeometryRenderer. Il aplatit les courbes de la forme en très petites lignes droites et dessine la forme comme un polygone. Redessiner la forme est plus efficace qu'avec CurveRenderer, mais à certaines échelles, le fait que les courbes sont approximées par des lignes sera visible.

En outre, le site GeometryRenderer ne prend pas en charge l'anticrénelage, de sorte que vous voudrez généralement activer le multi-échantillonnage lorsque vous l'utiliserez. Pour ce faire, il suffit de rendre les formes sous forme de calques et d'activer le multi-échantillonnage sur ces derniers. Étant donné que nous rendrons les formes dans des tampons hors écran dans ce mode, cela consomme de la mémoire graphique supplémentaire ainsi qu'une passe de rendu supplémentaire pour chaque forme.

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

Le panneau de configuration offre également la possibilité d'utiliser le site GeometryRenderer avec un multi-échantillonnage 4x, de sorte que la qualité de ce dernier puisse être comparée à l'anticrénelage intégré du site CurveRenderer.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Exemple de projet @ code.qt.io