ColorOverlay disappears when scaled

jars121

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

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

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!