Linear Gradient on Alpha (Not Color)

Hoyt

QML includes a LinearGradient method that blends two colors. Is there any QML method that allows a linear gradient to be applied to an image's alpha?

I am trying to fade an image in via a gradient.

Hoyt

? Offline

Hi! Have a look at Graphical Effects.

Hoyt

Weiland,

Thank you for your response. I have reviewed Graphical Effects. I see the LinearGradient method, which relates to color gradients, but I do not see any method related to programmatically generating a gradient for alpha. I also see the OpacityMask, but do not know of a good way to use that method to programmatically generate a dynamic alpha gradient.

Hoyt

? Offline

Hmm.. I had hoped that Graphical Effects would offer something for you OOTB. If everything else fails you can implement any effect you like using ShaderEffect QML Type. I didn't look it up but I guess that's just how the stuff in Graphical effects is implemented. It has a QML API so that might be handy. If going that road turns out to be too hard you could also craft a solution in C++ that manipulates a QImage, maybe based on QQuickPaintedItem Class. That will probably be suboptimal performance-wise but might be easier and better than nothing. @J.Hilk is the man!

J.Hilk

@Hoyt hi, just tested it, LineGradient should work with alpha as well:
take this example:

import QtQuick 2.8
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true

    title: qsTr("Hello World")

    width: 300
    height: 300
    Rectangle{
        anchors.fill:parent
        color: "red"
    }

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(0, 300)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FFFFFF" }
            GradientStop { position: 1.0; color: "#FFFFFFFF" }
        }
    }
}

The Linear Gradient describes an Alpha change from transparent to white on a red background.
Works fine for me.

Hoyt

Truly impressive! Thank you very much.

Hoyt