Mask an image

yassine26

Hello,
I want to hide part of an image with an item or a transparent rectangle.
Tanks for your help

sierdzio

Just create a rectangle/ image object, place it over the one you want to map, apply a higher "z" value than the background (that's usually done automatically for you), and then set it to be transparent ("color: Qt.rgba(0,0,0,0.5) ") - or similar.

yassine26

Thank you sierdzio i do it but it doesn't work as i want

sierdzio

More text "here":http://qt-project.org/forums/viewthread/1020. Harmattan components seem to have a "masked item":http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-maskeditem.html, and QtQuick2 particle system has masked particles. That is all I know ;)

yassine26

Thanks!! So you think there are no simple solutions in qt?

yassine26

quik 1

sierdzio

I don't actually know what do you want to achieve, I'm just trying to determine that. You can get good results with an Image element, where you put a PNG as the source (PNG has support for alpha channel).

mlong

bq. I want to hide part of an image with an item or a transparent rectangle.

Are you saying you want to "cut a hole" in your image so that the background behind it shows through, or are you wanting to obscure a part of your image with another item?

yassine26

@mlong: i want to mask a part of my image with another item, (this item can move with an animation)

mlong

Hmm. It should be very simple. Sierdzio's original advice should work for you. Can you give a sample of code of how you're trying it?

yassine26

of course!!
@
Rectangle {
width: 360
height: 480
color: "transparent"
z:3

}

Image {
    id: jaune
    visible: true
    z: 1
    source: Utils.setImageSource()// u can use a local pic for test 
}

@

mlong

Ok. So, that should put an invisible rectangle on top of your Image, which should make the image look just the same as if there were no rectangle...

What's it doing? What are you expecting it to do?

yassine26

I want for example the half of my image is invisible and see the background in place of the hidden part

mlong

Ah, that's what I meant by "cut a hole" so that the background shows through. There's no way to put something on top of an item which would render the item below it transparent. If you just need an edge of the image to be invisible (rather than some arbitrary hole in the middle) you could make the image a child of a Rectangle element which has clip: true enabled, so that by adjusting the x and y offset of your image on the rectangle and the width and height of the rectangle itself, you could mask off any edges. (The rectangle becomes a window that masks off your Image.) I'm not sure what your use case is, but it may be a hack that could move you in the direction you need to go.

For example (assume you have an Image that is 100x100):
@
Rectangle {
id: myrect
clip: true
width: 50
height: 50

Image {
id: myImage
source: "..."
x: -25
y: -25
}
}
@
would cut 25 pixels off each side of the Image.

Using:
@
...
Image {
id: myImage
source: "..."
x: 0
y: 0
}
...
@
would show the top-left 50x50 pixels of your Image.

Anyway, YMMV, but that may help some.