我想为我的主透明且无装饰的窗口(一个矩形)绘制阴影。
如何使用 QtQuick 2.0 做到这一点?
作为剪切阴影问题的解决方法,您可以将
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
}
}
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
}
}
请注意,您将看到许多如下警告:
文件:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5: QML SourceProxy:检测到属性“输出”的绑定循环 文件:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy:检测到属性“输出”的绑定循环 文件:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy:检测到属性“输出”的绑定循环 文件:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy:检测到属性“输出”的绑定循环 文件:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy:检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5:QML SourceProxy:检测到属性“输出”的绑定循环
这些警告是 QTBUG-28521,已在 Qt 5.0.2 中修复(在撰写本文时尚未发布)。幸运的是,除了烦人的控制台输出之外,没有任何实际问题。
这是我暂时为 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
}
}
}
我尝试了上面的代码,它实际上添加了一个阴影,尽管在我的例子中,简单地添加另一个带有一点偏移的矩形给了我一个我更喜欢的效果。
Rectangle{
id: rec_Shadow
height:rect_withShadow.height
width: rect_withShadow.width
border.color: "#B3B3B3"
color: "#C5C5C5"
anchors{
verticalCenter: rect_withShadow.verticalCenter
horizontalCenter: rect_withShadow.horizontalCenter
horizontalCenterOffset: 5
verticalCenterOffset: 5
}
radius: rect_withShadow.radius
}
接下来添加您想要阴影的矩形,并将其命名为 rect_withShadow