RectangularShadow QML Type

Creates smoothed rectangle, suitable for example for shadow and glow effects. More...

• List of all members, including inherited members

Properties

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

Detailed Description

RectangularShadow is a rounded rectangle with blur applied. The performance of RectangularShadow is much better than a general one that creates blurred shadow/glow of any shaped item.

The following example shows how to add a shadow for an Rectangle:

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

The API of RectangularShadow is similar to CSS box-shadow, with color, offset, spread and blur values. Additionally, RectangularShadow API contains:

• real radius: Controls the rounding radius applied into rectangle corners. Compared to CSS box-shadow which inherits radius from the parent element, RectangularShadow expects user to set it. This allows different radius and moving the RectangularShadow separately from any parent item.
• bool cached: Allows caching the blurred shadow texture. This increases the memory usage while potentially improving rendering performance, especially with bigger shadows that don't change dynamically.
• item material: Contains the ShaderEffect element of the RectangularShadow for advanced use. This allows for example extending the effect with a custom shader.

The rendering output also matches to CSS box-shadow, with few notable differences. These differences exist to make the RectangularShadow as high performance as possible.

• Blurring is calculated mathematically in the shader rather than using gaussian blur which CSS box-shadow implementations often use. This makes the shadow look a bit different, especially with larger blur values.
• All the rectangle corners must have even radius. When creating shadow for Rectangle with different radii, select the best matchin radius for the shadow or use alternative shadow method (e.g. MultiEffect).

Here is a table with screenshots to compare rendering output of RectangularShadow vs. CSS box-shadow on Chrome browser. The right-most element is RectangularShadow in blur multipled with 1.2 (so 24, 48, 48) for a closer match.

RectangularShadow extends the shadow size with an exact amount regarding to blur amount, while some other shadows (including CSS box-shadow) have a multiplier for the size. The size of the shadow item inside a RectangularShadow is:

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

So for example the shadow item size of the code below is 280x180 pixels. Radius or offset values do not affect the shadow item size.

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

Property Documentation

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