DropShadow QML Type

Génère une ombre douce derrière l'élément source. En savoir plus...

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

Propriétés

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

Description détaillée

L'effet DropShadow floute le canal alpha de l'entrée, colorise le résultat et le place derrière l'objet source pour créer une ombre douce. La couleur de l'ombre peut être modifiée à l'aide de la propriété color. L'emplacement de l'ombre peut être modifié à l'aide des propriétés horizontalOffset et verticalOffset.

L’ombre douce est créée en floutant l’image en temps réel à l’aide d’un flou gaussien. Le floutage en temps réel est une opération coûteuse en ressources. Un flou gaussien en plein écran, même avec un nombre modéré d’échantillons, ne fonctionnera qu’à 60 images par seconde sur du matériel graphique haut de gamme.

Lorsque la source est statique, la propriété ` cached ` peut être définie pour allouer un autre tampon afin d’éviter d’appliquer le flou à chaque rendu.

Exemple

L'exemple suivant montre comment appliquer l'effet.

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

Documentation des 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 l'ombre.

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

horizontalOffset : real

Les propriétés `HorizontalOffset` et ` verticalOffset ` définissent le décalage de l’ombre affichée par rapport à la position de l’élément ` DropShadow `. Souvent, l'élément « DropShadow » est ancré de manière à occuper tout l'espace de l'élément source. Dans ce cas, si les propriétés HorizontalOffset et verticalOffset sont définies sur 0, l'ombre est affichée exactement sous l'élément source. En modifiant ces propriétés de décalage, l'ombre peut être positionnée par rapport à l'élément source.

Les valeurs vont de -inf à inf. Par défaut, les propriétés sont définies sur 0.

radius : int

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

Pour obtenir un flou idéal, il faut choisir des valeurs pour « samples » et « radius » telles 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 l'ombre générée.

spread : alias

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

La valeur est comprise entre 0,0 et 1,0. Par défaut, la propriété est définie sur 0.0.

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 d'une bordure transparente d'un pixel de large, 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 d'ombre floue.

Dans l’image ci-dessous, le rectangle de gauche possède des bordures transparentes et des bords flous, contrairement à celui de droite :

Par défaut, cette propriété est définie sur « 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

Les propriétés `HorizontalOffset` et `VerticalOffset` définissent le décalage de l'ombre affichée par rapport à la position de l'élément ` DropShadow `. Souvent, l’élément « DropShadow » est ancré de manière à occuper tout l’espace de l’élément source. Dans ce cas, si les propriétés HorizontalOffset et verticalOffset sont définies sur 0, l’ombre est affichée exactement sous l’élément source. En modifiant ces propriétés de décalage, l’ombre peut être positionnée par rapport à l’élément source.

Les valeurs vont de -inf à inf. Par défaut, ces propriétés sont définies sur « 0 ».