Masked Image is a special Image Object with an overlay layer that the user can erase by swiping with his/her mouse or finger. The overlay can be a visual effect, such as greyscale, sepia, blur or another image of the same size.
Masked Image object supports the same properties of the standard Image Object, plus the ones listed below. To edit properties of a Masked Image object, select it and use the selection inspector at the right of your project window.
|Mask Mode||One between Mask Image or one of the image effects, Grayscale, Sepia, Blur, Brightness, Contrast, Hue, Invert, Saturate|
|Mask Image||The Image Asset to use as a mask.|
|Amount||The amount value of the effect to apply|
|Thumb Size||The size of the area that the end user erases with the finger or mouse cursor|
Masked Image triggers all Widget Events. To edit event handlers for a Masked Image object, select it and use the Interactivity Panel on the right side of the project window.
Masked Image object can be used as target of most Generic Actions.
Here’s an example of how a Masked Image widget is exported on the html page:
<div id="obj4" class="SCPageObject SCMaskedImage"> <img id="obj4_img" src="../images/obj4_image.jpeg" style="display: block;" /> <canvas id="obj4-mask" width="200" height="180">Your Reading System does not support canvas</canvas> </div>