使用ivx畫布的遮罩效果實現滑動解鎖的經驗總結

在案例中的註冊、重置密碼和修改信息等部分，爲了確保操做對象是用戶而不是機器盜刷，咱們經常使用到驗證碼。今天咱們就結合畫布中的遮罩功能來實現一種經常使用的拼圖滑塊解鎖式驗證碼。

1.遮罩
遮罩是畫布下才能使用的一種功能，做用是讓兩個組件，一個負責提供形狀一個負責提供圖案，好比demo中這兩張圖片，拼圖（彩）是一張拼圖形狀的白色圖片，背景（動）是一張背景彩圖。

將拼圖（彩）移動到背景（動）的上面，並將背景（動）的遮罩對象設置爲拼圖（彩），咱們就能夠發現只能經過拼圖（彩）的區域看見背景（動）的一部分。即拼圖（彩）提供了形狀，而背景（動）提供了圖案。

2.案例佈局
接下來咱們看一下案例的佈局，畫布內放置了兩個對象組組件，對象組一般用於在網頁/H5/小程序的絕對定位環境下，給子對象分組，便於同組內的對象總體移動管理，方便排版佈局的調整。

slide對象組中，設置了背景（動）的遮罩對象爲拼圖（彩），做用就是展現從原圖中摳出的那一小塊。

bg對象組的做用則是展現原圖被扣掉一塊後的效果，其實就是把白色的拼圖圖片放置在彩圖上面，對比顯示它好像缺了一塊的樣子啦。要注意咱們須要使拼圖（彩）在slide對象組中的座標與拼圖（白）在bg對象組中的座標是同樣的，這樣摳出的部分與原圖缺失的部分才正好一致，而咱們所要作的其實也就是將slide對象組平移，使摳出的部分正好平移回原圖中原本的位置來完成解鎖。

3.初始化動做組
動做組random init的做用是初始化設置。首先是生成兩個範圍在0-300之間的隨機整數，將其賦給拼圖（白）和拼圖（彩）的X、Y座標，即從原圖隨機部位摳出一張小圖用於滑動解鎖。而後設置slide對象組的座標爲(-X，Y)，由於咱們須要slide中的拼圖（彩）固定顯示在黑框區域內，因此Y座標能夠隨機，可是X座標是要固定的，而咱們以前給拼圖（彩）設置了座標(X,Y)，它是會向右偏移的，爲了抵消這種偏移咱們須要將整個slide對象組向左作一個等量的偏移。



4.滑塊
滑塊是拓展組件的一種，咱們能夠設置它的數值範圍，而且在添加的事件中獲取其當前值。


5.滑塊的事件
demo中首先是滑塊移動時讓slide對象組也隨之移動，由於藍色區域自己寬度100px，而隨機摳圖範圍的寬度是0-300px，故總範圍是0-400px。滑塊的數值範圍是0-100，對應比例是1:4，因此最終數據綁定的值是-X+數值*4.
第二個事件是當滑塊結束拖動旋鈕時，咱們要判斷解鎖結果。若是拼圖（彩）與拼圖（白）重疊則解鎖成功，但因爲人手操做會有必定偏差，因此這裏只要兩個對象組X、Y座標相差都在5px內便可。最後就是提示用戶解鎖結果並執行random init動做組初始化案例狀態，再將滑塊值歸0。（能夠把滑塊歸0的動做也放進動做組裏）


總結
其實遮罩效果在畫布下的應用是十分普遍的，靈活運用遮罩能夠達成許多顯示效果。好比咱們能夠給遮罩對象添加軌跡實現逐字顯示，或者設置頭像圖片的遮罩對象爲一個圓來實現圓形頭像等等。但願你們能發散思惟，靈活創新，開發出本身的黑科技。