鴻蒙第三方元件SwipeCaptcha滑動拼圖驗證元件

前言

基於安卓平臺的滑動拼圖驗證元件SwipeCaptcha（ https：//github。com/mcxtzhang/SwipeCaptcha），實現了其核心功能的鴻蒙化遷移和重構，程式碼已經開源到（https：//gitee。com/isrc_ohos/SwipeCaptcha），歡迎各位下載使用並提出寶貴意見！

背景

在頁面登入或者註冊的時候，為了確保不是機器人操作，會讓使用者手動驗證。驗證方式分為滑動拼圖驗證和滑動驗證兩種。本文的SwipeCaptcha元件可以實現滑動拼圖的驗證方式，操作簡單，安全性強，被眾多APP使用。

元件效果展示

鴻蒙系統的SwipeCaptcha元件在使用時，有兩個較為重要的圖片：滑塊和原圖。這兩張圖片被放置與同一水平線上，使用者拖動滑塊至原圖處，誤差在一定範圍內，即可驗證成功。每次呼叫SwipeCaptcha元件，滑塊和原圖的位置都會發生隨機變化，登入時被暴力破解的難度增加，安全性較高。

在SwipeCaptcha元件的驗證介面，還有當前進度值和驗證狀態的描述。當前進度值表示滑塊在水平方向的滑動進度，進度為100時，表示滑塊滑至最右端。進度值下方展示的是當前的驗證狀態，可分為：“開始”、“驗證失敗，請重新驗證三種狀態”、“驗證成功”。下面依次展示SwipeCaptcha元件拼圖驗證失敗和成功的效果圖。

1、驗證失敗效果

使用者未將滑塊拖至原圖處，導致滑塊與原圖的位置誤差較大，驗證失敗。

圖1 驗證失敗效果

2、驗證成功效果

使用者拖動滑塊至原圖處，誤差在一定範圍內，驗證成功。

圖2 驗證成功效果

Sample解析

Sample主要包含以下四個部分：1）拼圖背景匯入手機。2）裁剪滑塊。3）繪製滑塊。4）驗證拼圖是否成功。下面將透過具體步驟對上述四個部分進行詳解。 1、資料初始化

本步驟包含三個部分的資料設定：（1）獲取手機螢幕寬度資訊；（2）設定進度值和驗證狀態的初始提示文字，如“當前進度值”、“請滑動滑塊驗證”；（3）初始化畫筆資訊，定義畫筆屬性；

2、背景圖片繪製

用手機螢幕的寬度除以背景圖片的寬度，得到背景圖片的縮放比例，當該圖片顯示在手機中，按照此比例縮放可與螢幕同寬。該比例用於背景圖片適配不同型號的手機螢幕。

3。 確定滑塊和原圖的位置

圖3 滑塊和原圖的位置示意

puzzleWidth為滑塊或者原圖的寬度；top為隨機數值，表示滑塊或者原圖的上邊距離背景圖片上邊的距離；puzzel2left也為隨機數值，表示原圖左邊距離背景圖片左邊的距離。有了以上三個變數可以確定元件中滑塊和原圖的初始位置和大小（滑塊初始時位於螢幕的最左側）。下面介紹上述屬性是如何計算出來的。

4。 獲取滑塊

本步驟需要根據原圖的位置，解碼出一個圖片作為滑塊。首先設定滑塊的形狀為矩形，依據上述的puzzel2left、puzzleWidth屬性，確定矩形所在區域，依據縮放比例，將矩形區域對映為原比例影象，並對此影象進行解碼，得到滑塊影象資料。

5。繪製滑塊

滑塊透過畫筆來繪製，其位置應該根據滑動進度條的進度來移動，並且要對不同手機螢幕的進行適配。同時，為了和使用者友好的互動，我們還需要為滑塊繪製一個邊框，告知使用者這個邊框所在就是滑塊（原圖也需要繪製邊框，原理相同）。繪製滑塊和邊框的程式碼如下：

6。 進度條滑動更新

為進度條設定監聽，拖動進度條會引起三處更新：（1）滑塊位置和滑塊邊框位置的更新；（2）進度值的更新；（3）驗證狀態的更新。在驗證狀態的更新中，需要對使用者拖動進度條結束時的驗證狀態進行判斷，滑塊和原圖的位置差距是否在誤差範圍內，如果在範圍內，則顯示驗證成功，如果不在誤差範圍內，則顯示驗證失敗，提示需要重新驗證。

想了解更多精彩內容，快來關注計算機java程式設計