Graphiques 2D dans Qt

Les graphiques en deux dimensions sont au cœur des capacités d'interface utilisateur de Qt. Cette page offre un aperçu des outils et des API à votre disposition pour afficher vos propres graphiques 2D. Elle vise également à clarifier la différence entre les API qui effectuent des tâches similaires.

Il s'agit d'une présentation générale, axée 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 détaillée du fonctionnement interne des graphiques Qt, consultez la documentation générale sur les graphiques.

Qt intègre également des capacités de rendu 3D haut de gamme avec son propre ensemble d’API et d’outils. La présentation suivante se concentrera sur les graphiques bidimensionnels ; par conséquent, Qt Quick la 3D et les composants associés ne seront pas abordés ici.

Qt Quick

Qt Quick dispose des outils nécessaires au rendu de graphiques 2D animés et accélérés par le matériel. Il sert de base aux composants d’interface utilisateur riches de Qt Quick Controls.

Le module Qt Quick fournit des primitives essentielles telles que rectangles, text et les images. Celles-ci constituent généralement la base d’une interface utilisateur bidimensionnelle.

Les interfaces utilisateur dans Qt Quick peuvent être transformées et animées avec un faible impact sur les performances, et cette promesse est au cœur même du module. L’API est déclarative, ce qui permet à Qt d’optimiser le stockage et le rendu des graphiques, ainsi que la gestion des mises à jour d’animation.

Qt Quick Formes

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

Qt Quick Les formes vous permettent de construire des « paths » arbitraires à partir d’opérations sur les chemins telles que move-to, line-to, cubic-to et arc-to.

Chaque chemin peut comporter un trait défini par un ensemble complet d’options. De plus, il peut être rempli soit d’une couleur unie, soit d’un dégradé, soit d’une image, soit même d’un autre élément d’ Qt Quick.

Qt Quick Shapes" src="images/tiger.png" title="Rendu de GhostScript Tiger à l'aide de tracés Qt Quick Shapes"/>

L'exemple «Qt Quick Shapes » montre comment le tigre classique de GhostScript peut être rendu à l'aide de tracés construits avec les formes d'Qt Quick.

Rendu des courbes

Par défaut, les formes d’ Qt Quick s’appuient sur le multi-échantillonnage pour l’anticrénelage. De plus, 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 calcule les courbes directement sur le GPU et applique l’anticrénelage sans MSAA.

Cela entraîne un léger surcoût en termes de performances lors du premier rendu de la forme. Par la suite, cependant, la forme peut être redimensionnée et transformée en douceur sans surcoût.

Autres opérations

Outre les opérations de base permettant de construire un tracé, Qt Quick Shapes inclut également des composants pratiques et puissants.

• Le composant « PathQuad » permet d’ajouter une courbe quadratique au tracé.
• Le composant « PathRectangle » permet de construire un rectangle, avec des coins arrondis si vous le souhaitez.
• Le composant « PathSvg » permet de construire un tracé à l’aide de la syntaxe SVG des tracés. (Remarque : ce composant offre uniquement un moyen concis de décrire un tracé ; il ne prend pas en charge l’intégralité de la syntaxe SVG.)
• Le composant « PathText » permet d’ajouter des contours issus d’une police au tracé. Il vient compléter le composant « Text » de Qt Quick. Il peut être utilisé pour des effets avancés, par exemple des remplissages en dégradé et des opérations sur les tracés 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. Plusieurs formats d’image sont pris en charge par défaut via le Qt GUI module (PNG, JPEG, BMP et GIF). De plus, le Qt Image Formats module dispose de plugins permettant de charger d’autres formats d’image. Tant que votre application peut accéder au plugin correspondant à un format donné, celui-ci peut être chargé à l’aide du composant Image.

Images vectorielles

L’une des limites des images matricielles est qu’elles ne peuvent pas être redimensionnées ou transformées sans entraîner une perte de qualité. Pour les images destinées à être affichées à différentes tailles ou soumises à des transformations, il est généralement préférable d’utiliser un format d’image vectorielle.

Le composant « VectorImage » permet d’intégrer directement des graphiques vectoriels redimensionnables dans votre application d’ Qt Quick. Il prend actuellement en charge le format SVG par défaut. En déployant un plugin avec votre application, il est également possible de le faire prendre en charge le format Lottie.

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

Les images vectorielles peuvent également être converties au format 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 de composants Qt Quick. Cependant, au lieu de créer cette représentation en mémoire, elle est enregistrée dans un fichier. La pré-génération du fichier QML permet de le précompiler en tant que partie intégrante des ressources de l’application, ce qui permet de gagner du temps lors de son chargement.

L’exemple « Weather Forecast » montre comment utiliser svgtoqml dans une application. Les symboles météo, 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é-rasterisées

Pour les images vectorielles qui ne sont jamais affichées qu’à une seule taille, il est plus efficace de les rasteriser à l’avance en images pixmap et de les afficher à l’aide de la classe `Image`. Souvent, ces images sont stockées au format SVG dans les ressources sources de l’application, puis converties en fichiers PNG (par exemple) à des tailles prédéfinies. Cette opération s’effectue généralement dans le cadre du processus de compilation et de packaging de l’application.

Le rendu d’une image est plus rapide que celui de formes complexes ; 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 compilation. Si l’application cible de nombreux formats d’écran différents, par exemple, la liste des tailles prédéfinies nécessaires pour tous les couvrir peut s’avérer très longue et difficile à prévoir. Comme chaque image pré-rendu occupe de l’espace supplémentaire lors du déploiement de l’application, cette approche a également un coût.

Qt prend donc également en charge la rasterisation des fichiers SVG à une taille spécifique lors du chargement de l’image. Cela peut être réalisé simplement en chargeant le fichier via le composant Image standard. La propriété sourceSize permet de contrôler la taille rasterisée de l’image.

Le chargement du fichier SVG via ` Image ` diffère de celui via ` VectorImage ` de la manière suivante :

• Avec le composant `Image`, l’image est rasterisée sur le processeur avant d’être chargée en tant que texture. Il en résulte donc un surcoût de chargement qui dépend de la taille cible de l’image rasterisée. Le rendu ultérieur de cette même image sera toutefois aussi rapide que si l’image avait été pré-rasterisée et chargée sous forme de pixmap.
• De plus, l’image rasterisée peut consommer davantage de mémoire, en fonction de la complexité de l’image vectorielle et de la taille des données rasterisées.
• La mise à l'échelle ou la transformation de l'image présente les mêmes inconvénients que si elle avait été chargée sous forme de pixmap.
• Si l’image comporte des animations, Image n’affichera alors que la première image.

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

L’exemple d’image vectorielle montre un fichier SVG affiché à différentes échelles à l’aide de `Image`, ` VectorImage ` et d’un fichier QML généré avec `svgtoqml`. Lorsqu’elle est affichée à sa taille d’origine, le rendu est identique dans tous les cas, et ` Image ` sera légèrement plus rapide à afficher. À des échelles plus élevées, l’objet `Image` devient flou et pixélisé, tandis que les autres approches restent nettes et fidèles à la source.

Graphiques vectoriels animés

Les animations sont au cœur de l’offre d’ 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 ainsi pleinement du moteur de rendu accéléré par le matériel d’ Qt Quick.

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

L'exemple lottietoqml montre comment des fichiers Lottie animés peuvent être convertis en QML. Comme le montre cette capture d’écran, plusieurs images animées sont disposées en grille. Chacune d’entre elles peut être agrandie sans artefacts de mise à l’échelle ni perte de fidélité.

Effets

La prise en charge des effets de post-traitement fait partie intégrante d’ Qt Quick. N’importe quel élément peut être transformé en texture et le composant ShaderEffect permet d’y appliquer n’importe quel effet.

En plus de cette prise en charge de bas niveau des effets, Qt Quick propose également quelques composants de haut niveau pour 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.

Qt Quick Effect Maker : outil visuel permettant d'enchaîner et de créer des effets" src="images/quickeffectmaker.png" title="Qt Quick Effect Maker : outil visuel permettant d'enchaîner et de créer des effets"/>

Pour les cas d’utilisation plus complexes, l’Effect Maker d’Qt Quick fournit un outil visuel permettant d’enchaîner des effets prédéfinis et personnalisés, puis de générer le code de shader à utiliser avec ShaderEffect.

QPainter

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

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

QPainter est avant tout un moteur de rendu logiciel, optimisé pour les mises à jour partielles et de petite taille de l’écran. Il convient donc parfaitement aux interfaces traditionnelles de type bureau de Qt Widgets, où la majeure partie de l’interface utilisateur reste statique d’une image à l’autre. Par conséquent, le rendu de scènes 2D volumineuses et complexes avec cet outil peut s’avérer coûteux en ressources, et il pourrait être judicieux d’envisager Qt Quick Shapes une alternative.

En revanche, la qualité de rendu est supérieure ; il restera donc préférable dans de nombreux cas d’utilisation. 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 au pixel près et que les mises à jour sont rares et/ou limitées à de petites zones, alors QPainter est un outil puissant. S’il devient un goulot d’étranglement en termes de 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 personnalisable de composants d’interface utilisateur courants. De même, Qt Widgets offre les mêmes fonctionnalités pour les applications basées sur QPainter.

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