ColorOverlay disappears when scaled



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


  • Moderators

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


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


Log in to reply
 

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