Details
-
Suggestion
-
Resolution: Unresolved
-
P3: Somewhat important
-
None
-
None
-
None
Description
I have a "background" rounded rectangle, and wanted to mask a child item to the background shape (so it was clipped by the background's round corners).
Every answer on the web for how to do this talks about OpacityEffect, which doesn't seem to exist anymore.
I eventually got it to work with MultiEffect (mostly), but as usual it was absolute minefield of gotchas and bad defaults:
- MultiEffect creates a new item that exists alongside the "source" item, so you want to make the source invisible. This is not at all clear from MultiEffect's paltry documentation.
- For MultiEffect's mask effect, the source and maskSource must be the same size. You can't just say "mask item A to item B"... if they're different sizes, it doesn't complain but you get nonsense results. This took forever to figure out.
- To mask A to B, you have to put A inside a dummy item that's the same size as B, and then use the dummy item as the source.
- The docs for MultiEffect don't have examples using Items as sources, and so don't talk about the uses/requirements for layer.enabled / ShaderEffectSource enough.
- I was trying to use background round rect in two separate MultiEffects: once as the source for a shadow MultiEffect, and also as the maskSource for this MultiEffect. That doesn't work because the shadow changes the size of the background. I had to (as far as I can tell) wrap the background in two separate ShaderEffectSource elements and use those as the sources. This sort of makes a bit of sense once you realize how MultiEffect works, but it took a long time figure out that on my own.
No offence, but it seems very silly that the only "documentation" for mask on the MaskEffect page is that weird example of using an image to fade out an item. But this extremely common task (clipping to parent shape) is not documented at all, and very had to figure out.