Exemple d'image vectorielle

Il existe plusieurs façons d'inclure des images vectorielles bidimensionnelles dans votre application Qt. Cet exemple se concentre sur le format SVG et sur la manière dont il peut être utilisé avec Qt. Au départ, Qt supporte les caractéristiques statiques du profil SVG Tiny 1.2. En outre, Qt Qt SVG supporte optionnellement certaines fonctionnalités du profil complet, mais celles-ci ne sont pas utilisées dans cet exemple.

L'exemple montre une grille de 3x3 cellules, chacune contenant la même image vectorielle d'un cœur. L'image du cœur est fournie en tant que fichier SVG avec l'exemple.

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

Chaque colonne représente une manière différente de rendre les graphiques vectoriels dans Qt. La colonne la plus à gauche est un composant Image, la colonne centrale est un composant VectorImage et la colonne la plus à droite est une représentation QML prégénérée créé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 prendre une décision éclairée sur celle à utiliser, il peut être utile de comprendre les détails de leurs différences.

Le composant Image et Qt SVG

Lorsque vous utilisez l'élément Image et que vous définissez un fichier SVG comme source, vous invoquez le plugin de format d'image dans le fichier Qt SVG. Le plugin analysera le fichier SVG, le rastérisera à l'aide du rastériseur logiciel de QPainter, puis le fournira à Qt Quick sous la forme d'une image pixmap. Cela équivaut à utiliser la classe QSvgRenderer pour dessiner l'image.

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

Étant donné que l'image vectorielle est tramée à une taille spécifique, toute transformation que nous appliquons à l'adresse Image sera appliquée à l'image tramé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 que vous avez l'intention d'afficher. Lorsque l'image Image est affichée à une échelle de 1x dans la rangée supérieure, elle est identique aux autres, mais à des facteurs d'échelle plus élevés, 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. Il y a un coût de départ pour rastériser l'image à la taille spécifiée, mais ensuite, le coût de la copie des données sur l'écran est très faible.

Mais si l'image est demandée à plusieurs tailles différentes, le coût de démarrage augmentera, de même que la consommation de mémoire cumulée. Les zooms animés de l'image peuvent souvent devenir trop coûteux pour être exécutés à la fréquence d'image maximale sur les appareils bas de gamme. C'est dans ces cas d'utilisation que VectorImage et svgtoqml devraient être envisagés.

Le composant VectorImage

Comme alternative à Image, Qt fournit le composant VectorImage. Celui-ci convertit l'image SVG en une représentation graphique vectorielle dans Qt Quick, et le tramage se fait à la demande, sur le HW graphique, au fur et à mesure que l'image est rendue à l'écran.

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

Comme l'image n'est pas pré-rastérisée, nous pouvons lui appliquer des transformations sans perdre la fidélité aux formes originales. 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 l'échelle de l'image, et que tout le travail sera effectué par le matériel graphique. Toutefois, lorsque le site VectorImage est rendu à l'écran, le coût est légèrement supérieur à celui du rendu d'un site Image, car le tramage des courbes s'effectue à chaque fois que le composant est rendu et non pas à l'avance.

Par conséquent, VectorImage convient mieux aux graphiques vectoriels dont la taille change fréquemment. Il peut également convenir lorsque la taille de destination de l'image est très grande et que la consommation de mémoire est un problème. Lors de l'utilisation de Image, l'image matricielle complète doit être stockée dans la mémoire graphique. La consommation de mémoire augmente donc avec la taille de l'image. La mémoire consommée par VectorImage sera la même, quelle que soit la taille de la destination du rendu.

L'outil svgtoqml

Le composant VectorImage analyse le fichier SVG et construit une scène équivalente d'éléments Qt Quick au moment 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 en utilisant l'outil svgtoqml. Cet outil produit 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 inclus dans le projet d'application.

Dans cet exemple, le fichier heart.svg est converti en Heart.qml automatiquement pendant la construction.

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. En outre, l'outil svgtoqml peut optimiser et analyser les formes, afin de fournir au moteur de rendu des indications qui accéléreront encore son traitement en cours d'exécution.

L'outil svgtoqml doit être considéré pour les mêmes cas d'utilisation que VectorImage et doit être préféré lorsque le fichier SVG est disponible en tant qu'atout lors de la construction de l'application et n'est pas fourni par l'utilisateur final de l'application.

Exemple de projet @ code.qt.io