我实现了类似于Itunes的封面流程。但是即使研究和阅读文档后,我仍然无法解决一件事。 我得到以下结果,但是我只想显示一半的反射。
我发现以下StackOverflow帖子:How do I make a gradient opacity in an image - QML与我想要实现的非常相似。除了我的背景是渐变之外,我无法选择白色(或作为解决方案提供的解决方案代码中最后一个GradientStop元素的任何纯色)。
到目前为止,这是我的代码:
Image {
id: rectDelegate
anchors.fill: parent
source: images[index % images.length]
}
ShaderEffectSource {
id: reflection
sourceItem: rectDelegate
y: sourceItem.height
width: sourceItem.width
height: sourceItem.height
transform: [
Rotation {
origin.x: reflection.width / 2
origin.y: reflection.height / 2
axis.x: 1
axis.y: 0
axis.z: 0
angle: 180
}
]
visible: reflection_visible
}
Rectangle {
anchors.fill: reflection
gradient: Gradient {
GradientStop {
position: 0.0
color: "#55ffffff"
}
GradientStop {
// This determines the point at which the reflection fades out.
position: 1
color: "#ffffff"
}
}
visible: reflection_visible
}
我试图将ShaderEffectSource元素嵌入到一个透明矩形中,该透明矩形的高度将是反射高度的一半,并将ShaderEffectSource剪辑在其中,但是反射不会出现:/
这是代码:
Rectangle {
anchors.top: rectDelegate.bottom
color: "transparent"
width: rectDelegate.width
height: rectDelegate.height - 300
visible: reflection_visible
clip: true
border.color: "yellow"
ShaderEffectSource {
id: reflection
sourceItem: rectDelegate
y: sourceItem.height
width: sourceItem.width
height: sourceItem.height
transform: [
Rotation {
origin.x: reflection.width / 2
origin.y: reflection.height / 2
axis.x: 1
axis.y: 0
axis.z: 0
angle: 180
}
]
visible: reflection_visible
}
}
任何想法都欢迎:)我试图使我的帖子尽可能清晰,但是如果有什么需要理解的地方,请询问:)
答案 0 :(得分:0)
阅读这篇文章: How do I make a gradient opacity in an image? - QML 或者您可以使用Canvas类型以透明的渐变绘制图像,但是正确的方法是第一个。