Glow QML Type

Génère une image floue et colorisée de la source et la place derrière l'original, donnant l'impression que la source brille. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

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

Description détaillée

Exemple d'application

L'exemple suivant montre comment appliquer l'effet.

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
    }
}

Propriété Documentation

cached : alias

Cette propriété permet de mettre en cache les pixels de sortie de l'effet afin d'améliorer les performances de rendu.

Chaque fois que les propriétés de la source ou de l'effet sont modifiées, les pixels du cache doivent être mis à jour. La consommation de mémoire augmente, car une mémoire tampon supplémentaire est nécessaire pour stocker la sortie de l'effet.

Il est recommandé de désactiver le cache lorsque les propriétés de la source ou de l'effet sont animées.

Par défaut, la propriété est définie sur false.

color : alias

Cette propriété définit la valeur de la couleur RGBA utilisée pour la lueur.

Par défaut, la propriété est définie sur "white".

radius : alias

Le rayon définit la douceur de l'éclat. Un rayon plus grand rend les bords de la lueur plus flous.

En fonction de la valeur du rayon, la valeur de samples doit être suffisamment grande pour garantir la qualité visuelle.

Le flou idéal est obtenu en sélectionnant samples et radius de manière à ce que samples = 1 + radius * 2, par exemple :

Par défaut, la propriété est définie sur floor(samples/2).

samples : alias

Cette propriété définit le nombre d'échantillons prélevés par pixel lors du calcul du flou d'adoucissement des contours. Une valeur plus élevée permet d'obtenir une meilleure qualité, mais le rendu est plus lent.

Idéalement, cette valeur doit être deux fois plus grande que la valeur de rayon la plus élevée plus un, comme par exemple :

Par défaut, la propriété est fixée à 9.

Cette propriété n'est pas destinée à être animée. La modification de cette propriété entraînera la recompilation des shaders OpenGL sous-jacents.

source : alias

Cette propriété définit l'élément source qui sera utilisé comme source pour la lueur générée.

spread : alias

Cette propriété définit dans quelle mesure la couleur de l'éclat est renforcée près des bords de la source.

Les valeurs sont comprises entre 0,0 et 1,0. Par défaut, la propriété est définie sur 0.5.

transparentBorder : alias

Cette propriété détermine si l'effet a une bordure transparente ou non.

Lorsque cette propriété est définie sur true, l'extérieur de l'élément est complété par un bord transparent, ce qui fait que l'échantillonnage à l'extérieur de la texture source utilise la transparence à la place des pixels du bord. Sans cette propriété, une image dont les bords sont opaques n'aura pas de bord flou.

Par défaut, la propriété est définie sur true. Définissez-la sur false si la source a déjà un bord transparent pour rendre le flou un peu plus rapide.

Dans l'extrait ci-dessous, le rectangle de gauche a des bords transparents et des bords flous, alors que le rectangle de droite n'en a pas.

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
            }
        }
    }
}