RectangularShadow QML Type

Erzeugt ein geglättetes Rechteck, das sich zum Beispiel für Schatten- und Glüheffekte eignet. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• antialiasing : bool
• blur : real
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real

Detaillierte Beschreibung

RectangularShadow ist ein abgerundetes Rechteck, auf das ein Weichzeichner angewendet wird. Die Leistung von RectangularShadow ist viel besser als eine allgemeine Methode, die einen unscharfen Schatten/Glühen eines beliebig geformten Elements erzeugt.

Das folgende Beispiel zeigt, wie man einem Rectangle einen Schatten hinzufügt:

import QtQuick
import QtQuick.Effects

...
RectangularShadow {
    anchors.fill: myRectangle
    offset.x: -10
    offset.y: -5
    radius: myRectangle.radius
    blur: 30
    spread: 10
    color: Qt.darker(myRectangle.color, 1.6)
}
Rectangle {
    id: myRectangle
    anchors.centerIn: parent
    width: 200
    height: 100
    radius: 50
    color: "#c0d0f0"
}

Die API von RectangularShadow ist ähnlich wie die von CSS box-shadow, mit Werten für Farbe, Offset, Spread und Blur. Zusätzlich enthält RectangularShadow API:

• real radius: Steuert den Abrundungsradius, der auf die Ecken des Rechtecks angewendet wird. Im Vergleich zu CSS box-shadow, das den Radius vom übergeordneten Element erbt, erwartet RectangularShadow, dass der Benutzer ihn festlegt. Dies ermöglicht es, verschiedene Radien zu verwenden und den RectangularShadow getrennt von seinem übergeordneten Element zu bewegen.
• bool cached Ermöglicht das Zwischenspeichern der unscharfen Schattentextur. Dies erhöht die Speichernutzung, während die Rendering-Leistung verbessert werden kann, insbesondere bei größeren Schatten, die sich nicht dynamisch ändern.
• item material RectangularShadow: Enthält das ShaderEffect -Element des RectangularShadow zur erweiterten Verwendung. Dies ermöglicht zum Beispiel die Erweiterung des Effekts mit einem benutzerdefinierten Shader.

Die Rendering-Ausgabe entspricht auch dem CSS-Box-Shadow, mit einigen bemerkenswerten Unterschieden. Diese Unterschiede bestehen, um den RectangularShadow so leistungsfähig wie möglich zu machen.

• Die Unschärfe wird im Shader mathematisch berechnet, anstatt die Gaußsche Unschärfe zu verwenden, die bei CSS-Box-Shadow-Implementierungen häufig zum Einsatz kommt. Dadurch sieht der Schatten etwas anders aus, insbesondere bei größeren Unschärfewerten.
• Alle Ecken des Rechtecks müssen einen gleichmäßigen Radius haben. Wenn Sie einen Schatten für ein Rectangle mit unterschiedlichen Radien erstellen, wählen Sie den am besten passenden Radius für den Schatten oder verwenden Sie eine alternative Schattenmethode, z. B. MultiEffect.

Hier ist eine Tabelle mit Screenshots zum Vergleich der Rendering-Ausgabe von RectangularShadow und CSS box-shadow im Chrome-Browser. Das Element ganz rechts ist RectangularShadow in blur multipliziert mit 1.2 (also 24, 48, 48) für eine bessere Übereinstimmung.

RectangularShadow erweitert die Größe des Schattens um einen exakten Wert in Bezug auf den Unschärfegrad, während einige andere Schatten (einschließlich CSS box-shadow) einen Multiplikator für die Größe haben. Die Größe des Schattenelements innerhalb eines RectangularShadow ist:

width = rectangularShadow.width + 2 * blur +  2 * spread
height = rectangularShadow.height + 2 * blur + 2 * spread

Zum Beispiel beträgt die Größe des Schattenelements im unten stehenden Code 280x180 Pixel. Radius- oder Offsetwerte haben keinen Einfluss auf die Größe des Schattenelements.

RectangularShadow {
    width: 200
    height: 100
    blur: 30
    spread: 10
    radius: 20
}

Eigenschaft Dokumentation

#version 440

layout(location = 0) in vec2 texCoord;
layout(location = 1) in vec2 fragCoord;
layout(location = 0) out vec4 fragColor;

layout(std140, binding = 0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
    vec4 color;
    vec3 iResolution;
    vec2 rectSize;
    float radius;
    float blur;
};

float roundedBox(vec2 centerPos, vec2 size, float radii) {
    return length(max(abs(centerPos) - size + radii, 0.0)) - radii;
}

void main()
{
    float box = roundedBox(fragCoord - iResolution.xy * 0.5, rectSize, radius);
    float a = 1.0 - smoothstep(0.0, blur, box);
    fragColor = color * qt_Opacity * a * a;
}

RectangularShadow {
    ...
    material: MyShadowEffect { }
}