Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Solved Set alpha component on an existing QML color object

    QML and Qt Quick
    3
    10
    6927
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Q
      QJeroen last edited by

      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.

      ODБOï 1 Reply Last reply Reply Quote 2
      • Q
        QJeroen last edited by

        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)
        }
        
        1 Reply Last reply Reply Quote 1
        • ODБOï
          ODБOï @QJeroen last edited by 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)
              }
          }
          
          1 Reply Last reply Reply Quote 0
          • Q
            QJeroen last edited by

            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ï 1 Reply Last reply Reply Quote 1
            • ODБOï
              ODБOï @QJeroen last edited by 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)

              1 Reply Last reply Reply Quote 0
              • Q
                QJeroen last edited by

                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ï 1 Reply Last reply Reply Quote 0
                • ODБOï
                  ODБOï @QJeroen last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • ODБOï
                    ODБOï last edited by 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

                    1 Reply Last reply Reply Quote 0
                    • Q
                      QJeroen last edited by

                      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)
                      }
                      
                      1 Reply Last reply Reply Quote 1
                      • GrecKo
                        GrecKo Qt Champions 2018 last edited by

                        You can do color.a = newAlpha

                        Q 1 Reply Last reply Reply Quote 0
                        • Q
                          QJeroen @GrecKo last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post