Ui XML Reference\StencilMask
Shows through part of parent or self Mask
area.
Example Usage
<Mask layout="flex" widthPercent="100" heightPercent="100" justifyContent="center" alignItems="center">
<!-- Button has a child stencil mask that will 'cut through' the masking frame's effect -->
<Button height="200" width="200" position="absolute">
<Frame position="absolute" widthPercent="120" heightPercent="120">
<StencilMask frameImage="shape_square_32x32" widthPercent="100" heightPercent="100" />
</Frame>
</Button>
<!-- Frame that actually creates the masking effect -->
<Frame widthPercent="100" heightPercent="100" frameImageColor="r: 0, g: 0, b: 0, a: 0.45" />
</Mask>
This xml script produces the following UI:
The stencil mask is slightly larger than it's parent button. As the button changes size in response to being clicked on, the stencil mask matches its size and thus the stenciled portion adjusts smoothly.
Related Trigger Function(s):
Related UI XML Properties:
onlyAffectChildren
Value type: boolean
Supports data binding
Description
If true
the stencil mask will only affect children frames. This will make the stencil mask no longer stencil out part of its parent mask. Instead, the stencil will stencil out any covered portions of children frames. This still requires the stencil mask to be placed inside a mask frame, but the mask frame does not need a tinting frame.
Example Usage
<Mask layout="flex" heightPercent="100" widthPercent="100" justifyContent="center" alignItems="center">
<StencilMask height="100" width="100" frameImage="shape_inner_round_16_no_sliced" onlyAffectChildren="true" position="absolute" justifyContent="center" alignItems="center">
<Button height="200" width="200" position="absolute" />
</StencilMask>
</Mask>
This xml script produces the following UI:
Here the stencil mask cuts a static hole in its child button frame.