ColorOverlay in GridLayout



  • Hi,
    i want to show some images in a grid layout. To override the color of the images i use the ColorOverlay class.

    Item {
        id: item1
        GridLayout {
            anchors.fill: parent
            columns: 2
    
            Image {
                id: im1
                source: "qrc:/images/im1.png"
                sourceSize.width: 75
                sourceSize.height: 75
                smooth: true
                visible: false
            }
    
            ColorOverlay {
                anchors.fill: im1
                source: im1
                color: "red"
            }
    
            Image {
                id: im2
                source: "qrc:/images/im2.png"
                sourceSize.width: 75
                sourceSize.height: 75
                smooth: true
                visible: false
            }
    
            ColorOverlay {
                anchors.fill: im2
                source: im2
                color: "red"
            }
    }
    
    

    The color of the images is changed but unfortunately they all appear in the upper left corner of the window.

    Do i need to change some properties?

    Thanks!


  • Moderators

    @beecksche
    try it this way (overlay is a child of the image):

    Image {
                id: im1
                source: "qrc:/images/im1.png"
                sourceSize.width: 75
                sourceSize.height: 75
                smooth: true
                visible: false
    
                ColorOverlay {
                     anchors.fill: parent
                     source: parent
                     color: "red"
                }
            }
    

    or wrap the image and the overlay inside a new Item element (like in the example)



  • @raven-worx said in ColorOverlay in GridLayout:

    @beecksche
    try it this way (overlay is a child of the image):

    Image {
                id: im1
                source: "qrc:/images/im1.png"
                sourceSize.width: 75
                sourceSize.height: 75
                smooth: true
                visible: false // visible: true !
    
                ColorOverlay {
                     anchors.fill: parent
                     source: parent
                     color: "red"
                }
            }
    

    I need to change visible: true, so it works perfectly for me! Thanks!



  • @raven-worx
    Now i recognized the following error:

    ShaderEffectSource: 'recursive' must be set to true when rendering recursively.


  • Moderators

    @beecksche
    then my suggestion (to put ColorOverlay inside the Image) was wrong i guess



  • Hello @beecksche ,

    What happens if you but both Image and ColorOverlay in an Ìtem as @raven-worx suggested?



  • @raven-worx , @Julien-B

    Worked!

    Thanks!!

            Item {
                width: image.width
                height: image.height
    
                Image {
                    id: image
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/images/image.png"
                    sourceSize.width: 50
                    sourceSize.height: 50
                    smooth: true
                    visible: false
                }
    
                ColorOverlay {
                     color: "red"
                     anchors.fill: image
                     source: image
                }
            }
    

Log in to reply
 

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