Set alpha component on an existing QML color object



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


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



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



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


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



  • 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



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


  • You can do color.a = newAlpha



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.