Graphiques 2D dans Qt

Les graphiques en deux dimensions sont au cœur des capacités de l'interface utilisateur de Qt Core. Cette page fournit une vue d'ensemble des outils et des API à votre disposition pour rendre vos propres graphiques en 2D. Elle vise également à clarifier les différences entre les API qui effectuent des tâches similaires.

Il s'agit d'une vue d'ensemble de haut niveau, qui se concentre sur les méthodes directes de rendu des primitives graphiques telles que les cercles, les rectangles, les formes complexes et les images. Pour une vue de bas niveau des éléments graphiques internes de Qt, voir la documentation sur la vue d'ensemble des graphiques.

Qt 3D inclut également des capacités de rendu 3D haut de gamme avec son propre ensemble d'API et d'outils. L'aperçu suivant se concentrera sur les graphiques bidimensionnels, de sorte que Qt Quick 3D et les composants connexes ne seront pas abordés ici.

Qt Quick

Qt Quick Le système d'exploitation de l'Internet, le "3D", dispose des outils nécessaires au rendu de graphiques 2D animés et accélérés par le matériel informatique. Il sert de base aux riches composants d'interface utilisateur de Qt Quick Controls.

Le module Qt Quick fournit des primitives essentielles telles que rectangles, text et des images. Ces éléments constituent généralement la base d'une interface utilisateur bidimensionnelle.

Les interfaces utilisateur de Qt Quick peuvent être transformées et animées avec un faible surcoût en termes de performances, et cette promesse est au cœur du module. L'API est déclarative, ce qui permet à Qt d'optimiser la manière dont les graphiques sont stockés, rendus et dont les mises à jour d'animation sont gérées.

Qt Quick Formes

Outre les primitives de base, Qt Quick dispose d'API pour le rendu de formes plus complexes. Vous pouvez y accéder en important le module Qt Quick Shapes dans votre code.

Qt Quick Shapes vous permet de construire des paths arbitraires à partir d'opérations de chemin telles que move-to, line-to, cubic-to et arc-to.

Chaque chemin peut avoir un trait défini par un riche ensemble d'options. En outre, il peut être rempli d'une couleur unie, d'un dégradé, d'une image ou même d'un autre élément Qt Quick.

L'exemple deQt Quick Shapes montre comment le tigre classique de GhostScript peut être rendu en utilisant des chemins construits avec Qt Quick Shapes.

Rendu de courbes

Par défaut, Qt Quick Shapes s'appuie sur le multi-échantillonnage pour l'anticrénelage. En outre, les courbes sont aplaties en segments de ligne courts, ce qui peut être visible si vous zoomez sur la forme. En définissant la propriété preferredRendererType de l'élément Shape sur Shape.CurveRenderer, un moteur de rendu différent sera utilisé en interne. Ce moteur de rendu de courbes résout les courbes sur le GPU lui-même et applique l'anticrénelage sans MSAA.

La première fois que la forme est rendue, il en résulte un coût supplémentaire en termes de performances. Par la suite, cependant, la forme peut être mise à l'échelle et transformée en douceur sans coût supplémentaire.

Autres opérations

Outre les opérations de base permettant de construire une trajectoire, Qt Quick Shapes comprend également de puissants composants de commodité.

• Le composant PathQuad peut être utilisé pour ajouter une courbe quadratique à la trajectoire.
• Le composant PathRectangle peut être utilisé pour construire un rectangle, éventuellement avec des coins arrondis.
• Le composant PathSvg permet de construire un chemin à l'aide de la syntaxe SVG. (Remarque : ce composant ne fournit qu'un moyen compact de décrire un chemin, il ne prend pas en charge l'ensemble de la syntaxe SVG).
• Le composant PathText peut être utilisé pour ajouter au chemin les contours d'une police. Il vient s'ajouter au composant Qt Quick's Text. Il peut être utilisé pour des effets avancés, par exemple des remplissages en dégradé et des opérations sur le chemin telles que la soustraction du texte d'une autre forme.

Images matricielles

Les images matricielles (ou pixmaps) peuvent être affichées dans Qt Quick à l'aide du composant Image. Un ensemble de formats d'image est pris en charge par défaut par le module Qt GUI (PNG, JPEG, BMP et GIF). En outre, le module Qt Image Formats dispose également de modules d'extension permettant de charger d'autres formats d'image. Tant que votre application peut accéder au plugin pour un certain format, il peut être chargé à l'aide du composant Image.

Images vectorielles

L'une des limites des images matricielles est qu'elles ne peuvent pas être mises à l'échelle ou transformées sans entraîner une réduction de la qualité. Pour les images qui seront affichées à différentes tailles ou avec des transformations, il est généralement préférable d'utiliser un format d'image vectorielle.

Le composant VectorImage peut être utilisé pour inclure des graphiques vectoriels évolutifs directement dans votre application Qt Quick. Il prend actuellement en charge le format SVG par défaut. En déployant un plugin avec votre application, il peut également prendre en charge le format Lottie.

VectorImage analyse le document et crée une scène Qt Quick en mémoire qui représente son contenu, en utilisant Qt Quick Shapes et d'autres primitives. Il se comportera donc de la même manière que si l'image vectorielle avait été écrite à l'aide de Qt Quick.

Les images vectorielles peuvent également être converties en QML à l'avance, à l'aide des outils svgtoqml et lottietoqml. Cela permet de créer la même représentation de l'image vectorielle à l'aide des composants Qt Quick. Cependant, au lieu de créer la représentation en mémoire, elle est enregistrée dans un fichier. La prégénération du fichier QML signifie qu'il peut être précompilé dans le cadre des actifs de l'application, ce qui permet de gagner du temps lors de son chargement.

L'exemple des prévisions météorologiques montre comment svgtoqml peut être utilisé dans une application. Les symboles météorologiques, les cartes et les icônes sont des fichiers SVG qui ont été convertis en QML et chargés en tant qu'éléments dans la scène de l'application.

De même, l'outil lottietoqml peut être utilisé pour convertir des animations Lottie en QML.

Images vectorielles pré-calculées

Pour les images vectorielles qui ne sont jamais affichées qu'à une seule taille, il est plus efficace de les rastériser en pixmaps à l'avance et de les afficher à l'aide d'Image. Souvent, ces images sont stockées sous forme de SVG dans les ressources sources de l'application, puis converties en PNG (par exemple) à des tailles prédéfinies. Cette opération est généralement réalisée dans le cadre du processus de création et de conditionnement de l'application.

Le rendu d'une image est plus rapide que le rendu de formes complexes, et c'est donc l'approche optimale pour les images statiques. Cependant, pour certaines applications, il n'est pas pratique d'effectuer cette conversion au moment de la création. Si l'application vise de nombreux facteurs de forme différents, par exemple, la liste des tailles prédéfinies pour les couvrir tous peut être très longue et difficile à prévoir. Étant donné que chaque image pré-rendue consomme de l'espace supplémentaire dans le déploiement de l'application, cette approche a également un coût.

Qt supporte donc également le tramage des fichiers SVG à une taille spécifique lorsque l'image est chargée. Pour ce faire, il suffit de charger le fichier à l'aide du composant Image habituel. La propriété sourceSize peut être utilisée pour contrôler la taille de l'image tramée.

Le chargement du SVG par l'intermédiaire d'Image diffère du chargement par l'intermédiaire de VectorImage pour les raisons suivantes :

• Avec Image, l'image est tramée sur le processeur avant d'être chargée en tant que texture. Il y a donc un coût de chargement supplémentaire qui dépend de la taille cible de l'image tramée. Le rendu ultérieur de la même image sera cependant aussi rapide que si l'image avait été tramée au préalable et chargée en tant que pixmap.
• En outre, l'image tramée peut consommer plus de mémoire, en fonction de la complexité de l'image vectorielle et de la taille des données tramées.
• La mise à l'échelle/transformation de l'image présente les mêmes inconvénients que si elle était chargée sous forme de pixmap.
• Si l'image comporte des animations, l'image n'affichera que la première image.

En règle générale, il est donc préférable d'utiliser des images vectorielles pré-maîtrisées lorsque l'image n'est pas animée et que sa taille reste inchangée pendant toute la durée de vie de l'application. Que les images soient rastérisées au moment de la construction par un outil tiers, ou au moment de l'exécution lorsque Qt charge l'image, c'est un compromis entre le temps de chargement et la commodité/taille de déploiement.

L'exemple de l'image vectorielle montre un fichier SVG affiché à différentes échelles en utilisant Image, VectorImage et un fichier QML généré avec svgtoqml. Lorsqu'il est affiché à sa taille d'origine, le rendu est le même dans tous les cas et l'image sera légèrement plus rapide à rendre. À des échelles plus élevées, l'image devient floue et pixelisée, alors que les autres approches restent nettes et fidèles à la source.

Graphiques vectoriels animés

Les animations sont au cœur de l'offre de Qt Quick. De nombreuses animations de graphiques vectoriels peuvent être exécutées sans modifier la géométrie des éléments et bénéficient donc du moteur de rendu accéléré par le matériel de Qt Quick.

VectorImageLes fichiers svgtoqml et lottietoqml prennent en charge les animations pour un sous-ensemble sélectionné de propriétés.

L'exemple lottietoqml montre comment les fichiers Lottie animés peuvent être convertis en QML. Comme le montre cette capture d'écran, plusieurs images animées sont disposées dans une grille. Elles peuvent toutes être agrandies sans artefacts de mise à l'échelle ni perte de fidélité.

Effets

La prise en charge des effets de post-traitement est une fonctionnalité essentielle de Qt Quick. Tout élément peut être transformé en texture et le composant ShaderEffect peut être utilisé pour lui appliquer n'importe quel effet.

Outre cette prise en charge de bas niveau des effets, Qt Quick dispose également de quelques composants de haut niveau destinés à faciliter le processus.

Le composant MultiEffect permet d'appliquer à un élément un ou plusieurs effets parmi un ensemble prédéfini d'effets courants.

Pour les cas d'utilisation plus complexes, le créateur d'effetsQt Quick fournit un outil visuel qui vous permet d'enchaîner des effets prédéfinis et personnalisés et de générer le code Shader à utiliser avec ShaderEffect.

QPainter

QPainter est la base de Qt Widgets. Il fournit une API impérative pour dessiner des formes et des images complexes avec un anticrénelage parfait au pixel près.

Les formes peuvent être spécifiées à l'aide de QPainterPath et le moteur de rendu prend également directement en charge les primitives telles que le texte et les images.

Le QPainter est avant tout un moteur de rendu logiciel, et il est optimisé pour des mises à jour partielles et plus petites de l'écran. Il convient donc parfaitement aux interfaces traditionnelles, de type bureautique, de Qt Widgetsoù la majeure partie de l'interface utilisateur est statique d'une image à l'autre. Par conséquent, le rendu de scènes 2D complexes et de grande taille peut s'avérer coûteux, et il peut être intéressant d'envisager l'utilisation de Qt Quick Shapes à la place.

D'un autre côté, la qualité du rendu est plus élevée, donc pour de nombreux cas d'utilisation, il sera toujours préférable d'utiliser SVG. Lors du rendu d'une image SVG via Image, comme indiqué précédemment, QPainter sera le moteur de rendu sous-jacent.

Si l'objectif est la perfection du pixel et que les mises à jour sont rares et/ou limitées à de petites régions, QPainter est un outil puissant. S'il devient un goulot d'étranglement pour les performances, vous pouvez envisager de passer à l'utilisation de Qt Quick et Qt Quick Shapes à la place.

Composants de niveau supérieur

En s'appuyant sur ces primitives graphiques de base, Qt fournit également de nombreux composants spécialisés de haut niveau.

Qt Quick Controls est l'un de ces modules. Il fournit un ensemble riche et stylisable de composants d'interface utilisateur communs. De même, Qt Widgets fournit la même chose pour les applications basées sur QPainter.

En outre, QPainter Qt Graphs est un module de visualisation de données. Il fournit de nombreux composants différents pour visualiser des ensembles de données et des graphiques dans une application. Qt Quick application. Qt Graphs Il prend en charge les graphiques en 2D et en 3D.