如何在图像中制作渐变不透明度？答案

【问题标题】：How do I make a gradient opacity in an image?如何在图像中制作渐变不透明度？
【发布时间】：2018-07-06 11:06:33
【问题描述】：

如何在 qml 中使图像淡出？我怎样才能达到这个效果？在这里我附上我希望它看起来如何的图像

【问题讨论】：

【解决方案1】：

一种可能的解决方案是使用OpacityMask 和LinearGradient 作为源

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 600
    height: 600
    title: qsTr("Hello World")
    Image {
        id: input
        source: "input.jpg"
        anchors.fill: parent

        OpacityMask {
            source: mask
            maskSource: input
        }

        LinearGradient {
            id: mask
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.2; color: "transparent"}
                GradientStop { position: 0.5; color: "white" }
            }
        }
    }
}

输入：

输出：

【讨论】：

【解决方案2】：

虽然公认的解决方案达到了预期的效果，但它实际上并没有在原始图像中创建不透明度渐变（这是我所需要的）。它只是在图像顶部覆盖LinearGradient； OpacityMask 没有做任何事情，可以从该示例中删除。图片底部的白色来自LinearGradient，而不是来自背景。

以下是如何在原始图像中创建不透明度渐变的示例。请注意，“源图像”（在本例中为 Rectangle）和 LinearGradient 的可见性都是 false。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")
    
    // The background, to ensure it's working
    Rectangle {
        color: "red"
        anchors.fill: parent
    }

    // The "source image"
    Rectangle {
        id: blueBox
        color: "blue"
        anchors.fill: parent
        opacity: 0.5
        visible: false
    }
    
    LinearGradient {
        id: mask
        anchors.fill: blueBox
        gradient: Gradient {
            GradientStop {
                position: 0.2
                color: "transparent"
            }
            GradientStop {
                position: 0.5
                color: "white"
            }
        }
        visible: false
    }
    
    OpacityMask {
        anchors.fill: parent
        source: blueBox
        maskSource: mask
    }
}

【讨论】：