DropShadow QML Type

在源项目后面生成柔和阴影。更多...

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

属性

• cached : alias
• color : alias
• horizontalOffset : real
• radius : int
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias
• verticalOffset : real

详细说明

DropShadow 效果会将输入的透明度通道进行模糊处理，对结果进行着色，并将其放置在源对象后面以生成柔和的阴影。可通过color 属性更改阴影的颜色。阴影的位置可通过horizontalOffset 和verticalOffset 属性进行调整。

柔和阴影是通过使用高斯模糊对图像进行实时模糊处理而生成的。实时模糊是一项计算成本较高的操作。即使是采样数量适中的全屏高斯模糊，也只有在高端图形硬件上才能以 60 fps 的帧率运行。

当源图像静止时，可将cached 属性设置为分配另一个缓冲区，以避免每次渲染时都执行模糊操作。

示例

以下示例演示了如何应用该效果。

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    DropShadow {
        anchors.fill: butterfly
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        color: "#80000000"
        source: butterfly
    }
}

属性文档

cached : alias

此属性允许将效果的输出像素缓存起来，以提高渲染性能。每当源或效果属性发生变化时，缓存中的像素都必须更新。由于需要额外的内存缓冲区来存储效果输出，因此内存消耗会增加。

当源或效果属性处于动画状态时，建议禁用缓存。

默认情况下，该属性设置为false 。

color : alias

此属性定义用于阴影的 RGBA 颜色值。

默认情况下，该属性设置为"black" 。

horizontalOffset : real

HorizontalOffset 和verticalOffset 属性定义了渲染的阴影相对于DropShadow 项位置的偏移量。 通常，DropShadow 项会被锚定，使其填满源元素。在这种情况下，如果将HorizontalOffset和verticalOffset 属性设置为0，则阴影将精确渲染在源项正下方。通过更改偏移属性，可以将阴影相对于源项进行定位。

取值范围为 -inf 到 inf。默认情况下，这些属性设置为0 。

radius : int

半径决定了阴影的柔和程度。半径越大，阴影边缘看起来就越模糊。

要获得理想的模糊效果，需将samples 和radius 设置为满足samples = 1 + radius * 2 的数值，例如：

默认情况下，该属性设置为floor(samples/2) 。

samples : alias

此属性定义在进行边缘柔化模糊计算时，每个像素采样多少个样本。数值越大，质量越好，但渲染速度越慢。

理想情况下，该值应为所需最大半径值的两倍加一，例如：

默认情况下，该属性设置为9 。

该属性不支持动画效果。更改此属性将导致底层的 OpenGL 着色器被重新编译。

source : alias

此属性用于定义将作为生成的阴影源的源项目。

spread : alias

此属性定义了在光源边缘附近，阴影颜色被增强的范围有多大。

该值的取值范围为 0.0 到 1.0。默认情况下，该属性设置为0.0 。

transparentBorder : alias

此属性用于确定该效果是否具有透明边框。

当设置为true 时，元素外部会填充一条1像素宽的透明边框，使得采样源纹理外部区域时使用透明度而非边缘像素。如果没有此属性，具有不透明边缘的图像将不会产生模糊阴影。

在下图中，左侧的矩形具有透明边框且边缘呈模糊状，而右侧的矩形则没有：

默认情况下，该属性设置为true 。

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: false
                horizontalOffset: 8
                verticalOffset: 8
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 8
                verticalOffset: 8
            }
        }
    }
}

verticalOffset : real

HorizontalOffset 和 verticalOffset 属性定义了渲染的阴影相对于“DropShadow ”项位置的偏移量。 通常，DropShadow 项会被锚定，以便其填满源元素。在这种情况下，如果将HorizontalOffset和verticalOffset属性设置为0，则阴影将精确渲染在源项正下方。通过更改偏移属性，可以相对源项调整阴影的位置。

这些属性的取值范围为 -inf 到 inf。默认情况下，这些属性设置为0 。