QML MaskedItem Element

The MaskedItem element allows you to compose an Item with an alpha mask. More...

Inherits Item

• List of all members, including inherited members

Properties

• mask : Component

Detailed Description

The MaskedItem element reveals portion of your picture or item by composing this item with a mask element. The mask element will be used as an alpha mask.

Usage Example

The following example shows how to apply an alpha mask in a rectangle.

 MaskedItem {
     width: 100
     height: 100

     mask: Image {
         source: "mask.png"
     }

     Rectangle {
         anchors.fill: parent
         color: "red"
     }
 }

Performance Issues

Internally MaskedItem needs to cache their children in a pixmap in order to compose the final result with the mask. So, some cautions are needed while using this item:

1. MaskedItem is clipped by default. It's recommended to not set clip to false, since this may lead to high memory consumption depending on the children geometries; behind the scenes, a pixmap with the size of the final bounding rect is needed. So clipping guarantees that this final bounding rect will not be greater than the element itself.

2. Avoid resizing the MaskedItem element in animations. When the element is resized a new pixmap is created according to the new size, and this will have performance impact. You can resize the children though, if clip is not changed.

3. Try to minimize children updates (like child resize, move, ...), this will reduce cache repaints. You can change mask item size with no additional cost though.

Limitations

1. Currently just the mask element contents is used to create the alpha mask. So do not place any children inside its declaration, as they will not be used.

Property Documentation