半透明件的DropShadow

Question

我在一个项目中创建一个阴影有一个问题。项目不是完全不透明的，所绘制的阴影出现在项目后面，降低了透明度效果。

我需要一些东西，如图片的右边，但我得到了我的尝试是显示在左边。我需要你仔细观察这个物体，因为背景不是固体的。

​

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

第一次尝试。这使得opacity与rec1中的1相等

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

第二次尝试。这维护了opacity of rec1，但显示了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。背景颜色和正确的阴影应用：

​

​

编辑

这种效果可以像在这个例子中所做的那样，在不同的层次上结合起来。

考虑到你的编辑，我认为你把这里的东西弄得有点复杂了。我上面给出的示例可以作为一种方式来表明不透明度应该像预期的那样工作。考虑到您所显示的错误，我决定提供一个通用解决方案，您应该(希望)立即应用该解决方案。

白色Rectangle充当实际内容的容器。因此，应该在不同的QML文件中定义它。通过这种方式，我们可以提供一个default属性，即定义添加到组件时子Item的位置。通过添加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 )。(给定的阴影参数)：

​

​