半透明项目的 DropShadow

Question

我无法在项目中创建阴影。该项目并非完全不透明，绘制的阴影出现在项目后面，降低了透明度效果。

我需要的东西如右图，但我尝试得到的东西显示在左边。我需要你看透物体，因为背景不牢固。

我尝试使用 maskEf 但对象变得完全不透明。我设法定义的最接近的解决方案是使用另一个形状相同但完全透明且具有实心边缘的元素。但是我不喜欢纯边，有什么建议吗？

第一次尝试。这使得 opacity 等于 1 in rec1:

Rectangle {
    id: rec1; color: "white"; opacity: 0.5
    anchors.fill: parent; radius: CalcSize.getW(8)
    layer.enabled: true
    layer.effect: DropShadow {
    id: shadowEf
        anchors.fill: rec1
        source: rec1
        horizontalOffset: 3
        verticalOffset: 3
        radius: 15
        samples: 16
        color: "red"
        transparentBorder: true
    }
}

第二次尝试。这保持 rec1 的 opacity 但显示 sourceMaskEf

的边界

DropShadow {
    id: shadowEf
    anchors.fill: sourceMaskEf
    source: sourceMaskEf
    horizontalOffset: 3
    verticalOffset: 3
    radius: 15
    samples: 16
    color: "red"
    transparentBorder: true
}

Rectangle {
    id: sourceMaskEf; color: "transparent"
    anchors.fill: rec1; radius: rec1.radius
    border { width: offset; color: "white"; }
}

OpacityMask {
    id: maskEf
    opacity: 1
    anchors.fill: rec1
    source: ShaderEffectSource {
            sourceItem: shadowEf
            hideSource: false
        }
    maskSource: ShaderEffectSource {
            sourceItem: sourceMaskEf
            hideSource: false // if set true the shadow is hide to
        }
    cached: true
}

Rectangle {
    id: rec1; color: "white"; opacity: 0.5
    anchors.fill: parent; radius: CalcSize.getW(8)
}

编辑

嗯，根据BaCaRoZzo的建议，这就是我的解决方案。它更接近我正在寻找的东西：

Component {
    id: fondoItemPromo
    Item {
        id: item1; opacity: 0.5
        layer.enabled: true; anchors.fill: parent
        anchors.margins: CalcSize.getW(5) //Just for test
        Rectangle {
            id: rec1; color: "white"
            anchors.fill: parent; radius: CalcSize.getW(8)
            Item {
                id: item2; opacity: 0.5; layer.enabled: true
                anchors.fill: parent; clip: true
                Rectangle {
                    id: rec2; color: "white"
                    anchors.fill: parent; radius: CalcSize.getW(8)
                    layer.enabled: true
                }
                DropShadow {
                    anchors.fill: rec2
                    source: rec2
                    transparentBorder: true
                    horizontalOffset: 3
                    verticalOffset: 3
                    radius: 15
                    samples: 16
                    color: "black"; clip: true
                }
            }
        }
    }
}

但是，阴影不会超出元素的限制，如角落所示：

有什么建议吗？

Answer 1

假设阴影应该是半透明的 - 否则整体效果会很丑陋 - 你可以通过以下方法解决问题：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.3

ApplicationWindow {
    width: 200
    height: 300
    visible: true
    color: "steelblue"
    
    Item {
        id: layered
        opacity: 0.2
        layer.enabled: true
        anchors.fill: parent
        
        Rectangle {
            id: rec1
            width: 100
            height: 100
            anchors.centerIn: parent
            radius: 8
        }
        
        DropShadow {
            id: drop
            anchors.fill: rec1
            source: rec1
            horizontalOffset: 5
            verticalOffset: 5
            radius: 15
            samples: 16
            color: "red"
            transparentBorder: true
        }
    }
}

这是生成的 Rectangle 几乎看不到 w.r.t。应用了正确阴影的背景颜色和：

编辑

可以像 this example 中所做的那样在不同级别组合效果。

鉴于您的编辑，我认为您将此处的内容复杂化了一些。我在上面给出的示例是一种表明不透明度应按预期工作的方式。鉴于您所显示的错误，我决定提供一个您应该（希望）开箱即用的通用解决方案。

白色 Rectangle 充当实际内容的容器。因此，它应该在不同的 QML 文件中定义。通过这种方式，我们可以提供 default property, i.e. define where children Items should be positioned when added to the component. By adding aliases，我们还可以微调组件、更改颜色、阴影方向和其他图形方面。您的组件的可能定义如下：

// ShadowedComponent.qml    

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    opacity: 0.5
    layer.enabled: true
    clip: true
    property alias color: rec.color
    property alias dropColor: drop.color
    property alias voff: drop.verticalOffset
    property alias hoff: drop.horizontalOffset
    property alias radius: rec.radius
    property alias dropRadius: drop.radius
    property alias samples: drop.samples
    default property alias childrenz: rec.children //(1)

    property int margins: 20   //(2)

    Rectangle {
        id: rec
        width: 100
        height: 100
        anchors.fill: parent
        anchors.margins: margins
        radius: 8
        clip: true
    }

    DropShadow {
        id: drop
        anchors.fill: rec
        source: rec
        horizontalOffset: 5
        verticalOffset: 5
        radius: 15
        samples: 16
        color: "darkgray"
        transparentBorder: true
    }
}

(1) 中的声明是至关重要的，如前文所述：我们指定 ShadowedComponent 的任何子项自动成为内部 Rectangle 的子项，将其定位在组件内 (与所需的对齐 - 见下文）。同样重要的是 (2) 中的属性 margins：它为阴影的正确显示提供了必要的间隙。等于零的值会导致出现错误，因为阴影不能超出项目的边界。

组件可以这样使用：

ShadowedComponent {
    color: "red"
    dropColor: "black"
    voff: 3
    hoff: 3
    radius: 8
    dropRadius: 8
    samples: 16

    // inner content...
}

或者，因为所有属性都有默认值，如下所示：

ShadowedComponent {

    // inner content...
}

最后一个可能的用法示例如下：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    width: 300
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        gradient:  Gradient {
            GradientStop { position: 0.0; color: "cyan" }
            GradientStop { position: 0.5; color: "#0099FF" }
            GradientStop { position: 1.0; color: "#6699FF" }
        }

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 10

            ShadowedComponent {
                Layout.fillHeight: true
                Layout.fillWidth: true
                voff: -5
                hoff: -10

                Image {
                    source: "http://avatarmaker.net/free-avatars/avatars/animals_216/cats_237/kitty_close_up_avatar_100x100_36619.jpg"
                    anchors.fill: parent
                    anchors.margins: 3
                }
            }

            ShadowedComponent {
                Layout.fillHeight: true
                Layout.fillWidth: true

                dropColor: "red"
                opacity: 0.7

                Text {
                    anchors.centerIn: parent
                    text: qsTr("QML ROCKS!!!")
                }
            }

            ShadowedComponent {
                Layout.fillHeight: true
                Layout.fillWidth: true
                voff: -5
                hoff: -10

                dropColor: "red"

                BusyIndicator {
                    anchors.centerIn: parent
                    running: true
                }
            }

            ShadowedComponent {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 opacity: 0.6


                 Test {
                    anchors.fill: parent
                    opacity: 1
                    margins: 10

                    Text {
                        anchors.centerIn: parent
                        text: qsTr("QML ROCKS!!!")
                    }
                }
            }
        }
    }
}

由于 default 属性，您可以使用在不同文件中定义的组件以声明方式与任何其他（自定义）组件组合。我们示例的总体结果如下。请注意，由于我们定义和使用的众多 aliases，每个组件的整体外观都是独一无二的。另请注意，该组件可以 与自身组合 （通过仔细调整边距 w.r.t。给定的阴影参数）：

半透明项目的 DropShadow

DropShadow for translucent items

qt

qml

qtquick2

编辑

编辑