如何在QtQuick 2.0上为Rectangle创建投影

Question

如何Rectangle在QtQuick 2.0上为可视项目绘制阴影？
我喜欢为我的主窗口画一个阴影(我有一个透明且没有装饰的窗口)

Answer 1

作为剪切阴影问题的一种解决方法,您可以将Rectangle其设置为Item具有附加边距以在帐户中获取模糊半径,并在该容器上应用阴影:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 320
    height: 240

    Item {
        id: container
        anchors.centerIn: parent
        width:  rect.width  + (2 * rectShadow.radius)
        height: rect.height + (2 * rectShadow.radius)
        visible: false

        Rectangle {
            id: rect
            width: 100
            height: 50
            color: "orange"
            radius: 7
            antialiasing: true
            border {
                width: 2
                color: "red"
            }
            anchors.centerIn: parent
        }
    }

    DropShadow {
        id: rectShadow
        anchors.fill: source
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        smooth: true
        source: container
    }
}

Answer 2

只需DropShadow从QtGraphicalEffects模块中使用即可.

一个完整的,有效的例子:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 640
    height: 480
    color: "blue"

    Rectangle {
        id: rect
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "red"
    }

    DropShadow {
        anchors.fill: rect
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        source: rect
    }
}

请注意,您将看到许多类似的警告:

file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5:QML SourceProxy:检测到属性"output"文件的绑定循环:///opt/Qt5.0.1 /5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5:QML SourceProxy:检测到属性"output"文件的绑定循环:///opt/Qt5.0.1/5.0.1/gcc_64/qml /QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5:QML SourceProxy:检测到属性"output"文件的绑定循环:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml :66:5:QML SourceProxy:为属性"output"文件检测到绑定循环:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5:QML SourceProxy:检测到属性"output"文件的绑定循环:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5:QML SourceProxy:为属性"output"检测到绑定循环

这些警告是QTBUG-28521,已在Qt 5.0.2(在撰写本文时尚未发布)中修复.幸运的是,除了恼人的控制台输出外,没有实际问题.

Answer 3

有趣的问题......我一直在寻找更好的方法来做到这一点。这是我目前为 QML 矩形实现投影效果的快速而肮脏的方法。

Rectangle{
    width: 500
    height: 500
    color: "dark grey"


    Rectangle {
        id: backgroundRect
        width: 200
        height: 150
        radius: 5
        anchors.centerIn: parent
        color: "red"

        Rectangle {
            id: dropShadowRect
            property real offset: Math.min(parent.width*0.025, parent.height*0.025)
            color: "purple"
            width: parent.width
            height: parent.height
            z: -1
            opacity: 0.75
            radius: backgroundRect.radius + 2
            anchors.left: parent.left
            anchors.leftMargin: -offset
            anchors.top: parent.top
            anchors.topMargin: offset
        }
    }
}