Ejemplo de imagen vectorial

Hay varias formas diferentes de incluir gráficos vectoriales bidimensionales en tu aplicación Qt. Este ejemplo se centra en el formato SVG y cómo puede utilizarse con Qt. Como base, Qt soporta las características estáticas del perfil SVG Tiny 1.2. Además, Qt SVG soporta opcionalmente algunas características del perfil completo, pero no se utilizan en este ejemplo.

El ejemplo muestra una cuadrícula de 3x3 celdas, cada una de las cuales contiene la misma imagen vectorial de un corazón. La imagen del corazón se proporciona como archivo SVG con el ejemplo.

En la cuadrícula, cada fila muestra la imagen a un factor de escala diferente (1x, 2.5x y 4x respectivamente).

Cada columna representa una forma diferente de renderizar los gráficos vectoriales en Qt. La columna más a la izquierda es un componente Image, la columna central es un componente VectorImage y la columna más a la derecha es una representación pregenerada QML creada con la herramienta svgtoqml.

Cada método de representación de gráficos vectoriales tiene sus propias ventajas e inconvenientes y se adapta a distintos casos de uso. Para tomar una decisión informada sobre cuál utilizar, puede ser útil comprender los detalles de sus diferencias.

El componente Image y Qt SVG

Cuando se utiliza el elemento Image y se establece un archivo SVG como fuente, se invoca el plugin de formato de imagen en Qt SVG. El plugin analizará el archivo SVG, lo rasterizará utilizando el rasterizador de software en QPainter y luego lo proporcionará a Qt Quick como una imagen pixmap. Esto equivale a utilizar la clase QSvgRenderer para dibujar la imagen.

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

Dado que la imagen vectorial se rasteriza a un tamaño específico, cualquier transformación que apliquemos a Image se aplicará a la imagen rasterizada. Esto puede dar lugar a artefactos de pixelación y curvas irregulares.

La carga de una imagen vectorial a través de Image funciona mejor si se solicita la imagen al tamaño exacto que se pretende mostrar. Cuando Image se muestra a escala 1x en la fila superior, su aspecto es idéntico al de las demás, pero a factores de escala superiores empieza a parecer borroso.

Si la imagen sólo se va a mostrar con un único tamaño, ésta suele ser la opción más eficaz. Hay un coste inicial para rasterizar la imagen en el tamaño especificado, pero después de esto, el coste de copiar los datos en la pantalla es muy bajo.

Sin embargo, a medida que la imagen se solicita en diferentes tamaños, el coste inicial aumentará, al igual que el consumo de memoria acumulado. A menudo, los zooms animados de la imagen pueden resultar demasiado caros para ejecutarse a máxima velocidad de fotogramas en dispositivos de gama baja. Estos son los casos de uso para los que deberían considerarse VectorImage y svgtoqml.

El componente VectorImage

Como alternativa a Image, Qt ofrece el componente VectorImage. Éste convierte la imagen SVG en una representación gráfica vectorial en Qt Quick, y la rasterización se produce bajo demanda, en el HW gráfico, a medida que se renderiza en la pantalla.

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

Dado que la imagen no está pre-rasterizada, podemos aplicarle transformaciones sin perder fidelidad a las formas originales. Observe que el ejemplo utiliza el tipo de renderizador VectorImage.CurveRenderer. Esto se recomienda para casos de uso en los que la imagen será transformada y se necesita antialiasing.

Esto significa que podemos mostrar la imagen a cualquier tamaño e incluso animar la escala de la imagen, y todo el trabajo lo hará el hardware gráfico. Sin embargo, cuando el VectorImage se renderice en la pantalla, tendrá un coste ligeramente superior al de renderizar un Image. Esto se debe a que la rasterización de las curvas se produce cada vez que se renderiza el componente y no por adelantado.

Por lo tanto, VectorImage es más adecuado para gráficos vectoriales en los que el tamaño cambiará con frecuencia. También puede ser adecuado cuando el tamaño de destino de la imagen es muy grande y el consumo de memoria es una preocupación. Cuando se utiliza Image, la imagen rasterizada completa debe almacenarse en la memoria gráfica. Por lo tanto, el consumo de memoria aumentará con el tamaño de la imagen. La memoria consumida por VectorImage será la misma, independientemente del tamaño de destino al que se renderice.

La herramienta svgtoqml

El componente VectorImage analiza el archivo SVG y construye una escena equivalente de elementos Qt Quick en tiempo de ejecución.

Si SVG forma parte de los activos de la aplicación, parte del trabajo puede realizarse con antelación utilizando la herramienta svgtoqml. Esta herramienta produce la misma escena que VectorImage, pero en lugar de construirla en tiempo de ejecución, crea un archivo QML que puede incluirse en el proyecto de la aplicación.

En este ejemplo, el archivo heart.svg se convierte automáticamente en Heart.qml durante la compilación.

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

Este componente puede instanciarse en la escena como cualquier otro elemento de Qt Quick.

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

De este modo, no es necesario analizar el archivo SVG cada vez que se inicia la aplicación. Además, la herramienta svgtoqml puede optimizar y analizar las formas para proporcionar al renderizador sugerencias que aceleren aún más su procesamiento en tiempo de ejecución.

La herramienta svgtoqml debe ser considerada para los mismos casos de uso que VectorImage y debe ser preferida siempre que el archivo SVG esté disponible como un activo cuando se construye la aplicación y no sea proporcionado por el usuario final de la aplicación.

Proyecto de ejemplo @ code.qt.io