Solved 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!
-
@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.
-
@beecksche
then my suggestion (to put ColorOverlay inside the Image) was wrong i guess -
Hello @beecksche ,
What happens if you but both
Image
andColorOverlay
in anÌtem
as @raven-worx suggested? -
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 } }