Set alpha component on an existing QML color object

[QJeroen]

Hi,

I've been searching everywhere but can't find a way to set the alpha component of an existing QML color. I create a color with Qt.hsla(0.08,1,0.53,1) and want to use that color but with a different alpha. Instead of speciying the entire color again I only want to set it's alpha component manually. In C++ this is easy with QColor::setAlpha or QColor::setAlphaF, but in QML I cannot find a function to do this. Since this is such a basic functionality I really think this should be possible and I'm missing something obvious here.

Please inform me how to do this.

[QJeroen]

Thanks for your examples, it gave me the right direction of a good solution. This is what I came up with derive a color from a readonly property:

function setColorAlpha(color, alpha) {
    return Qt.hsla(color.hslHue, color.hslSaturation, color.hslLightness, alpha)
}

[LeLev]

@QJeroen hi,

Window {
    id:root
    visible: true
    width: 640
    height: 480

    property real alph : 1
    /*Timer{
        running: true
        repeat: true
        interval: 500
        onTriggered: {
            if(alph>0.1)
            alph-=0.1
            else alph =1
        }
    }*/ 

    Rectangle{
        anchors.centerIn: parent
        height: 50
        width: 50
        color: Qt.hsla(0.08,1,0.53,alph)
    }
}

[QJeroen]

Thanks for your reply, it works but feels a bit like a workaround for me. So apparently there is no function to change the alpha component like: Qt.setAlpha(color, alpha)...

[LeLev]

@QJeroen I don't know if there is a special function to directly change alpha on a color, but this is not 'bad workaround' at all..
Qt.hsla() is a function witch takes 4 parameters, so you can pass hardParameters ( Qt.hsla(1,1,0.4,1) ) or variables to that function.

We could do the same thing on 'h, s, l ' parameters to

property real alph : 1
property real h : 0.8
property real s : 1
property real l : 0.53

color: Qt.hsla(h,s,l,alph)

[QJeroen]

I'm not saying it's bad, but not suited for my case. Let me be more specific of what I'm trying to do.

I have a singleton qml file which has properties for all the colors that I am using in my application.

pragma Singleton // load only one per session
import QtQuick 2.7

QtObject {
    readonly property color colorBlueDark: Qt.hsla(0.57,1,0.2,1)
}

Now somewhere in a component, I don't have the exact parameters for every component anymore.

import "styles"

Rectangle {
        id: blaat
        color: {
            if (pressed)
                Style.colorBlueDark
        }
}

[LeLev]

@QJeroen I see.

Maybe you can achieve your goal just by changing 'opacity' parameter

import "styles"

Rectangle {
id: blaat
opacity: 0.2
color: {
if (pressed)
Style.colorBlueDark
}
}

[LeLev]

This is still not exactly what you are looking for, but works also

QtObject {
id:obj
property color colorBlueDark: Qt.hsla(0.57,1,0.2,1)
}

Component.onCompleted: obj.colorBlueDark.a = 0.9


Rectangle{
    height: 50
    width: 50
    anchors.centerIn: parent
    color : obj.colorBlueDark
      }

Or, i think last possibility is to extend QML with c++ class

[QJeroen]

Thanks for your examples, it gave me the right direction of a good solution. This is what I came up with derive a color from a readonly property:

function setColorAlpha(color, alpha) {
    return Qt.hsla(color.hslHue, color.hslSaturation, color.hslLightness, alpha)
}

[GrecKo]

You can do color.a = newAlpha

[QJeroen]

@GrecKo You can't do that with a readonly property. And if you make a copy of it in javascript that one is also readonly.