我在项目中创建阴影时遇到问题。该项目并非完全不透明，绘制的阴影出现在项目后面，从而降低了透明度效果。
我需要一些如右图所示的东西，但我通过尝试得到的结果显示在左侧。我需要你透过物体看，因为背景不是固体。
我尝试使用maskEf，但对象变得完全不透明。我设法定义的最接近的解决方案是使用另一个形状相同但完全透明且具有实心边缘的元素。但是我不喜欢实心边缘，有什么建议吗？
第一次尝试。这使得 rec1 中的 opacity 等于 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
}
}
第二次尝试。这会保持 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
}
}
}
}
}
但是，阴影不会超出元素的限制，如在角落中所示:
有什么建议吗？
最佳答案
假设阴影也应该是半透明的 - 否则整体效果会非常难看 - 您可以通过以下方法解决问题:
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
}
}
}
这是生成的矩形，几乎不可见。背景颜色和应用了正确的阴影:
编辑
效果可以在不同级别进行组合，如 this example 中所做的那样。 .
鉴于您的编辑，我认为您使此处的内容过于复杂化了。我上面给出的示例是为了表明不透明度应该按预期工作。鉴于您所显示的错误，我决定提供一个通用解决方案，您应该(希望)开箱即用。
白色矩形充当实际内容的容器。因此，它应该在不同的 QML 文件中定义。这样我们就可以提供default属性，即定义子 Item 添加到组件时应放置的位置。通过添加alias我们还可以微调组件、更改颜色、阴影方向和其他图形方面。您的组件的可能定义如下:
// 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 属性以声明方式将其与任何其他(自定义)组件组合在一起。我们示例的总体结果如下。请注意，由于我们定义和使用的众多别名，每个组件的整体外观都是独一无二的。另请注意，该组件可以与自身组合(通过仔细调整给定阴影参数的边距):
关于qt - DropShadow 用于半透明项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31497707/