Qt Forum

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

    Update: Forum Guidelines & Code of Conduct

    Unsolved ColorOverlay disappears when scaled

    QML and Qt Quick
    dropshadow scale overlay
    2
    3
    1299
    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.
    • J
      jars121 last edited by

      Hi,

      I have a ColorOverlay on an image, which changes the colour of the image depending on runtime parameters. This works nicely :)

      When the user touches the image, the image scales slightly, and also has a DropShadow appear underneath to give the effect of the image/button raising slightly off the screen.

      The above works, except the ColorOverlay appears to stop working as soon as the scale is changed. I.e. the original image is shown rather than the ColorOverlay image.

      Image {
          id: image1
             x: 10
             y: 10
             width: 100
             height: 100
             source: Qt.resolvedUrl("Images/Image.svg")
             visible: false
      }
      
      ColorOverlay{
          id: colorOverlay1
          anchors.fill: image1
          source: image1
          color: "red"
          antialiasing: true
          scale: mouseArea1.pressed ? 1.02:1.0
      
          MouseArea {
              id: mouseArea1
              anchors.fill: parent
          }
      
          DropShadow {
              anchors.fill: colorOverlay1
              horizontalOffset: 2
              verticalOffset: 2
              radius: 12
              samples: 25
              color: "#aa000000"
              source: image1
              visible: mouseArea1.pressed ? true:false
          }
      
          Behavior on scale {
              NumberAnimation {duration: 200}
          }
      }
      

      In the example above, the image is red (indicating the ColorOverlay is working) until I press the image, at which point it scales slightly, the drop shadow appears, but the image returns to its normal colour (i.e. the 'red' disappears).

      What am I missing here?

      raven-worx 1 Reply Last reply Reply Quote 0
      • raven-worx
        raven-worx Moderators @jars121 last edited by

        @jars121
        if i got you right, i think this does what you want:

        Item {
            Image {
                id: image1
                x: 10
                y: 10
                width: 200
                height: 200
                fillMode: Image.PreserveAspectFit
                source: "file:///C:/test.png"
                visible: false
            }
        
            ColorOverlay {
                id: colorOverlay1
                anchors.fill: image1
                source: image1
                color: "red"
                antialiasing: true
                visible: mouseArea1.pressed ? false:true
        
                scale: mouseArea1.pressed ? 1.02 : 1.0
                transformOrigin: Item.Center
        
                Behavior on scale {
                    NumberAnimation {duration: 200}
                }
            }
        
            DropShadow {
                anchors.fill: colorOverlay1
                horizontalOffset: 2
                verticalOffset: 2
                radius: 12
                samples: 25
                color: "#aa000000"
                source: colorOverlay1
                visible: mouseArea1.pressed ? true:false
                antialiasing: true
        
                scale: mouseArea1.pressed ? 1.02 : 1.0
                transformOrigin: Item.Center
        
                Behavior on scale {
                    NumberAnimation {duration: 200}
                }
            }
        
            MouseArea {
                id: mouseArea1
                anchors.fill: image1
            }
        }
        

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        1 Reply Last reply Reply Quote 2
        • J
          jars121 last edited by jars121

          Thanks for your reply.

          This seems to have improved the situation somewhat, as I can now see the red image when I click. However, the original image seems to be overlayed over the top of the red image with a level of transparency. It's almost like the visible: false parameter is changed when the MouseArea is clicked?

          It's somewhat hard to explain, hopefully the above makes sense?

          If not, I can put together some screenshots to demonstrate the issue?

          EDIT: Never mind, it looks like user error after all! I had the z-order configured incorrectly, so the drop shadow was being drawn on top of the image rather than underneath it. Thanks again for your help!

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