Glow QML Type

Erzeugt ein unscharfes und koloriertes Bild der Quelle und platziert es hinter dem Original, wodurch der Eindruck entsteht, dass die Quelle leuchtet. Mehr...

• Liste aller Mitglieder, einschließlich vererbter Mitglieder

Eigenschaften

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

Ausführliche Beschreibung

Beispiel

Das folgende Beispiel zeigt, wie der Effekt angewendet wird.

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

Eigenschaftsdokumentation

cached : alias

Mit dieser Eigenschaft können die Ausgabepixel des Effekts zwischengespeichert werden, um die Rendering-Leistung zu verbessern.

Jedes Mal, wenn die Eigenschaften der Quelle oder des Effekts geändert werden, müssen die Pixel im Cache aktualisiert werden. Der Speicherverbrauch steigt, da ein zusätzlicher Speicherpuffer zum Speichern der Effekt-Ausgabe 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 Leuchteffekt verwendet wird.

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

radius : alias

Der Radius bestimmt die Weichheit des Leuchteffekts. Ein größerer Radius führt dazu, dass die Ränder des Leuchteffekts unschärfer erscheinen.

Je nach Radiuswert sollte der Wert von „ samples “ ausreichend groß eingestellt werden, um die Bildqualität zu gewährleisten.

Die ideale Unschärfe wird erreicht, indem „ samples “ und „ radius “ so ausgewählt werden, dass „ samples = 1 + radius * 2 “ gilt, beispielsweise:

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 sorgt für eine bessere 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 erzeugten Glüheffekt verwendet werden soll.

spread : alias

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

Die Werte reichen von 0,0 bis 1,0. Standardmäßig ist die Eigenschaft auf „ 0.5 “ 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 transparenten Rand ausgefü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 unscharfen Rand.

Standardmäßig ist die Eigenschaft auf „ true “ gesetzt. Setzen Sie sie auf „false“, wenn die Quelle bereits einen transparenten Rand hat, um die Unschärfeeinblendung geringfügig zu beschleunigen.

Im folgenden Codeausschnitt 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.

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