RectangularShadow QML Type

Crea un rectángulo suavizado, adecuado por ejemplo para efectos de sombra y brillo. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• antialiasing : bool
• blur : real
• bottomLeftRadius : real (since 6.11)
• bottomRightRadius : real (since 6.11)
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real
• topLeftRadius : real (since 6.11)
• topRightRadius : real (since 6.11)

Descripción detallada

RectangularShadow es un rectángulo redondeado con desenfoque aplicado. El rendimiento de RectangularShadow es mucho mejor que el de uno general que crea una sombra/brillo borroso de cualquier elemento con forma.

El siguiente ejemplo muestra cómo añadir una sombra a un Rectangle:

import QtQuick
import QtQuick.Effects

...
RectangularShadow {
    anchors.fill: myRectangle
    offset.x: -10
    offset.y: -5
    radius: myRectangle.radius
    blur: 30
    spread: 10
    color: Qt.darker(myRectangle.color, 1.6)
}
Rectangle {
    id: myRectangle
    anchors.centerIn: parent
    width: 200
    height: 100
    radius: 50
    color: "#c0d0f0"
}

La API de RectangularShadow es similar a la de CSS box-shadow, con valores de color, desplazamiento, dispersión y desenfoque. Además, la API de RectangularShadow contiene:

• real radius: Controla el radio de redondeo aplicado a las esquinas del rectángulo. En comparación con CSS box-shadow, que hereda el radio del elemento padre, RectangularShadow espera que el usuario lo establezca. Esto permite utilizar diferentes radios y mover la RectangularShadow separadamente de su elemento padre.
• bool cached Permite almacenar en caché la textura de la sombra difuminada. Esto incrementa el uso de memoria mientras que potencialmente mejora el rendimiento del renderizado, especialmente con sombras más grandes que no cambian dinámicamente.
• item material: Contiene el elemento ShaderEffect de la RectangularShadow para uso avanzado. Esto permite, por ejemplo, extender el efecto con un shader personalizado.

El resultado del renderizado también coincide con la sombra de caja CSS, con algunas diferencias notables. Estas diferencias existen para que la RectangularShadow tenga el mayor rendimiento posible.

• El desenfoque se calcula matemáticamente en el sombreador en lugar de utilizar el desenfoque gaussiano, que las implementaciones de CSS box-shadow utilizan a menudo. Esto hace que la sombra tenga un aspecto ligeramente diferente, especialmente con valores de desenfoque mayores.
• Desde Qt 6.11, RectangularShadow también soporta valores individuales de radio de esquina. Cuando no sea necesario, para un mejor rendimiento, establezca sólo el común radius.

A continuación se muestra una tabla con capturas de pantalla para comparar el rendimiento de RectangularShadow y CSS box-shadow en el navegador Chrome. El elemento situado más a la derecha es RectangularShadow en desenfoque multiplicado por 1.2 (así 24, 48, 48) para una mayor coincidencia.

RectangularShadow extiende el tamaño de la sombra con una cantidad exacta con respecto a la cantidad de desenfoque, mientras que algunas otras sombras (incluyendo CSS box-shadow) tienen un multiplicador para el tamaño. El tamaño del elemento de sombra dentro de una RectangularShadow es:

width = rectangularShadow.width + 2 * blur +  2 * spread
height = rectangularShadow.height + 2 * blur + 2 * spread

Por ejemplo, el tamaño del elemento de sombra del código siguiente es 280x180 píxeles. Los valores de radio o desplazamiento no afectan al tamaño del elemento de sombra.

RectangularShadow {
    width: 200
    height: 100
    blur: 30
    spread: 10
    radius: 20
}

Documentación de propiedades

antialiasing : bool

Se utiliza para decidir si la sombra debe utilizar antialiasing o no. Cuando es true, se utiliza un antialiasing de un solo píxel incluso cuando blur es 0.

El valor por defecto es true.

blur : real

Esta propiedad define cuántos píxeles fuera del área del elemento son alcanzados por la sombra.

El valor va de 0.0 (sin desenfoque) a inf (desenfoque infinito). El valor por defecto es 10.0.

bottomLeftRadius : real [since 6.11]

Esta propiedad contiene el radio utilizado para dibujar la esquina inferior izquierda.

Si no se define bottomLeftRadius, se utilizará radius en su lugar. Si bottomLeftRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.11.

Véase también radius, topLeftRadius, topRightRadius, y bottomRightRadius.

bottomRightRadius : real [since 6.11]

Esta propiedad contiene el radio utilizado para dibujar la esquina inferior derecha.

Si no se establece bottomRightRadius, se utilizará radius en su lugar. Si bottomRightRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.11.

Véase también radius, topLeftRadius, topRightRadius, y bottomLeftRadius.

cached : bool

Esta propiedad permite almacenar en caché los píxeles de salida del efecto para mejorar el rendimiento del renderizado.

Cada vez que se cambian las propiedades del efecto, los píxeles de la caché deben actualizarse. El consumo de memoria se incrementa, ya que se requiere un buffer extra de memoria para almacenar la salida del efecto.

Se recomienda desactivar la caché cuando se anima la fuente o las propiedades del efecto.

El valor por defecto es false.

color : color

Esta propiedad define el valor de color RGBA que se utiliza para la sombra.

El valor por defecto es Qt.rgba(0.0, 0.0, 0.0, 1.0) (negro).

material : item

Esta propiedad contiene el ítem ShaderEffect de la sombra. Puede utilizar esta propiedad para visualizar el alcance de la sombra, ya que el elemento del efecto a menudo tiene diferente posición y tamaño que el elemento RectangularShadow, debido a blur, offset y spread.

También se puede sustituir el material por uno personalizado. El material por defecto cuando no se utiliza radio de esquina individual es un ShaderEffect con el siguiente fragmentShader:

#version 440

layout(location = 0) in vec2 texCoord;
layout(location = 1) in vec2 fragCoord;
layout(location = 0) out vec4 fragColor;

layout(std140, binding = 0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
    vec4 color;
    vec3 iResolution;
    vec2 rectSize;
    float radius;
    float blur;
};

float roundedBox(vec2 centerPos, vec2 size, float radii) {
    return length(max(abs(centerPos) - size + radii, 0.0)) - radii;
}

void main()
{
    float box = roundedBox(fragCoord - iResolution.xy * 0.5, rectSize, radius);
    float a = 1.0 - smoothstep(0.0, blur, box);
    fragColor = color * qt_Opacity * a * a;
}

Cuando se usa radio de esquina individual, el valor del uniforme "float radius" es < 0 y hay un uniforme adicional "vec4 radius4". El orden de los valores de radio de esquina en el vec4 es arriba-izquierda, arriba-derecha, abajo-izquierda, abajo-derecha.

Qt Quick Effect Maker contiene el nodo RectangularShadow que puede utilizarse como punto de partida para un material personalizado. Puede utilizar directamente el efecto exportado que contiene ese nodo como material de RectangularShadow.

RectangularShadow {
    ...
    material: MyShadowEffect { }
}

Para volver a utilizar el material por defecto, establece la propiedad material a null.

offset : vector2d

Esta propiedad define el desplazamiento de posición que se utiliza para la sombra. Este desplazamiento se añade a la posición de la sombra, en relación con la posición del elemento RectangularShadow.

El valor por defecto es Qt.vector2d(0.0, 0.0) (sin desplazamiento).

radius : real

Esta propiedad define el radio de las esquinas que se utiliza para dibujar una sombra con esquinas redondeadas.

El valor oscila entre 0,0 y la mitad de la anchura o altura efectiva del elemento, la que sea menor.

El valor por defecto es 0.

spread : real

Esta propiedad define cuánto se extiende la sombra en píxeles. Esta extensión se añade al tamaño de la sombra, en relación con el tamaño del elemento RectangularShadow.

El valor oscila entre -inf e inf. El valor por defecto es 0.0.

topLeftRadius : real [since 6.11]

Esta propiedad contiene el radio utilizado para dibujar la esquina superior izquierda.

Si no se establece topLeftRadius, se utilizará radius en su lugar. Si topLeftRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.11.

Véase también radius, topRightRadius, bottomLeftRadius, y bottomRightRadius.

topRightRadius : real [since 6.11]

Esta propiedad contiene el radio utilizado para dibujar la esquina superior derecha.

Si no se establece topRightRadius, se utilizará radius en su lugar. Si topRightRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.11.

Véase también radius, topLeftRadius, bottomLeftRadius, y bottomRightRadius.