BorderImage QML Type

Pinta un borde basado en una imagen. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : enumeration
• mirror : bool
• progress : real
• retainWhileLoading : bool (since 6.8)
• smooth : bool
• source : url
• sourceSize : size
• status : enumeration
• verticalTileMode : enumeration

Descripción detallada

El tipo BorderImage se utiliza para crear bordes a partir de imágenes escalando o embaldosando partes de cada imagen.

Un BorderImage divide una imagen de origen, especificada mediante la propiedad source, en 9 regiones, como se muestra a continuación:

Cuando se escala la imagen, las regiones de la imagen de origen se escalan o se embaldosan para crear la imagen de borde mostrada de la siguiente manera:

• Las esquinas (regiones 1, 3, 7 y 9) no se escalan en absoluto.
• Las regiones 2 y 8 se escalan según horizontalTileMode.
• Las regiones 4 y 6 se escalan según verticalTileMode.
• El centro (región 5) se escala según horizontalTileMode y verticalTileMode.

Las regiones de la imagen se definen utilizando el grupo de propiedades border, que describe la distancia desde cada borde de la imagen de origen a utilizar como borde.

Ejemplos de uso

Los siguientes ejemplos muestran los efectos de los distintos modos sobre una imagen. Las líneas guía se superponen a la imagen para mostrar las diferentes regiones de la imagen, tal y como se ha descrito anteriormente.

A modo de comparación, se muestra una imagen sin escalar utilizando un simple elemento Imagen. Aquí tenemos líneas superpuestas para mostrar cómo nos gustaría dividirla con BorderImage:

Image {
    source: "pics/borderframe.png"
    anchors.centerIn: parent
}

Pero cuando se utiliza un BorderImage para mostrar la imagen, se utiliza la propiedad border para determinar las partes de la imagen que quedarán dentro de las áreas de las esquinas sin escalar, y las partes que se estirarán horizontal y verticalmente. A continuación, puede darle un tamaño mayor que el de la imagen original. Como la propiedad horizontalTileMode está ajustada a BorderImage.Stretch, las partes de la imagen en las regiones 2 y 8 se estiran horizontalmente. Como la propiedad verticalTileMode está establecida en BorderImage.Stretch, las partes de la imagen en las regiones 4 y 6 se estiran verticalmente:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

De nuevo, se utiliza un BorderImage grande para mostrar la imagen. Con la propiedad horizontalTileMode establecida a BorderImage.Repeat, las partes de la imagen en las regiones 2 y 8 se colocan en mosaico para que llenen el espacio en la parte superior e inferior del elemento. Del mismo modo, la propiedad verticalTileMode se establece en BorderImage.Repeat, por lo que las partes de la imagen en las regiones 4 y 6 se mosaico para llenar el espacio a la izquierda y derecha del elemento:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

En algunas situaciones, la anchura de las regiones 2 y 8 puede no ser un múltiplo exacto de la anchura de las regiones correspondientes en la imagen de origen. Del mismo modo, la altura de las regiones 4 y 6 puede no ser un múltiplo exacto de la altura de las regiones correspondientes. Si utiliza el modo BorderImage.Round, elegirá un número entero de mosaicos y los encogerá para que quepan:

BorderImage {
    anchors { fill: parent; margins: 6 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Round
    verticalTileMode: BorderImage.Round
    source: "pics/borderframe.png"
}

El ejemplo Border Image en Qt Quick Ejemplos - Elementos de Imagen muestra cómo se puede utilizar un BorderImage para simular un efecto de sombra en un elemento rectangular.

Carga de imágenes

La imagen de origen puede no cargarse instantáneamente, dependiendo de su ubicación original. El progreso de la carga puede monitorizarse con la propiedad progress.

Véase también Image y AnimatedImage.

Documentación de propiedades

asynchronous : bool

Especifica que las imágenes del sistema de archivos local deben cargarse de forma asíncrona en un subproceso separado. El valor por defecto es false, haciendo que el hilo de la interfaz de usuario se bloquee mientras se carga la imagen. Establecer asynchronous a true es útil cuando mantener una interfaz de usuario responsiva es más deseable que tener imágenes inmediatamente visibles.

Tenga en cuenta que esta propiedad sólo es válida para imágenes leídas desde el sistema de archivos local. Las imágenes cargadas a través de un recurso de red (por ejemplo, HTTP) siempre se cargan de forma asíncrona.

border group

Las 4 líneas de borde (2 horizontales y 2 verticales) dividen la imagen en 9 secciones, como se muestra a continuación:

Cada línea de borde (izquierda, derecha, superior e inferior) especifica un desplazamiento en píxeles desde el borde respectivo de la imagen de origen. Por defecto, cada línea de borde tiene un valor de 0.

Por ejemplo, la siguiente definición establece la línea inferior a 10 píxeles de la parte inferior de la imagen:

BorderImage {
    border.bottom: 10
    // ...
}

Las líneas de borde también pueden especificarse utilizando .sci file.

cache : bool

Especifica si la imagen debe almacenarse en caché. El valor por defecto es true. Establecer cache a false es útil cuando se trata de imágenes grandes, para asegurarse de que no se almacenan en caché a expensas de las pequeñas imágenes de 'elementos ui'.

currentFrame es el marco visible en ese momento. Por defecto es 0. Puede establecerlo en un número entre 0 y frameCount - 1 para mostrar un marco diferente, si la imagen contiene múltiples marcos.

frameCount es el número de fotogramas de la imagen. La mayoría de las imágenes sólo tienen un fotograma.

Esta propiedad describe cómo repetir o estirar las partes centrales de la imagen del borde.

El modo de mosaico por defecto para cada propiedad es BorderImage.Stretch.

mirror : bool

Esta propiedad indica si la imagen debe ser invertida horizontalmente (mostrando efectivamente una imagen reflejada).

El valor por defecto es false.

progress : real [read-only]

Esta propiedad contiene el progreso de carga de la imagen, desde 0.0 (nada cargado) hasta 1.0 (finalizado).

Véase también status.

retainWhileLoading : bool [since 6.8]

Esta propiedad define el comportamiento cuando se cambia la propiedad source y la carga se produce de forma asíncrona. Este es el caso cuando la propiedad asynchronous se establece en true, o si la imagen no está en el sistema de archivos local.

Si retainWhileLoading es false (por defecto), la imagen antigua se descarta inmediatamente, y el componente se borra mientras se carga la nueva imagen. Si se establece en true, la imagen antigua se conserva y permanece visible hasta que la nueva esté lista.

Activar esta propiedad puede evitar el parpadeo en los casos en que la carga de la nueva imagen lleve mucho tiempo. Tiene el coste de un uso extra de memoria para el doble buffering mientras se carga la nueva imagen.

Esta propiedad se introdujo en Qt 6.8.

smooth : bool

Esta propiedad determina si la imagen se filtra suavemente al escalarla o transformarla. El filtrado suave proporciona una mejor calidad visual, pero puede ser más lento en algunos equipos. Si la imagen se muestra en su tamaño natural, esta propiedad no tiene ningún efecto visual o de rendimiento.

Por defecto, esta propiedad está establecida en true.

source : url

Esta propiedad contiene la URL que hace referencia a la imagen de origen.

BorderImage puede manejar cualquier formato de imagen soportado por Qt, cargado desde cualquier esquema de URL soportado por Qt.

Esta propiedad también puede hacer referencia a un archivo .sci - un formato específico de QML, basado en texto, que incorpora los valores de borde, la imagen de origen y las reglas de mosaico directamente dentro del archivo. Cuando se utiliza un archivo .sci, BorderImage lee la información de los bordes del propio archivo, por lo que no es necesario especificar las propiedades de los bordes en QML.

El siguiente archivo .sci establece los bordes en 10 a cada lado para la imagen picture.png:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: "picture.png"

La URL puede ser absoluta o relativa a la URL del componente.

Véase también QQuickImageProvider.

sourceSize : size [read-only]

Esta propiedad contiene la anchura y altura reales de la imagen cargada.

En BorderImage, esta propiedad es de sólo lectura.

Véase también Image::sourceSize.

status : enumeration [read-only]

Esta propiedad describe el estado de carga de la imagen. Puede ser uno de los siguientes

Véase también progress.