QML and masking an Item with another Item

2beers

Hi everyone. I'm curious if it's implemented in qml a mask feature similar to the one in flash: "See the following demo":http://www.entheosweb.com/Flash/masking.asp

If yes how can I do something like that, if no do you think it's a good idea to be implemented in future releases?

Also if it's not implemented is there any way I can do it by combining c++ with qml?

sorry for asking to many questions by I'm new to QML and I need to familiarize with it.

DenisKormalev

You can for example put a rectangle over your item. Set its z greater than your item's z and place it by:
@anchor.fill: maskedItemId@
After it put inside this rectangle another rectangle and set it opacity to 0. Just as quick solution it will be enough I think, but if you want make it more stylish you can play with different transformations.

2beers

hi Denis, thanks for you answer. I tried something but with no luck. not sure is I understand. here is the example I used

@ Rectangle{
id:greenRectangle
width:100
height:100
color:"green"
y:100;
radius:50;
x:150;
z:5

    anchors.fill:redRectangle
    opacity:0
}

Rectangle{
    id:redRectangle
    width:300;height:300
    color:"red"
    x:100;y:100
    z:4

}@

Let me know what I did wrong. The result that I expect is to show a red rectangle as the same shape and size as the green rectangle, with other words the small green rectangle masked the red rectangle, except for his area.

In my code I see only the red rectangle which is not what I'm looking for

2beers

never mind I found the solution. QML is so cool. I'll post the example in case someone is interested in this problem.

@ Rectangle{
id:greenRectangle
width:50;height:50
color:"blue"
x:100;y:100
clip:true

    Rectangle{
        id:redRectangle
        width:300;height:300
        color:"red"
        x:0;y:0
        z:4
    }
}@

so the idea is that inside the small rectangle(green one) you put the big rectangle(red one). then you set clip:true to the small rectangle (if clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle)

My big problem now is this: "Non-rectangular clipping regions are not supported for performance reasons." so if you want to put a radius on a rectangle and then set clip to true it will show you as it will have radius:0 .

Does anyone know if this feature will be updated in future releases so you can use clip with any type of shape?

Also if someone else has a better idea than mine on how to solve this problem feel free to post :)

jdbastardy

Nice work... Thank for providing a good solution. I think this needs a Wiki page! Does anybody agree?

2beers

[quote author="jdbastardy" date="1285404385"]Nice work... Thank for providing a good solution. I think this needs a Wiki page! Does anybody agree?[/quote]

Thanks but I realized that my solution is not a complete one. I just realized that a mask feature is needed to be implemented.

The reasons:

you can use only rectangular shapes
if you rotate,scale,change position of the green square, the red square will also rotate,scale and change position. The purpose is to move only the green square and the red square to have a static position.

Also working with the intersected area of 2 shapes will be nice. :)

Anyway good job Qt team form QML and looking for new features on the next releases.

PS: if someone has a better idea of how to manage this, feel free to post

mbrasser

Hi,

There is this "suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-11258 for allowing non-rectangular clipping. It would be great if you could add another suggestion for masking support -- that way this request won't get lost :-)

Regards,
Michael

2beers

[quote author="mbrasser" date="1285547594"]Hi,

There is this "suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-11258 for allowing non-rectangular clipping. It would be great if you could add another suggestion for masking support -- that way this request won't get lost :-)

Regards,
Michael[/quote]

thanks. I submitted the "mask suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-13970

Feel free to vote for this :)

2beers

Good news everyone. I just found there is already work in progress using qt quick components: http://bugreports.qt.nokia.com/browse/QTCOMPONENTS-388

Kxyu

You can try QML Arsenal plugin, as far as I remember it implements masking image with another image