RectangularShadow QML Type

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

• Liste aller Elemente, einschließlich geerbter Elemente

Eigenschaften

• antialiasing : bool
• blur : real
• bottomLeftRadius : real (since 6.11)
• bottomRightRadius : real (since 6.11)
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real
• topLeftRadius : real (since 6.11)
• topRightRadius : real (since 6.11)

Ausführliche Beschreibung

„RectangularShadow“ ist ein abgerundetes Rechteck mit Weichzeichner-Effekt. Die Leistung von „RectangularShadow“ ist deutlich besser als die eines allgemeinen Effekts, der einen unscharfen Schatten oder Glanz für Elemente beliebiger Form 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“ ähnelt dem CSS-Eigenschaft „box-shadow“ und umfasst Werte für Farbe, Versatz, Ausbreitung und Unschärfe. Zusätzlich enthält die „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, muss dieser bei „RectangularShadow“ vom Benutzer festgelegt werden. Dadurch kannst du unterschiedliche Radien verwenden und den „RectangularShadow“ unabhängig von seinem übergeordneten Element verschieben.
• bool cached: Ermöglicht das Zwischenspeichern der Textur des unscharfen Schattens. Dies erhöht den Speicherbedarf, verbessert jedoch potenziell die Rendering-Leistung, insbesondere bei größeren Schatten, die sich nicht dynamisch ändern.
• item material: Enthält das Element „ “ des RectangularShadow für fortgeschrittene Anwendungen. Dies ermöglicht es beispielsweise, den Effekt mit einem benutzerdefinierten Shader zu erweitern. ShaderEffect

Die Rendering-Ausgabe entspricht ebenfalls dem CSS-`box-shadow`, mit wenigen nennenswerten Unterschieden. Diese Unterschiede bestehen, um den „RectangularShadow“ so leistungsfähig wie möglich zu gestalten.

• Die Unschärfe wird mathematisch im Shader berechnet, anstatt einen Gaußschen Weichzeichner zu verwenden, wie es bei CSS-`box-shadow`-Implementierungen häufig der Fall ist. Dadurch sieht der Schatten etwas anders aus, insbesondere bei größeren Unschärfewerten.
• Seit Qt 6.11 unterstützt „RectangularShadow“ auch individuelle Werte für den Eckenradius. Wenn diese nicht benötigt werden, sollte zur Erzielung bester Leistung nur der gemeinsame Wert „ radius “ festgelegt werden.

Hier finden Sie eine Tabelle mit Screenshots zum Vergleich der Darstellungsergebnisse von „RectangularShadow“ und dem CSS-„box-shadow“ im Chrome-Browser. Das Element ganz rechts zeigt „RectangularShadow“ mit einer Unschärfe, die mit dem Wert „ 1.2 “ multipliziert wurde (also „ 24 “, „ 48 “, „ 48 “), um eine größere Übereinstimmung zu erzielen.

RectangularShadow erweitert die Schattengröße um einen exakten Wert entsprechend dem Unschärfegrad, während einige andere Schatten (einschließlich CSS-box-shadow) einen Multiplikator für die Größe verwenden. Die Größe des Schattenelements innerhalb eines RectangularShadow beträgt:

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

Beispielsweise beträgt die Größe des Schattenelements im folgenden Code 280 × 180 Pixel. Radius- oder Offset-Werte haben keinen Einfluss auf die Größe des Schattenelements.

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

Eigenschaftsdokumentation

antialiasing : bool

Wird verwendet, um zu entscheiden, ob für den Schatten Antialiasing verwendet werden soll oder nicht. Wenn dieser Wert auf „ true “ gesetzt ist, wird ein Ein-Pixel-Antialiasing verwendet, selbst wenn die „ blur “ auf „ 0 “ eingestellt ist.

Der Standardwert ist „ true “.

blur : real

Diese Eigenschaft legt fest, wie viele Pixel außerhalb des Elementbereichs der Schatten reicht.

Der Wert reicht von 0,0 (keine Unschärfe) bis inf (unendliche Unschärfe). Der Standardwert ist 10.0.

bottomLeftRadius : real [since 6.11]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der unteren linken Ecke verwendet wird.

Wenn „bottomLeftRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „bottomLeftRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.11 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ topRightRadius “ und „ bottomRightRadius “.

bottomRightRadius : real [since 6.11]

Diese Eigenschaft gibt den Radius an, der zum Zeichnen der unteren rechten Ecke verwendet wird.

Wenn „bottomRightRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „bottomRightRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.11 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ topRightRadius “ und „ bottomLeftRadius “.

cached : bool

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

Jedes Mal, wenn die Effekteigenschaften 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 Quelle oder die Effekteigenschaften animiert werden.

Der Standardwert lautet „ false “.

color : color

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

Der Standardwert ist „ Qt.rgba(0.0, 0.0, 0.0, 1.0) “ (schwarz).

material : item

Diese Eigenschaft enthält das Element „ ShaderEffect “ des Schattens. Mit dieser Eigenschaft können Sie die Ausdehnung des Schattens visualisieren, da das Effektelement aufgrund von blur, offset und spread oft eine andere Position und Größe hat als das Element „ RectangularShadow “.

Das Material kann auch durch ein benutzerdefiniertes ersetzt werden. Das Standardmaterial, wenn kein individueller Eckenradius verwendet wird, ist ein „ ShaderEffect “ mit dem folgenden „ fragmentShader “:

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

Bei Verwendung individueller Eckenradien ist der Wert des Uniforms „float radius“ < 0 und es gibt ein zusätzliches Uniform „vec4 radius4“. Die Reihenfolge der Eckenradiuswerte im „vec4“ ist oben links, oben rechts, unten links, unten rechts.

Qt Quick Effect Maker Enthält den Knoten „ RectangularShadow “, der als Ausgangspunkt für ein benutzerdefiniertes Material verwendet werden kann. Sie können den exportierten Effekt, der diesen Knoten enthält, direkt als „ RectangularShadow “-Material verwenden.

RectangularShadow {
    ...
    material: MyShadowEffect { }
}

Um wieder das Standardmaterial zu verwenden, setzen Sie die Materialeigenschaft auf „ null “.

offset : vector2d

Diese Eigenschaft definiert den Positionsversatz, der für den Schatten verwendet wird. Dieser Versatz wird an die Schattenposition angehängt, relativ zur Position des Elements „ RectangularShadow “.

Der Standardwert ist „ Qt.vector2d(0.0, 0.0) “ (kein Versatz).

radius : real

Diese Eigenschaft legt den Eckenradius fest, der zum Zeichnen eines Schattens mit abgerundeten Ecken verwendet wird.

Der Wert liegt zwischen 0,0 und der Hälfte der effektiven Breite oder Höhe des Elements, je nachdem, welcher Wert kleiner ist.

Der Standardwert lautet „ 0 “.

spread : real

Diese Eigenschaft legt fest, um wie viel der Schatten in Pixeln ausgebreitet (erweitert) wird. Diese Ausbreitung wird zur Schattengröße hinzugefügt, bezogen auf die Größe des Elements „ RectangularShadow “.

Der Wert reicht von -inf bis inf. Der Standardwert ist „ 0.0 “.

topLeftRadius : real [since 6.11]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der oberen linken Ecke verwendet wird.

Wenn „topLeftRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „topLeftRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.11 eingeführt.

Siehe auch „ radius“ , „ topRightRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “.

topRightRadius : real [since 6.11]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der oberen rechten Ecke verwendet wird.

Wenn „topRightRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „topRightRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.11 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “.