Glow QML Type

Genera una imagen borrosa y coloreada de la fuente y la coloca detrás del original, dando la impresión de que la fuente brilla. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• cached : alias
• color : alias
• radius : alias
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias

Descripción detallada

Ejemplo

El siguiente ejemplo muestra cómo aplicar el efecto.

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

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

    Glow {
        anchors.fill: butterfly
        radius: 8
        color: "white"
        source: butterfly
    }
}

Documentación de propiedades

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 el resplandor.

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

radius : alias

El radio define la suavidad del resplandor. Un radio mayor hace que los bordes del resplandor parezcan más borrosos.

Dependiendo del valor del radio, el valor de samples debe ser lo suficientemente grande para garantizar la calidad visual.

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 el resplandor generado.

spread : alias

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

Los valores van de 0.0 a 1.0. Por defecto, la propiedad está establecida en 0.5.

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, 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á un borde difuminado.

Por defecto, la propiedad está establecida en true. Establézcala en false si la fuente ya tiene un borde transparente para que el desenfoque sea un poco más rápido.

En el siguiente fragmento, el rectángulo de la izquierda tiene bordes transparentes y bordes difuminados, mientras que el rectángulo de la derecha no los tiene.

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: false
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: true
            }
        }
    }
}