Ejemplo de previsión meteorológica

Este ejemplo se ha diseñado para que parezca una aplicación de previsión meteorológica para Europa. Demuestra algunas maneras diferentes en que la API QtQuick.Shapes puede ser útil en una aplicación, y cómo las diferentes propiedades pueden afectar la calidad y el rendimiento de la representación.

Todos los gráficos del ejemplo se originan como archivos .svg que se convierten a QML utilizando la herramienta svgtoqml automáticamente en el momento de la compilación.

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

Los archivos QML generados pueden utilizarse en el código de la aplicación como cualquier otro.

Diferentes tipos de formas

El módulo QtQuick.Shapes proporciona APIs para renderizar gráficos vectoriales en una aplicación Qt Quick. Se trata de una alternativa al uso de una trama Image para gráficos 2D y resulta útil si no se conoce de antemano el tamaño objetivo de la imagen. Con Image, el mapa de píxeles rasterizado se crea previamente a un tamaño específico y al escalar la imagen se añade o se resta información. Esto dará lugar a pixelación o desenfoque, dependiendo de si está activada su propiedad smooth.

Con QtQuick.Shapes las formas se describen matemáticamente, como un conjunto de curvas y segmentos de línea, y por tanto pueden escalarse arbitrariamente sin introducir artefactos.

En el ejemplo de la previsión meteorológica, las formas tienen tres usos principales:

• Iconos de la interfaz de usuario, como los símbolos meteorológicos y la rueda dentada del botón "Configuración".
• El mapa general de Europa.
• Etiquetas con los nombres de los países visibles al ampliar el mapa.

Iconos de la interfaz de usuario

Aunque por razones de rendimiento es preferible utilizar imágenes rasterizadas de tamaño adecuado para los iconos, puede resultar inconveniente si la misma aplicación está destinada a pantallas de distintos tamaños. Para que los iconos se vean nítidos en todas las pantallas, hay que pregenerar un gran conjunto de tamaños diferentes. QtQuick.Shapes hace posible que la aplicación haga esta adaptación en tiempo de ejecución, incluyendo los iconos como formas y renderizándolos a un tamaño apropiado para el tamaño de pantalla actual.

Cuando se ejecuta el ejemplo de Previsión meteorológica en un sistema de escritorio, esto se puede comprobar agrandando o reduciendo la ventana de la aplicación. Los símbolos meteorológicos se adaptan al tamaño de la ventana sin reducir la calidad.

Además, se pueden añadir efectos animados, como zooms, sin pérdida de calidad. Esto se puede comprobar pasando el ratón por encima de los símbolos meteorológicos.

Así pues, para cualquier caso de uso en el que se desconozca el tamaño de destino, o en el que el número de posibilidades sea tan grande que la creación de mapas de píxeles específicos para todos sería poco práctica, el uso de formas para los iconos puede ser útil y merece la pena el coste de rendimiento de rasterizar las formas en tiempo de ejecución.

Mapa de Europa

El ejemplo de la previsión meteorológica también utiliza un mapa vectorizado de Europa. Esto facilita la creación de efectos como el zoom en el mapa cuando queremos destacar un país específico. Además, como cada país es una subforma separada, podemos aplicarles diferentes rellenos y trazos de forma independiente.

Haz clic en el mapa para ampliar un país. La escala se ajustará para que la forma del país llene la ventana y el color de relleno será ligeramente más oscuro.

Etiquetas con los nombres de los países

Al hacer zoom sobre un país, su nombre aparece en la forma del país. Esta etiqueta también se crea con QtQuick.Shapes, utilizando el tipo de componente PathText que convierte una cadena en una forma renderizable.

Esta no es la forma típica de crear etiquetas de texto en Qt Quick. Para la mayoría de los propósitos, utilizar el elemento Text es el enfoque más eficiente y conveniente. Sin embargo, hay ciertos efectos de visualización soportados por QtQuick.Shapes que no son soportados por el elemento normal Text. Los gradientes de relleno son uno de estos efectos.

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

Para ilustrarlo, el ejemplo Pronóstico del tiempo aplica un sutil degradado radial a la opacidad de las etiquetas de los países, haciendo que parezcan fundirse con el mapa en los bordes.

Diferentes tipos de renderizadores

El ejemplo Weather Forecast ilustra múltiples casos de uso diferentes para QtQuick.Shapes. Además, puede utilizarse para ver las ventajas e inconvenientes de los distintos renderizadores que admite el módulo.

Haga clic en la rueda dentada en la esquina superior izquierda para abrir un panel de configuración, donde se pueden seleccionar diferentes enfoques de rasterización.

QtQuick.Shapes soporta dos renderizadores diferentes, seleccionables mediante la propiedad preferredRendererType. El renderizador preferido en el ejemplo es CurveRenderer. Éste soporta curvas aceleradas por hardware y antialiasing integrado. No es el renderizador por defecto en QtQuick.Shapes, pero en el ejemplo se selecciona automáticamente al iniciarse.

El renderizador por defecto en Qt Quick Shapes es el GeometryRenderer. Este aplana las curvas de la forma en líneas rectas muy pequeñas y dibuja la forma como un polígono. El redibujado de la forma es más eficiente que con el CurveRenderer, pero a ciertas escalas, el hecho de que las curvas estén aproximadas por líneas será visible.

Además, GeometryRenderer no admite antialiasing, por lo que normalmente es necesario activar el muestreo múltiple cuando se utiliza. Esto puede hacerse renderizando las formas en capas y activando el muestreo múltiple en ellas. Dado que en este modo renderizaremos las formas en buffers fuera de pantalla, se consume memoria gráfica adicional, así como una pasada de renderizado adicional para cada forma.

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

El panel de configuración también ofrece la opción de utilizar GeometryRenderer junto con el multimuestreo 4x, de modo que la calidad de este modo puede compararse con el antialiasing incorporado en CurveRenderer.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Proyecto de ejemplo @ code.qt.io