Description
Marks a VisualElement that hosts non-rectangular descendants using the "overflow: hidden;" style. Non-rectangular masks are implemented with the stencil. If applicable, the renderer breaks the batch to preemptively set the stencil state, before and after drawing the descendants, so that the descendants won't have to set them at the next masking level. When using this flag, consecutive stencil push/pop operations are cheap and don't require modifying the stencil reference. As a result, the batch doesn't need to be broken for each push/pop operation. Consecutive push/push or pop/pop operations are still expensive. Avoid cases that involve many subtrees, where each subtree uses 2 or more levels of masking, to avoid consecutive push/push or pop/pop operations.
This option reduces stencil state changes and capitalizes on consecutive
mask push/pop operations for efficiency.
Apply this option to a VisualElement with multiple nested masks among its descendants. For example, a child element
has the overflow: hidden; style with rounded corners or SVG background.
The following illustration shows the number of batches in a single-level masking, a nested masking, and a nested masking with MaskContainer.
The yellow color indicates the masking elements. The orange color indicates the masking element with MaskContainer applied.
The numbers indicate the number of batches.
A: Single-level masking (1 batch)
B: Nested masking (5 batches)
C: Nested masking with MaskContainer (2 batches)
Note: Don't use GroupTransform in scenarios with many subtrees, where each
subtree uses two or more levels of masking. This helps minimize consecutive
push/push or pop/pop operations.