Gráficos 2D en Qt

Los gráficos bidimensionales son el núcleo de las capacidades de la interfaz de usuario de Qt. Esta página proporciona una visión general de las herramientas y APIs a tu disposición para renderizar tus propios gráficos 2D. También pretende aclarar la diferencia entre APIs que realizan tareas similares.

Se trata de una visión general de alto nivel, centrada en las formas directas de renderizar primitivas gráficas como círculos, rectángulos, formas complejas e imágenes. Para una visión de bajo nivel de los gráficos internos de Qt, consulte la documentación sobre gráficos.

Qt también incluye capacidades de renderizado 3D de alto nivel con su propio conjunto de APIs y herramientas. La siguiente visión general se centrará en los gráficos bidimensionales, por lo que Qt Quick 3D y los componentes relacionados no se tratarán aquí.

Qt Quick

Qt Quick tiene las herramientas para renderizar gráficos 2D acelerados por hardware y animados. Sirve de base para los componentes de interfaz de usuario de Qt Quick Controls.

El módulo Qt Quick proporciona primitivas esenciales como rectangles, text e imágenes. Éstas suelen ser la base de una interfaz de usuario bidimensional.

Las interfaces de usuario de Qt Quick pueden transformarse y animarse con una baja sobrecarga de rendimiento, y esta promesa constituye el núcleo del módulo. La API es declarativa, lo que permite a Qt optimizar cómo se almacenan los gráficos, cómo se renderizan y cómo se gestionan las actualizaciones de las animaciones.

Qt Quick Formas

Además de las primitivas básicas, Qt Quick tiene APIs para renderizar formas más complejas. Se puede acceder a ellas importando el módulo Qt Quick Shapes en tu código.

Qt Quick Shapes permite construir paths arbitrarios a partir de operaciones de trayectoria como move-to, line-to, cubic-to y arc-to.

Cada trayectoria puede tener un trazo definido por un rico conjunto de opciones. Además, puede rellenarse con un color sólido, un degradado, una imagen o incluso otro elemento de Qt Quick.

El ejemplo deQt Quick Shapes muestra cómo se puede renderizar el clásico tigre de GhostScript utilizando trazados construidos con Qt Quick Shapes.

Renderizador de curvas

Por defecto, Qt Quick Shapes utiliza multimuestreo para el antialiasing. Además, las curvas se reducen a segmentos de línea cortos, lo que puede resultar visible al ampliar la forma. Estableciendo la propiedad preferredRendererType del elemento Shape a Shape.CurveRenderer, se utilizará internamente un renderizador diferente. Este renderizador de curvas resuelve las curvas en la propia GPU y aplica antialiasing sin MSAA.

Esto supone un coste adicional para el rendimiento la primera vez que se renderiza la forma. Después de esto, sin embargo, la forma puede ser suavemente escalada y transformada sin coste adicional.

Otras operaciones

Además de las operaciones básicas para construir un trazado, Qt Quick Shapes también incluye algunos componentes de gran utilidad.

• El componente PathQuad permite añadir una curva cuadrática al trazado.
• El componente PathRectangle puede utilizarse para construir un rectángulo, opcionalmente con esquinas redondeadas.
• El componente PathSvg puede utilizarse para construir un trazado utilizando la sintaxis de trazados de SVG. (Nota: este componente sólo proporciona una forma compacta de describir un trazado, no admite toda la sintaxis SVG).
• El componente PathText puede utilizarse para añadir contornos de una fuente a la ruta. Es un complemento del componente Qt Quick's Text. Puede utilizarse para efectos avanzados, por ejemplo, rellenos de degradado y operaciones de trazado como restar el texto de otra forma.

Imágenes de trama

Las imágenes de trama (o mapas de píxeles) pueden visualizarse en Qt Quick utilizando el componente Imagen. El módulo Qt GUI (PNG, JPEG, BMP y GIF). Además, el módulo Qt Image Formats dispone de plugins para cargar otros formatos de imagen. Siempre que su aplicación pueda acceder al plugin de un determinado formato, éste podrá cargarse mediante el componente Imagen.

Imágenes vectoriales

Una limitación de las imágenes rasterizadas es que no pueden escalarse o transformarse de otro modo sin causar cierta reducción de la calidad. Para imágenes que vayan a mostrarse en distintos tamaños o con transformaciones, suele ser preferible utilizar un formato de imagen vectorial.

El componente VectorImage puede utilizarse para incluir gráficos vectoriales escalables directamente en su aplicación Qt Quick. Actualmente admite el formato SVG por defecto. Mediante el despliegue de un plugin con su aplicación, también se puede hacer que soporte el formato Lottie.

VectorImage analiza el documento y crea una escena Qt Quick en memoria que representa su contenido, utilizando Qt Quick Shapes y otras primitivas. Por lo tanto, se comportará igual que si la imagen vectorial se hubiera escrito utilizando Qt Quick.

Las imágenes vectoriales también pueden convertirse a QML con antelación, utilizando las herramientas svgtoqml y lottietoqml. De este modo se crea la misma representación de la imagen vectorial utilizando componentes de Qt Quick. Sin embargo, en lugar de crear la representación en memoria, se guarda en un archivo. Pregenerar el archivo QML significa que puede precompilarse como parte de los activos de la aplicación, lo que ahorrará algo de tiempo al cargarlo.

El ejemplo del pronóstico del tiempo muestra cómo puede utilizarse svgtoqml en una aplicación. Los símbolos meteorológicos, los mapas y los iconos son archivos SVG que se han convertido a QML y se han cargado como elementos en la escena de la aplicación.

Del mismo modo, la herramienta lottietoqml puede utilizarse para convertir animaciones Lottie en QML.

Imágenes vectoriales prerasterizadas

Para las imágenes vectoriales que sólo se muestran en un único tamaño, es más eficiente rasterizarlas en mapas de píxeles con antelación y mostrarlas utilizando Image. A menudo, estas imágenes se almacenan como SVG en los activos de origen de la aplicación y luego se convierten a PNG (por ejemplo) en tamaños predefinidos. Esto suele hacerse como parte del proceso de creación y empaquetado de la aplicación.

Renderizar una imagen es más rápido que renderizar las formas complejas, por lo que para imágenes estáticas este es el enfoque óptimo. Sin embargo, para algunas aplicaciones no es conveniente realizar esta conversión en el momento de la compilación. Si la aplicación se dirige a muchos factores de forma diferentes, por ejemplo, la lista de tamaños predefinidos para cubrirlos todos puede ser muy larga y difícil de predecir. Dado que cada imagen prerrenderizada consume espacio extra en el despliegue de la aplicación, también hay un coste que pagar por este enfoque.

Por lo tanto, Qt también permite rasterizar archivos SVG a un tamaño específico cuando se carga la imagen. Esto se puede hacer simplemente cargando el archivo a través del componente Image normal. La propiedad sourceSize se puede utilizar para controlar el tamaño rasterizado de la imagen.

Cargar el SVG a través de Image es diferente de cargarlo a través de VectorImage en los siguientes aspectos:

• Con Image, la imagen se rasteriza en la CPU antes de cargarse como textura. Por lo tanto, hay un coste de carga adicional que depende del tamaño objetivo de la imagen rasterizada. Sin embargo, el renderizado posterior de la misma imagen será tan rápido como si la imagen se hubiera rasterizado previamente y cargado como un mapa de píxeles.
• Además, la imagen rasterizada puede consumir más memoria, dependiendo de la complejidad de la imagen vectorial y del tamaño de los datos rasterizados.
• Escalar/transformar la imagen tiene los mismos inconvenientes que si se hubiera cargado como un mapa de píxeles.
• Si la imagen tiene animaciones, la Imagen sólo mostrará el primer fotograma.

Por lo tanto, como regla general, el uso de imágenes vectoriales prerasterizadas será mejor cuando la imagen no esté animada y su tamaño permanezca igual durante todo el tiempo de vida de la aplicación. Si las imágenes son rasterizadas en tiempo de compilación por una herramienta de terceros, o en tiempo de ejecución cuando Qt carga la imagen es un compromiso entre el tiempo de carga y la conveniencia/tamaño de despliegue.

El ejemplo de imagen vectorial muestra un archivo SVG visualizado a diferentes escalas utilizando Image, VectorImage y un archivo QML generado con svgtoqml. Cuando se muestra a su tamaño original, el renderizado tiene el mismo aspecto en todos los casos, y la Imagen será ligeramente más rápida de renderizar. A escalas más altas, la Imagen se vuelve borrosa y pixelada, mientras que los otros enfoques se mantienen nítidos y fieles a la fuente.

Gráficos vectoriales animados

Las animaciones son el núcleo de la oferta de Qt Quick. Muchas animaciones de gráficos vectoriales pueden ejecutarse sin cambiar las geometrías de los elementos, por lo que se benefician del renderizador acelerado por hardware de Qt Quick.

VectorImagesvgtoqml y lottietoqml admiten animaciones para un subconjunto seleccionado de propiedades.

El ejemplo lottietoqml muestra cómo convertir archivos Lottie animados a QML. Como se ve en esta captura de pantalla, varias imágenes animadas están dispuestas en una cuadrícula. Cada una de ellas puede ampliarse sin artefactos de escala ni pérdida de fidelidad.

Efectos

El soporte para efectos de post-procesado se incluye como una característica central en Qt Quick. Cualquier elemento puede convertirse en una textura y el componente ShaderEffect puede utilizarse para aplicarle cualquier efecto.

Además de este soporte de bajo nivel para efectos, Qt Quick también tiene algunos componentes de alto nivel para facilitar el proceso.

El componente MultiEffect permite aplicar a un elemento uno o varios de un conjunto predefinido de efectos comunes.

Para casos de uso más complejos, el componente Qt Quick Effect Maker proporciona una herramienta visual en la que se pueden encadenar efectos predefinidos y personalizados y generar el código de sombreado para utilizarlo con ShaderEffect.

QPainter

QPainter es la base de Qt Widgets. Proporciona una API imperativa para dibujar formas e imágenes complejas con un antialiasing perfecto.

Las formas pueden especificarse mediante QPainterPath y el renderizador también admite directamente primitivas como texto e imágenes.

QPainter es principalmente un renderizador de software y está optimizado para pequeñas actualizaciones parciales de la pantalla. Por lo tanto, es un buen ajuste para las interfaces tradicionales, de estilo de escritorio de Qt Widgetsdonde la mayor parte de la interfaz de usuario es estática de fotograma a fotograma. Por lo tanto, renderizar escenas 2D grandes y complejas con él puede ser costoso, y podría valer la pena considerar Qt Quick Shapes en su lugar.

Por otro lado, la calidad de renderizado es mayor, por lo que para muchos casos de uso seguirá siendo preferible. Al renderizar una imagen SVG a través de Image como se ha descrito anteriormente, QPainter será el renderizador subyacente.

Si el objetivo es la perfección del píxel, y las actualizaciones son raras y/o se limitan a pequeñas regiones, entonces QPainter es una herramienta poderosa. Si se convierte en un cuello de botella para el rendimiento, puede considerar pasar a utilizar Qt Quick y Qt Quick Shapes en su lugar.

Componentes de nivel superior

Sobre la base de estas primitivas gráficas básicas, Qt también proporciona muchos componentes especializados de alto nivel.

Qt Quick Controls es uno de estos módulos. Proporciona un conjunto rico y estilizable de componentes comunes de interfaz de usuario. Del mismo modo, Qt Widgets proporciona lo mismo para las aplicaciones basadas en QPainter.

Además, Qt Graphs es un módulo de visualización de datos. Proporciona muchos componentes diferentes para visualizar conjuntos de datos y gráficos en una Qt Quick aplicación. Qt Graphs Soporta gráficos 2D y 3D.