QML类型：DropShadow

一、描述

阴影类型。为源生成彩色和模糊阴影图像并将其放置在源后面，看起来是源项目从背景中升起。

二、使用示例

import QtQuick 2.14
import QtQuick.Window 2.14
import Qt5Compat.GraphicalEffects

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Image
    {
        id: butterfly
        source: "qrc:/Original_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
    }
}

三、属性成员

1、cached : bool

是否设置缓存效果输出像素以提高渲染性能。每次更改源或效果属性时，都必须更新缓存中的像素。设置为true内存消耗将增加，因为需要额外的内存缓冲区来存储效果输出。

建议在源或效果属性动画时禁用缓存。

默认为 false。

2、color : color

用于阴影的 RGBA 颜色值。默认为“black”。

3、horizontalOffset : real / verticalOffset : real

水平偏移 / 垂直偏移。值范围从 -inf 到 inf。默认为 0。

HorizontalOffset 和 verticalOffset 属性定义了渲染阴影相对于 DropShadow 项目位置的偏移。 通常，DropShadow 项会被锚定，以便填充源元素。 在这种情况下，如果 HorizontalOffset 和 verticalOffset 属性设置为 0，则阴影正好在源项下呈现。 通过更改偏移属性，可以相对于源项目定位阴影。

4、radius : real

半径定义了阴影的柔和度。 较大的半径会导致阴影的边缘显得更加模糊。

值范围从 0.0（无模糊）到 inf。 默认为 0.0。

5、source : variant

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

注意：不支持让效果包含自身，例如通过将源设置为效果的父级。

6、spread : real

此属性定义了在源边缘附近增强了多少阴影颜色。

值范围从 0.0 到 1.0。 默认为 0.5。

7、transparentBorder : bool

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

为 true 时，项目的外部填充有 1 像素宽的透明边缘，使源纹理外部的采样使用透明度而不是边缘像素。

如果没有此属性，具有不透明边缘的图像将不会出现模糊边缘。

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

import QtQuick 2.14
import QtQuick.Window 2.14
import Qt5Compat.GraphicalEffects

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Row
    {
        anchors.centerIn: parent
        spacing: 16

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

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