Exemple d'image vectorielle

Il existe plusieurs façons d’intégrer des graphiques vectoriels en deux dimensions dans votre application Qt. Cet exemple se concentre sur le format SVG et sur la manière dont il peut être utilisé avec Qt. Par défaut, Qt prend en charge les fonctionnalités statiques du profil « SVG Tiny 1.2 ». De plus, Qt SVG il prend en charge, de manière facultative, certaines fonctionnalités du profil complet, mais celles-ci ne sont pas utilisées dans cet exemple.

L'exemple présente une grille de 3x3 cellules, chacune contenant la même image vectorielle représentant un cœur. L'image du cœur est fournie sous forme de fichier SVG avec l'exemple.

Dans la grille, chaque ligne affiche l’image à un facteur d’échelle différent (respectivement 1x, 2,5x et 4x).

Chaque colonne représente une méthode différente de rendu des graphiques vectoriels dans Qt. La colonne la plus à gauche correspond à un composant « Image », la colonne centrale à un composant « VectorImage » et la colonne la plus à droite à une représentation « QML » pré-générée à l’aide de l’outil svgtoqml.

Chaque méthode de rendu des graphiques vectoriels présente ses propres avantages et inconvénients, et répond à des cas d’utilisation différents. Pour choisir en connaissance de cause celle qui convient le mieux, il peut être utile de comprendre en détail en quoi elles diffèrent.

Le composant Image et Qt SVG

Lorsque vous utilisez l’élément ` Image ` et que vous définissez un fichier ` SVG ` comme source, cela déclenche le plugin de format d’image dans Qt SVG. Le plugin analysera le fichier « SVG », le rasterisera à l’aide du rasteriseur logiciel d’ QPainter, puis le transmettra à Qt Quick sous forme d’image pixmap. Cela revient à utiliser la classe « QSvgRenderer » pour dessiner l’image.

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

Comme l’image vectorielle est rasterisée à une taille spécifique, toute transformation appliquée à Image s’appliquera à l’image rasterisée. Cela peut entraîner des artefacts de pixellisation et des courbes irrégulières.

Le chargement d’une image vectorielle via Image fonctionne mieux si vous demandez l’image à la taille exacte à laquelle vous comptez l’afficher. Lorsque l’ Image est affichée à une échelle de 1x dans la ligne supérieure, elle semble identique aux autres, mais à des échelles plus élevées, elle commence à paraître floue.

Si l’image ne doit être affichée qu’à une seule taille, cette option est généralement la plus performante. La rastérisation de l’image à la taille spécifiée entraîne un coût initial, mais une fois cette opération effectuée, le coût de copie des données à l’écran est très faible.

Cependant, à mesure que l’image est demandée dans plusieurs tailles différentes, le coût initial augmente, tout comme la consommation de mémoire cumulée. Les zooms animés de l’image peuvent souvent s’avérer trop gourmands en ressources pour fonctionner à la fréquence d’images maximale sur des appareils bas de gamme. C’est dans ces cas d’utilisation qu’il convient d’envisager l’utilisation de ` VectorImage ` et `svgtoqml`.

Le composant VectorImage

Comme alternative à Image, Qt fournit le composant VectorImage. Celui-ci convertit l’image SVG en une représentation graphique vectorielle au format Qt Quick, et la rastérisation s’effectue à la demande, sur le matériel graphique, au moment où elle est affichée à l’écran.

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

Comme l’image n’est pas pré-rastrifiée, nous pouvons lui appliquer des transformations sans perte de fidélité par rapport aux formes d’origine. Notez que l’exemple utilise le type de rendu VectorImage.CurveRenderer. Ce type est recommandé pour les cas d’utilisation où l’image sera transformée et où l’anticrénelage est nécessaire.

Cela signifie que nous pouvons afficher l’image à n’importe quelle taille et même animer son échelle, et que tout le travail sera effectué par le matériel graphique. Cependant, lorsque l’image « VectorImage » est affichée à l’écran, cela entraîne un coût légèrement plus élevé que le rendu d’une image « Image ». En effet, la rastérisation des courbes s’effectue à chaque rendu du composant et non à l’avance.

Par conséquent, la méthode ` VectorImage ` est particulièrement adaptée aux graphiques vectoriels dont la taille change fréquemment. Elle peut également convenir lorsque la taille de destination de l’image est très grande et que la consommation de mémoire est un facteur important. Lorsque vous utilisez la méthode ` Image`, l’image entièrement rastérisée doit être stockée dans la mémoire graphique. La consommation de mémoire varie donc en fonction de la taille de l’image. La mémoire consommée par VectorImage sera la même, quelle que soit la taille de destination à laquelle elle est rendue.

L'outil svgtoqml

Le composant ` VectorImage ` analyse le fichier ` SVG ` et construit une scène équivalente composée d’éléments ` Qt Quick ` lors de l’exécution.

Si le fichier « SVG » fait partie des ressources de l’application, une partie du travail peut être effectuée à l’avance à l’aide de l’outil svgtoqml. Cet outil génère la même scène que VectorImage, mais au lieu de la construire au moment de l’exécution, il crée un fichier QML qui peut être intégré au projet d’application.

Dans cet exemple, le fichier heart.svg est automatiquement converti en Heart.qml lors de la compilation.

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"
)

Ce composant peut être instancié dans la scène comme n’importe quel autre élément Qt Quick.

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

Grâce à cette approche, il n’est pas nécessaire d’analyser le fichier « SVG » à chaque démarrage de l’application. De plus, l’outil « svgtoqml » peut optimiser et analyser les formes, afin de fournir au moteur de rendu des indications qui accéléreront encore davantage son traitement en temps réel.

L’outil svgtoqml doit être envisagé pour les mêmes cas d’utilisation que VectorImage et doit être privilégié chaque fois que le fichier SVG est disponible en tant que ressource lors de la compilation de l’application et n’est pas fourni par l’utilisateur final de l’application.

Exemple de projet sur code.qt.io