RectangularShadow QML Type

创建平滑矩形，适用于阴影和发光效果。更多

• 所有成员（包括继承成员）的列表

属性

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

详细说明

RectangularShadow 是一个应用了模糊技术的圆角矩形。RectangularShadow 的性能比为任何形状的项目创建模糊阴影/光晕的一般阴影/光晕要好得多。

下面的示例展示了如何为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"
}

RectangularShadow 的 API 与 CSS 框阴影类似，具有颜色、偏移、扩散和模糊值。此外，RectangularShadow API 还包含以下内容：

• real radius控制应用于矩形边角的圆角半径。与 CSS box-shadow 从父元素继承半径相比，RectangularShadow 希望用户设置半径。这样就可以使用不同的半径，并将 RectangularShadow 与其父项分开移动。
• bool cached允许缓存模糊阴影纹理。这在增加内存使用量的同时有可能提高渲染性能，尤其是对于不会动态变化的较大阴影。
• item materialRectangularShadow：包含 RectangularShadow 的 元素，用于高级用途。例如，这允许使用自定义着色器扩展效果。ShaderEffect

渲染输出也与 CSS 框状阴影相匹配，但有一些明显的不同。这些差异的存在是为了让 RectangularShadow 尽可能实现高性能。

• 模糊是在着色器中以数学方式计算出来的，而不是 CSS 方框阴影通常使用的高斯模糊。这使得阴影看起来略有不同，尤其是模糊值较大时。
• 所有矩形边角的半径必须相同。为具有不同半径的Rectangle 创建阴影时，请选择最匹配的阴影半径，或使用其他阴影方法，例如MultiEffect 。

下面的表格附有截图，用于比较 RectangularShadow 和 CSS box-shadow 在 Chrome 浏览器中的渲染输出。最右边的元素是 RectangularShadow 在模糊状态下与1.2 的乘积（因此24,48,48 ），以便更接近匹配。

RectangularShadow 以精确的模糊量来扩展阴影大小，而其他一些阴影（包括 CSS box-shadow）则以乘数来扩展阴影大小。RectangularShadow 中阴影项的大小为：

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

例如，下面代码中阴影项的大小为 280x180 像素。半径或偏移值不会影响阴影项的大小。

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

属性文档

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