在案例中的注册、重置密码和修改信息等部分,为了确保操作对象是用户而不是机器盗刷,我们常用到验证码。今天我们就结合画布中的遮罩功能来实现一种常用的拼图滑块解锁式验证码。
1.遮罩
遮罩是画布下才能使用的一种功能,作用是让两个组件,一个负责提供形状一个负责提供图案,比如demo中这两张图片,拼图(彩)是一张拼图形状的白色图片,背景(动)是一张背景彩图。
将拼图(彩)移动到背景(动)的上面,并将背景(动)的遮罩对象设置为拼图(彩),我们就可以发现只能通过拼图(彩)的区域看见背景(动)的一部分。即拼图(彩)提供了形状,而背景(动)提供了图案。
2.案例布局
接下来我们看一下案例的布局,画布内放置了两个对象组组件,对象组通常用于在网页/H5/小程序的绝对定位环境下,给子对象分组,便于同组内的对象整体移动管理,方便排版布局的调整。
slide对象组中,设置了背景(动)的遮罩对象为拼图(彩),作用就是展示从原图中抠出的那一小块。
bg对象组的作用则是展示原图被