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 to a 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 to rectangle corners. Compared to CSS box-shadow, which inherits radius from the parent element, RectangularShadow expects user to set it. This allows you to use different radiuses and move the RectangularShadow separately from its parent item.
• bool cached: Allows caching the blurred shadow texture. This increases 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 the 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 slightly different, especially with larger blur values.
• All the rectangle corners must have an even radius. When creating a shadow for a Rectangle with different radiuses, select the best-matching radius for the shadow or use an alternative shadow method, for example, MultiEffect.

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

RectangularShadow extends the shadow size with an exact amount regarding the 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

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