Glow QML Type

Génère une image floue et colorisée de la source et la superpose à l'original, donnant l'impression que la source brille. En savoir plus...

• 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

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

Documentation sur les propriétés

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 un tampon de mémoire 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 couleur RGBA utilisée pour la lueur.

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

radius : alias

Le rayon définit la douceur de la lueur. Un rayon plus grand rend les contours de la lueur plus flous.

En fonction de la valeur du rayon, la valeur de « samples » doit être suffisamment élevée pour garantir la qualité visuelle.

Le flou idéal est obtenu en choisissant les paramètres « samples » et « radius » de telle sorte que « samples = 1 + radius * 2 », par exemple :

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

samples : alias

Ce paramètre 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 offre une meilleure qualité, mais ralentit le rendu.

Idéalement, cette valeur devrait être égale au double de la valeur de rayon la plus élevée requise, plus un, par exemple :

Par défaut, la propriété est définie sur « 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 la lueur est intensifié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 présente ou non une bordure transparente.

Lorsqu'elle est définie sur « true », le contour de l'élément est agrandi par une bordure transparente, ce qui fait que l'échantillonnage en dehors de la texture source utilise la transparence au lieu des pixels du contour. Sans cette propriété, une image dont les contours sont opaques n'aura pas de contour flou.

Par défaut, la propriété est définie sur « true ». Définissez-la sur « false » si la source possède déjà un bord transparent afin d’accélérer très légèrement le floutage.

Dans l'extrait de code ci-dessous, le rectangle de gauche présente des bords transparents et des contours flous, contrairement à celui de droite.

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