[[387304]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

基于安卓平臺的滑動拼圖驗證組件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)初始化畫筆信息，定義畫筆屬性;

//獲取手機屏幕寬度displayAttributes.width 
DisplayManager displayManager = DisplayManager.getInstance(); 
Display display = displayManager.getDefaultDisplay(this).get(); 
DisplayAttributes displayAttributes = display.getAttributes(); 
windowWidth = displayAttributes.width; 
// 進度值初始化 
text = new Text(this); 
text.setMarginTop(800);// 距離頂端邊界的距離 
text.setText("當前進度值"+ progress);// 設定文字 
text.setTextSize(100);// 設定字號 
myLayout.addComponent(text);// 添加進布局中 
// 驗證狀態初始化 
text2 = new Text(this); 
text2.setMarginTop(1000); 
text2.setText("請滑動滑塊驗證"); 
text2.setTextSize(100); 
myLayout.addComponent(text2); 
//初始化畫筆的信息 
mPaint = new Paint(); 
mPaint.setColor(Color.BLACK);//定義顏色 
mPaint.setAntiAlias(true);//定義虛實線 
mPaint.setStrokeWidth(5f);//定義寬度 
mPaint.setStyle(Paint.Style.STROKE_STYLE);//定義繪圖方式 

2、背景圖片繪制

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

//背景圖片的縮放比例 
float ratio = (float) windowWidth/(float) img.getImageInfo().size.width; 
//背景圖片繪制 
Component image = new Component(this); 
Component.DrawTask drawTask = new Component.DrawTask() { 
    @Override 
    public void onDraw(Component component, Canvas canvas) { 
        //按照比例進行縮放 
        canvas.scale(ratio , ratio); 
        //繪圖 
        canvas.drawPixelMapHolder(pixelMapHolder, 0, 0, new Paint()); 
    } 
}; 
image.addDrawTask(drawTask); 
myLayout.addComponent(image); 

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

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

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

//puzzleWidth 為屏幕寬度的1/6 
puzzleWidth = windowWidth/6; 
 
//top為圖片縮放后高度與摳圖高度之差再乘以隨機數 
top = (float) Math.random()*(img.getImageInfo().size.height*ratio - puzzleWidth); 
 
//原圖位置一定在滑塊位置右面 
//屏幕寬度減去兩個拼圖寬度 *隨機數，后向右平移一個滑塊的長度 
puzzel2left = ((windowWidth -puzzleWidth*2) * (float)Math.random()) + puzzleWidth; 

4. 獲取滑塊

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

PixelMap puzzlePixelMap = 
 getPuzzlePixelMap(this , ResourceTable.Media_longa , new Rect((int)(puzzel2left/ratio), (int) (top/ratio), (int) (puzzleWidth/ratio) , (int) (puzzleWidth/ratio))); 
PixelMapHolder pixelMapHolder1 = new PixelMapHolder(puzzlePixelMap); 

5.繪制滑塊

滑塊通過畫筆來繪制，其位置應該根據滑動進度條的進度來移動，并且要對不同手機屏幕的進行適配。同時，為了和用戶友好的交互，我們還需要為滑塊繪制一個邊框，告知用戶這個邊框所在就是滑塊(原圖也需要繪制邊框，原理相同)。繪制滑塊和邊框的代碼如下：

//繪制滑塊 
Component.DrawTask puzzelDrawTask = new Component.DrawTask() { 
    @Override 
    public void onDraw(Component component, Canvas canvas) { 
        Paint paint = new Paint(); 
//移動小滑塊拼圖 
        canvas.translate(slider.getProgress()*displayAttributes.width /100 , top); 
//進行適當比例縮放 
        canvas.scale(ratio , ratio); 
        canvas.drawPixelMapHolder(pixelMapHolder1 , 0 , 0 , paint); 
 
    } 
}; 
//繪制滑塊邊框 
Component puzzleFrame = new Component(this); 
Component.DrawTask drawTask2 = new Component.DrawTask() { 
    @Override 
    public void onDraw(Component component, Canvas canvas) { 
        //方框左側位置 
        float left = slider.getProgress()*windowWidth /100; 
        //繪制邊框的左邊 
        canvas.drawLine(new Point(left , top), 
                new Point(left, top + puzzleWidth), mPaint); 
        //繪制邊框的上邊 
        canvas.drawLine(new Point(left, top), 
                new Point(left + puzzleWidth, top), mPaint); 
        //繪制邊框的右邊 
        canvas.drawLine(new Point(left + puzzleWidth, top), 
                new Point(left + puzzleWidth, top + puzzleWidth), mPaint); 
        //繪制邊框的下邊 
        canvas.drawLine(new Point(left, top + puzzleWidth), 
                new Point(left + puzzleWidth, top + puzzleWidth), mPaint); 
    } 
}; 

6. 進度條滑動更新

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

//設置進度條監聽 
slider.setValueChangedListener(new Slider.ValueChangedListener() { 
    @Override 
//拖動進度條引起的更新 
public void onProgressUpdated(Slider slider, int i, boolean b) { 
    //滑塊的位置更新 
    puzzle.invalidate(); 
    //滑塊邊框位置的更新 
    puzzleFrame.invalidate(); 
    //進度值更新 
text.setText("當前進度值 : " + slider.getProgress()); 
    } 
} 
 
//當用戶開始滑動進度條時，驗證狀態變為“開始”字樣。 
public void onTouchStart(Slider slider) { 
    //開始拖動的方法 
    text2.setText("開始"); 
} 
 //判斷滑塊左側邊的位置和原圖的左側邊的位置是否在誤差內 
public void onTouchEnd(Slider slider) { 
        if(((slider.getProgress()*windowWidth /100)<(puzzel2left + puzzleWidth/10))&&((slider.getProgress()*windowWidth /100)>(puzzel2left - puzzleWidth/10))) 
    { 
        text2.setText("驗證成功"); 
    }else { 
        text2.setText("驗證失敗，請重新驗證"); 
        slider.setProgressValue(10); 
    } 
} 

項目貢獻人

趙柏屹 鄭森文 朱偉 陳美汝 張馨心

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com