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)
}

ODБOï

@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)...

ODБOï

@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
        }
}

ODБOï

@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
}
}

ODБOï

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.