DropShadow QML Type

Genera una sombra suave detrás del elemento de origen. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• cached : alias
• color : alias
• horizontalOffset : real
• radius : int
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias
• verticalOffset : real

Descripción detallada

El efecto DropShadow desenfoca el canal alfa de la entrada, colorea el resultado y lo coloca detrás del objeto fuente para crear una sombra suave. El color de la sombra puede cambiarse utilizando la propiedad color. La ubicación de la sombra puede cambiarse con las propiedades horizontalOffset y verticalOffset.

La sombra suave se crea desenfocando la imagen en vivo utilizando un desenfoque gaussiano. Realizar el desenfoque en directo es una operación costosa. El desenfoque gaussiano a pantalla completa, incluso con un número moderado de muestras, sólo funcionará a 60 fps en hardware gráfico de gama alta.

Cuando la fuente es estática, se puede establecer la propiedad cached para asignar otro búfer y evitar realizar el desenfoque cada vez que se dibuja.

Ejemplo

El siguiente ejemplo muestra cómo aplicar el efecto.

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    DropShadow {
        anchors.fill: butterfly
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        color: "#80000000"
        source: butterfly
    }
}

Documentación de la propiedad

cached : alias

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 de la fuente o 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 animen la fuente o las propiedades del efecto.

Por defecto, la propiedad está establecida en false.

color : alias

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

Por defecto, la propiedad se establece en "black".

horizontalOffset : real

Las propiedades HorizontalOffset y verticalOffset definen el desplazamiento de la sombra renderizada en comparación con la posición del elemento DropShadow. A menudo, el elemento DropShadow está anclado de forma que llena el elemento fuente. En este caso, si las propiedades HorizontalOffset y verticalOffset se establecen en 0, la sombra se representa exactamente debajo del elemento fuente. Cambiando las propiedades offset, la sombra puede posicionarse relativamente al elemento fuente.

Los valores van de -inf a inf. Por defecto, las propiedades están establecidas en 0.

radius : int

El radio define la suavidad de la sombra. Un radio mayor hace que los bordes de la sombra aparezcan más borrosos.

El desenfoque ideal se consigue seleccionando samples y radius de forma que samples = 1 + radius * 2, como:

Por defecto, la propiedad está establecida en floor(samples/2).

samples : alias

Esta propiedad define cuántas muestras se toman por píxel cuando se realiza el cálculo del desenfoque de suavizado de bordes. Un valor mayor produce mejor calidad, pero es más lento de renderizar.

Idealmente, este valor debería ser dos veces mayor que el valor más alto de radio requerido más uno, como:

Por defecto, la propiedad se establece en 9.

Esta propiedad no está pensada para ser animada. Cambiar esta propiedad hará que se recompilen los sombreadores OpenGL subyacentes.

source : alias

Esta propiedad define el elemento fuente que se va a utilizar como fuente para la sombra generada.

spread : alias

Esta propiedad define cómo de grande es la parte del color de la sombra que se refuerza cerca de los bordes de la fuente.

El valor oscila entre 0,0 y 1,0. Por defecto, la propiedad está establecida en 0.0.

transparentBorder : alias

Esta propiedad determina si el efecto tiene o no un borde transparente.

Cuando se establece en true, el exterior del elemento se rellena con un borde transparente de 1 píxel de ancho, haciendo que el muestreo fuera de la textura de origen utilice la transparencia en lugar de los píxeles del borde. Sin esta propiedad, una imagen que tenga bordes opacos no obtendrá una sombra borrosa.

En la imagen de abajo, el Rectángulo de la izquierda tiene bordes transparentes y tiene bordes difuminados, mientras que el Rectángulo de la derecha no los tiene:

Por defecto, esta propiedad está establecida en true.

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: false
                horizontalOffset: 8
                verticalOffset: 8
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 8
                verticalOffset: 8
            }
        }
    }
}

verticalOffset : real

Las propiedades HorizontalOffset y verticalOffset definen el desplazamiento de la sombra renderizada en comparación con la posición del elemento DropShadow. A menudo, el elemento DropShadow está anclado de forma que llena el elemento fuente. En este caso, si las propiedades HorizontalOffset y verticalOffset se establecen en 0, la sombra se representa exactamente debajo del elemento fuente. Cambiando las propiedades offset, la sombra puede posicionarse relativamente al elemento fuente.

Los valores van de -inf a inf. Por defecto, las propiedades están establecidas en 0.