qt - 如何在图像中进行不透明度渐变？

问题描述

我已经实现了一个类似于 Itunes 的封面流程。但是我仍然无法解决一件事，即使在研究和阅读文档之后......我有以下结果，但我想只显示一半的反射。

我找到了以下 StackOverflow 帖子：如何在图像中制作渐变不透明度 - 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
    }
}

任何想法都会受到欢迎:) 我试图让我的帖子尽可能清晰，但如果有什么需要理解的地方，请询问:)

标签： qtqmlqtquick2

qt - 如何在图像中进行不透明度渐变？

问题描述

解决方案

推荐阅读