Have you ever wanted to display a photo within a non-rectangular shape, such as a circle, triangle or lightning bolt? This effect is usually referred to as “masking”, and while this can be easily done in LiveCode, the technique isn’t obvious. To produce a mask effect, you need to group the objects to be masked, with the mask object in the top-most layer of the group, and apply certain ink effects to the mask object and the group itself.
 
I’ve posted a demo stack that shows several options for masking. To access the stack, copy the following line and execute it in your LiveCode message box:


In the stack examples, the following combination of ink effects are used:

Example 1
mask graphic = blendDstIn
group = blendSrcOver

Example 2
mask graphic = blendDstOut
group = blendSrcOver

Example 3
mask image = blendDstOut
group = blendSrcOver
 
One final note: if you want your users to be able to click through the mask and access the image underneath as shown in the examples, simply disable the mask object in the group. It will remain visible but won’t respond to clicks.
 

(Visited 602 times, 1 visits today)
1