DropShadow QML Type

Erzeugt einen weichen Schatten hinter dem Quellobjekt. Mehr...

• Liste aller Elemente, einschließlich vererbter Elemente

Eigenschaften

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

Ausführliche Beschreibung

Der DropShadow-Effekt verwischt den Alphakanal der Eingabe, färbt das Ergebnis ein und platziert es hinter dem Quellobjekt, um einen weichen Schatten zu erzeugen. Die Farbe des Schattens kann über die Eigenschaft „ color “ geändert werden. Die Position des Schattens lässt sich mit den Eigenschaften „ horizontalOffset “ und „ verticalOffset “ anpassen.

Der weiche Schatten wird erzeugt, indem das Bild in Echtzeit mit einem Gaußschen Weichzeichner verwischt wird. Die Echtzeit-Weichzeichnung ist ein rechenintensiver Vorgang. Ein Gaußscher Weichzeichner im Vollbildmodus läuft selbst bei einer moderaten Anzahl von Samples nur auf High-End-Grafikhardware mit 60 fps.

Wenn die Quelle statisch ist, kann die Eigenschaft „ cached “ so eingestellt werden, dass ein weiterer Puffer zugewiesen wird, um zu vermeiden, dass die Unschärfe bei jedem Zeichnen erneut angewendet wird.

Beispiel

Das folgende Beispiel zeigt, wie der Effekt angewendet wird.

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

Eigenschaftsdokumentation

cached : alias

Mit dieser Eigenschaft können die Ausgabepixel des Effekts zwischengespeichert werden, um die Rendering-Leistung zu verbessern. Bei jeder Änderung der Quell- oder Effekteigenschaften müssen die Pixel im Cache aktualisiert werden. Der Speicherverbrauch steigt, da für die Speicherung der Effekt-Ausgabe ein zusätzlicher Speicherpuffer benötigt wird.

Es wird empfohlen, den Cache zu deaktivieren, wenn die Eigenschaften der Quelle oder des Effekts animiert werden.

Standardmäßig ist die Eigenschaft auf „ false “ gesetzt.

color : alias

Diese Eigenschaft legt den RGBA-Farbwert fest, der für den Schatten verwendet wird.

Standardmäßig ist die Eigenschaft auf „ "black" “ gesetzt.

horizontalOffset : real

Die Eigenschaften „HorizontalOffset“ und „ verticalOffset “ legen den Versatz des gerenderten Schattens im Vergleich zur Position des Elements „ DropShadow “ fest. Häufig wird das „ DropShadow “-Element so verankert, dass es das Quellelement ausfüllt. Sind in diesem Fall die Eigenschaften „HorizontalOffset“ und „ verticalOffset “ auf 0 gesetzt, wird der Schatten genau unter dem Quellelement gerendert. Durch Ändern der Versatzeigenschaften kann der Schatten relativ zum Quellelement positioniert werden.

Die Werte reichen von -inf bis inf. Standardmäßig sind die Eigenschaften auf „ 0 “ gesetzt.

radius : int

Der Radius bestimmt die Weichheit des Schattens. Ein größerer Radius lässt die Ränder des Schattens unschärfer erscheinen.

Die ideale Unschärfe wird erreicht, indem man „ samples “ und „ radius “ so wählt, dass „ samples = 1 + radius * 2 “ gilt, zum Beispiel:

Standardmäßig ist die Eigenschaft auf „ floor(samples/2) “ gesetzt.

samples : alias

Diese Eigenschaft legt fest, wie viele Abtastwerte pro Pixel bei der Berechnung der Kantenglättung verwendet werden. Ein höherer Wert führt zu einer besseren Qualität, verlangsamt jedoch die Darstellung.

Idealerweise sollte dieser Wert doppelt so groß sein wie der höchste erforderliche Radiuswert plus eins, zum Beispiel:

Standardmäßig ist die Eigenschaft auf „ 9 “ gesetzt.

Diese Eigenschaft ist nicht für Animationen vorgesehen. Eine Änderung dieser Eigenschaft führt dazu, dass die zugrunde liegenden OpenGL-Shader neu kompiliert werden.

source : alias

Diese Eigenschaft definiert das Quellelement, das als Quelle für den generierten Schatten verwendet werden soll.

spread : alias

Diese Eigenschaft legt fest, wie stark die Schattenfarbe in der Nähe der Ränder der Lichtquelle verstärkt wird.

Der Wert liegt zwischen 0,0 und 1,0. Standardmäßig ist die Eigenschaft auf „ 0.0 “ eingestellt.

transparentBorder : alias

Diese Eigenschaft legt fest, ob der Effekt einen transparenten Rand hat oder nicht.

Bei der Einstellung „ true “ wird der äußere Rand des Elements mit einem 1 Pixel breiten transparenten Rand aufgefüllt, sodass bei der Abtastung außerhalb der Quelltextur Transparenz anstelle der Randpixel verwendet wird. Ohne diese Eigenschaft erhält ein Bild mit undurchsichtigen Rändern keinen weichen Schatten.

In der Abbildung unten weist das Rechteck auf der linken Seite transparente Ränder und unscharfe Kanten auf, während dies beim Rechteck auf der rechten Seite nicht der Fall ist:

Standardmäßig ist diese Eigenschaft auf „ true “ gesetzt.

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

Die Eigenschaften „HorizontalOffset“ und „VerticalOffset“ legen den Versatz des gerenderten Schattens im Verhältnis zur Position des „ DropShadow “-Elements fest. Häufig wird das „ DropShadow “-Element so verankert, dass es das Quellelement ausfüllt. Sind in diesem Fall die Eigenschaften „HorizontalOffset“ und „verticalOffset“ auf 0 gesetzt, wird der Schatten exakt unter dem Quellelement gerendert. Durch Ändern der Versatzeigenschaften kann der Schatten relativ zum Quellelement positioniert werden.

Die Werte reichen von -inf bis inf. Standardmäßig sind die Eigenschaften auf „ 0 “ gesetzt.