前言

基于安卓平臺的滑動拼## 二級標題圖驗證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCaptcha ），實現(xiàn)了鴻蒙化遷移和重構，代碼已經(jīng)開源到（https://gitee.com/isrc_ohos/swipe-captcha_ohos ），目前已經(jīng)獲得了很多人的Star和Fork ，歡迎各位下載使用并提出寶貴意見！

背景

前一期SwipeCaptcha_ohos2.0文章（https://harmonyos.51cto.com/posts/8787 ）中介紹過，系統(tǒng)為了確保在注冊或登錄頁面時不是機器人在操作（若要實現(xiàn)防機器人操作效果，需要增加加密算法，本期介紹的組件中不包含此部分），通常需要用戶進行手動驗證，本期的SwipeCaptcha_ohos3.0是對前兩版本驗證方式進行功能升級，得到的一種新的驗證方式——旋轉(zhuǎn)驗證。
此驗證方式將圖片作為背景，通過把旋轉(zhuǎn)塊旋轉(zhuǎn)至能夠與背景圖片無縫拼接來完成驗證，操作簡單，安全性強，可被應用于各種網(wǎng)站的登錄、注冊、找回密碼或投票等場景中。

組件效果展示

成功運行組件后，可以通過將旋轉(zhuǎn)塊旋轉(zhuǎn)至能夠與背景圖片拼接成一張完整圖片，從而完成驗證。對應圖1所示的運行效果圖，本組件主要提供的功能是：

  • 拖動圖片下方的滑動條，可以改變旋轉(zhuǎn)塊角度；
  • 若旋轉(zhuǎn)塊旋轉(zhuǎn)后與原背景圖片的誤差值小于既定的閾值，則驗證成功，反之則失??；
  • 在驗證完成后，可以點擊滑動條下方的條狀按鈕重新生成驗證碼（即旋轉(zhuǎn)塊的角度隨機設置）。
    ::: hljs-center

:::

::: hljs-center

圖1 旋轉(zhuǎn)驗證運行效果

:::

Sample解析

通過上文相信大家已經(jīng)了解SwipeCaptcha_ohos3.0組件的使用效果，下面將具體講解其使用方法。其使用方法和SwipeCaptcha_ohos2.0組件類似，在此我們簡單回顧一下，共分為5個步驟：
步驟1. 在xml文件中添加RotateCaptchaView控件。
步驟2. 導入RotateCaptchaView類并聲明類對象。
步驟3. 綁定RotateCaptchaView控件并設置組件背景圖片。
步驟4. 設置回調(diào)處理函數(shù)。
步驟5. 設置Button控件監(jiān)聽事件，重新生成驗證區(qū)域
(1)在xml文件中添加RotateCaptchaView控件
在xml文件中添加RotateCaptchaView控件，用于顯示旋轉(zhuǎn)驗證的動態(tài)效果。先設置該控件的高和寬,此處將寬度定為跟隨父控件的大?。╩atch_parent），高度設置為220vp；再設置組件左右邊距分別為12vp，旋轉(zhuǎn)塊的半徑為80vp。
```html/xml
ohos:id="$+id:rotateCaptchaView"http://控件id
ohos:height="220vp"http://控件的高
ohos:width="match_parent"http://控件的寬
ohos:left_margin="12vp"http://左邊距
ohos:right_margin="12vp"http://右邊距
app:captchaRadius="80vp"/>//旋轉(zhuǎn)塊半徑

**(2)導入SwipeCaptchaView類并聲明類對象**在MainAbilitySlice.java文件中，通過import關鍵字導入RotateCaptchaView類，該類用于在后續(xù)為驗證結(jié)果設置回調(diào)并重新生成旋轉(zhuǎn)塊角度。```java//導入SwipeCaptchaView類import com.huawei.swipecaptchaview.lib.RotateCaptchaView;public class MainAbilitySlice extends AbilitySlice {//聲明SwipeCaptchaView類對象SwipeCaptchaView swipeCaptchaView;  ......}

(3)綁定SwipeCaptchaView控件并設置組件背景圖片
在MainAbilitySlice.java的onStart()方法中，使用findComponentById()方法將xml文件中RotateCaptchaView控件與RotateCaptchaView類對象綁定；再調(diào)用setImageId()方法設置組件的背景圖片。

//根據(jù)id綁定相應的控件rotateCaptchaView = (RotateCaptchaView) findComponentById(ResourceTable.Id_rotateCaptchaView);...//設置背景圖片rotateCaptchaView.setImageId(ResourceTable.Media_pic02);

(4)設置回調(diào)處理函數(shù)
設置SwipeCaptchaView組件的回調(diào)處理函數(shù)，來提示用戶旋轉(zhuǎn)驗證結(jié)果。以提示用戶“驗證成功”這個功能為例：需要重寫matchSuccess()方法，設置驗證成功后的提示信息。在上述方法中實例化一個ToastDialog提示框?qū)ο螅褂迷搶ο蟮膕etText()方法設置顯示文字為“驗證成功！”；setAlignment()方法設置提示框的布局位置在整體布局的中央；show()方法用于顯示提示框。
設置驗證失敗的情況和驗證成功同理，只需重寫matchFailed()方法，同時將文字信息設置為“驗證失??！”即可。

//每次旋轉(zhuǎn)結(jié)束后會根據(jù)相應的回調(diào)提示用戶驗證結(jié)果rotateCaptchaView.setOnCaptchaMatchCallback(new RotateCaptchaView.OnCaptchaMatchCallback() {    @Override    public void matchSuccess(RotateCaptchaView rotateCaptchaView) {        new ToastDialog(getContext())                .setText(" 驗證成功！")                .setAlignment(LayoutAlignment.CENTER)                .show();    }...}

(5)設置Button控件監(jiān)聽事件，重新生成驗證區(qū)域
綁定button對象和xml文件中“重新生成驗證碼”Button控件；為button設置監(jiān)聽事件，每次點擊按鈕后調(diào)用createCaptcha()方法，該方法用于重新生成驗證碼（即旋轉(zhuǎn)塊的角度隨機設置）。

button = (Button) findComponentById(ResourceTable.Id_btn_change);//綁定Buttonbutton.setClickedListener(new Component.ClickedListener() {//設置監(jiān)聽    @Override    public void onClick(Component component) {       rotateCaptchaView.createCaptcha();//隨機生成旋轉(zhuǎn)塊的旋轉(zhuǎn)角度        ...    }});

Library解析

Library解析部分將要重點圍繞RotateCaptchaView類，對其內(nèi)部邏輯按步驟展開講解，主要包括初始化準備工作、初始化旋轉(zhuǎn)驗證區(qū)域、繪制旋轉(zhuǎn)塊邊框的路徑并計算比例、以及繪制旋轉(zhuǎn)塊邊框和驗證區(qū)域。

(1)初始化準備工作

此部分是在RotateCaptchaView類構造函數(shù)中實現(xiàn)的，具體由初始化方法init()執(zhí)行，此部分主要實現(xiàn)了下述4個功能。
1）設置參數(shù)
獲取xml文件中添加的SwipeCaptcha_ohos3.0組件的參數(shù)即寬、高，并獲取系統(tǒng)屏幕寬度，用于后續(xù)為背景圖片設置尺寸；設置半徑mCaptchaRadius用于確定旋轉(zhuǎn)塊尺寸，設置旋轉(zhuǎn)驗證閾值mMatchDeviation用于判斷旋轉(zhuǎn)驗證是否成功。

private void init(Context context, AttrSet attrSet, String defStyleAttr) {    mHeight = getHeight();//獲取xml中旋轉(zhuǎn)驗證控件的高    mWidth = getWidth();//獲取xml中旋轉(zhuǎn)驗證控件的寬    if (mWidth == 0) { //match_parent        //獲取系統(tǒng)屏幕寬度        mWidth = DisplayManager.getInstance().getDefaultDisplay(context).get().getAttributes().width;    }    mCaptchaRadius = (mHeight - SLIDER_HEIGHT - AttrHelper.vp2px(20, context)) / 2;//旋轉(zhuǎn)塊的半徑    mMatchDeviation = AttrHelper.vp2px(3, context);//旋轉(zhuǎn)驗證成功與否的閾值...}

2）初始化背景圖片
此步驟主要是完成背景圖片的初始化操作，包括圖片尺寸、縮放模式、圖像源等屬性的設定，原理可參考圖2。
具體實現(xiàn)步驟為：

  • 實例化Image類得到背景圖片的對象；
  • 設置Image對象的寬為之前獲取的屏幕寬度mWidth，高為mHeight-SLIDER_HEIGHT，即組件高減去拖動條高的差值；
  • 設置圖片縮放模式為中心縮放；
  • 設置圖像源為圖2中的灰色圖片，表示“暫無背景圖片，”可提示用戶暫未設置真正的背景圖片。
    ::: hljs-center


::: hljs-center

:::

圖2 初始化并設置背景圖片效果

:::

mImage = new Image(context);LayoutConfig imageConfig = new LayoutConfig(mWidth, mHeight - SLIDER_HEIGHT);//寬為屏幕寬度，高為組件高減去拖動條高的差值mImage.setLayoutConfig(imageConfig);mImage.setScaleMode(Image.ScaleMode.CLIP_CENTER);//縮放模式為中心縮放mImage.setPixelMap(ResourceTable.Media_no_resource);//設置圖片

3）設置拖動條
先實例化Slider類得到拖動條對象，為其設置寬、高、上邊距等屬性；再設置拖動條的進度值，其中最小值設置為0，最大值設置為10000（此處將最大值設置較大的原因是為了得到更加絲滑流暢的拖動效果），并將初始進度值設置為0，將已拖動的進度條顏色設置為黑色用來強調(diào)拖動進度。

mSlider = new Slider(context);mSlider = new Slider(mLayout.getContext());mSlider.setWidth(mWidth);  //寬度mSlider.setHeight(SLIDER_HEIGHT);       //高度mSlider.setMarginTop(mHeight - SLIDER_HEIGHT);mSlider.setMinValue(0);      //進度最小值mSlider.setMaxValue(10000);  //進度最大值mSlider.setProgressValue(0); //當前進度值mSlider.setProgressColor(Color.BLACK);   //進度條已拖動的顏色setSlideListener(); //監(jiān)聽器

4）設置拖動條監(jiān)聽事件
拖動條的監(jiān)聽事件是通過調(diào)用setSliderListener()方法具體實現(xiàn)的，在該方法中，首先重寫onTouchEnd()方法，判斷旋轉(zhuǎn)結(jié)束后旋轉(zhuǎn)塊當前角度和旋轉(zhuǎn)至無縫拼接的角度的差值是否小于已經(jīng)規(guī)定好的驗證閾值mMatchDeviation。
若小于驗證閾值，則驗證成功：先取消旋轉(zhuǎn)塊邊緣的陰影，這是為了完整地呈現(xiàn)旋轉(zhuǎn)拼接后的背景圖片，再設置回調(diào)函數(shù)，實現(xiàn)彈出提示框提示用戶驗證成功的效果；
若大于驗證閾值，則驗證失?。褐苯釉O置回調(diào)函數(shù)，提示用戶驗證失敗的效果，同時旋轉(zhuǎn)塊恢復驗證前的角度。

private void setSlideListener() {    mSlider.setValueChangedListener(new Slider.ValueChangedListener() {        @Override        public void onTouchEnd(Slider slider) {            if (onCaptchaMatchCallback != null) {                if (Math.abs(mSlider.getProgress() * 360 / 10000 - randomDegree) < mMatchDeviation) {//判斷旋轉(zhuǎn)驗證誤差是否小于閾值                    mPaint.setMaskFilter(null); //取消旋轉(zhuǎn)塊的陰影                    ...                    onCaptchaMatchCallback.matchSuccess(RotateCaptchaView.this);                } else {                    slider.setProgressValue(0);                    onCaptchaMatchCallback.matchFailed(RotateCaptchaView.this);                }}}    });}

(2)初始化旋轉(zhuǎn)驗證區(qū)域

在通過Image類對象調(diào)用setPixelMap()方法設置好驗證背景圖片后，由initCaptcha()方法完成旋轉(zhuǎn)驗證區(qū)域的初始化，主要實現(xiàn)的是對畫筆的初始化。
先實例化一個隨機數(shù)對象mRandom，用于后續(xù)計算隨機生成的旋轉(zhuǎn)驗證塊角度值。再實例化Paint類得到畫筆對象mPaint用于具體繪制旋轉(zhuǎn)塊，為其設置畫筆抗鋸齒、位掩碼標志、填充樣式和陰影等屬性，其中設置抗鋸齒屬性是為了實現(xiàn)邊緣弧線流暢無明顯鋸齒狀過度痕跡的效果，設置位掩碼標志用于防止抖動，實現(xiàn)柔和的顏色過度效果防止出現(xiàn)階梯狀痕跡的現(xiàn)象。
再實例化一個Path類對象用于繪制旋轉(zhuǎn)塊邊緣的圓形路徑。 接著就可以調(diào)用createCaptcha()方法開始繪制了。

private void initCaptcha() {    mRandom = new Random(System.nanoTime());    //設置畫筆    mPaint = new Paint();    mPaint.setAntiAlias(true);   //抗鋸齒效果    mPaint.setDither(true);      //防止抖動    mPaint.setStyle(Paint.Style.FILL_STYLE);//填充樣式    mPaint.setMaskFilter(new MaskFilter(10, MaskFilter.Blur.SOLID));    //陰影    mPath = new Path();//用于繪制旋轉(zhuǎn)快邊緣圓形路徑    createCaptcha();}

(3)設置旋轉(zhuǎn)塊邊框的路徑并計算比例

這部分和接下來的步驟（4）都是由initCaptcha()方法實現(xiàn)的。在此部分中，
首先：

  • 判斷是否設置好了背景圖片，如果設置好了則使用Random類對象調(diào)用帶參的nextInt()方法隨機生成一個范圍0至240的整數(shù)，以此隨機整數(shù)與60相加的和作為重新生成驗證碼后旋轉(zhuǎn)塊的隨機角度；
  • 設置拖動條初始進度為0，同時激活按鈕，將其狀態(tài)設置為可點擊并觸發(fā)點擊事件；
  • 為繪制的畫筆添加陰影效果，傳入的參數(shù)分別表示度數(shù)和樣式，實現(xiàn)在旋轉(zhuǎn)塊圓形邊緣處有一圈陰影的效果；
  • 設置好上述屬性后，需要調(diào)用invalidate()方法對圖片和布局視圖進行刷新。
    其次：
  • 設置繪制路徑即旋轉(zhuǎn)塊邊框的圓形軌跡，為嚴謹起見先使用reset()方法清空之前已經(jīng)繪制的Path路徑至原始狀態(tài)。
  • 調(diào)用addCircle()方法設置圓的繪制路徑，該方法前兩個參數(shù)表示旋轉(zhuǎn)塊的圓點坐標X、Y值，第三個參數(shù)表示圓的半徑，第四個參數(shù)表示繪制方向。
    此處我們設置的繪制軌跡是一個以圖片中點(mWidth/2f,(mHeight-SLIDER_HEIGHT)/2f)為圓心、mCaptchaRadius為半徑、順時針方向繪制的圓形，計算原理和坐標軸方向可參考圖3，其中圓心即圖片中點坐標的計算方法是橫坐標X為圖片寬度的一半，縱坐標Y為圖片高度的一半即旋轉(zhuǎn)驗證組件的高減去拖動條高的差值的一半。
    ::: hljs-center

:::

::: hljs-center

圖3 旋轉(zhuǎn)塊邊框圓形路徑設置原理

:::

public void createCaptcha() {    if (mImage.getPixelMap() != null) {//已設置背景圖片        randomDegree = mRandom.nextInt(240) + 60;//生成隨機角度        mSlider.setProgressValue(0);//初始進度為0        mSlider.setEnabled(true);//狀態(tài)為可點擊并觸發(fā)監(jiān)聽        mPaint.setMaskFilter(new MaskFilter(10, MaskFilter.Blur.SOLID));//添加陰影        mImage.invalidate();//刷新視圖        mLayout.invalidate();    }    //繪制遮罩路徑    mPath.reset();    mPath.addCircle(mWidth / 2f, (mHeight - SLIDER_HEIGHT) / 2f, mCaptchaRadius, Path.Direction.CLOCK_WISE);    mPath.close();...}

最后，根據(jù)圖片的原寬度和控件寬度算出縮放比例，這部分原理與SwipeCaptcha_ohos2.0組件同理，簡單回顧一下，此處計算得到的較大的ratio代表圖片真實的縮放比例，這是由于上文介紹的Image控件將圖片縮放模式設為了CLIP_CENTER中心縮放模式，該模式會將圖片的短邊縮放至合適的大小并對長邊進行裁剪，因此較小的縮放比例代表被裁剪的邊，較大的則代表在填充進旋轉(zhuǎn)驗證組件時的真實縮放比例。

public void createCaptcha() {...//根據(jù)圖片的原寬度 和 控件寬度 算出縮放比例    PixelMap pixelMap = mImage.getPixelMap();    int originWidth = pixelMap.getImageInfo().size.width;    int originHeight = pixelMap.getImageInfo().size.height;    float ratioWidth = (float) mWidth / originWidth;    float ratioHeight = (float) (mHeight - SLIDER_HEIGHT) / originHeight;    float ratio = Math.max(ratioWidth, ratioHeight);//更大的ratio...}

(4)繪制旋轉(zhuǎn)塊邊框和驗證區(qū)域
本步驟首先在Canvas畫布上，根據(jù)上一步設置好的繪制軌跡mPath和畫筆mPaint繪制旋轉(zhuǎn)塊的圓形邊框，這部分不會隨著旋轉(zhuǎn)而更新。
接著根據(jù)拖動條變化的數(shù)值調(diào)整旋轉(zhuǎn)塊的旋轉(zhuǎn)角度。具體旋轉(zhuǎn)的角度值是mSlider.getProgress() * 360 / 10000 - randomDegree，即算出拖動條當前進度值占最大值的比例，然后乘以360得到按比例變換后的角度值，再減去前面步驟已生成的隨機角度，就可以以(mWidth/2f,mHeight-SLIDER_HEIGHT)即背景圖片中點為旋轉(zhuǎn)中心進行旋轉(zhuǎn)；并獲取圖片的 PixelMapHolder，根據(jù)路徑裁剪canvas畫布，將其縮放至跟圖片縮放程度一致。
最后判斷若圖片寬的縮放比例和圖片真實縮放比例一樣時，說明寬沒變是在垂直方向上進行了裁剪，則根據(jù)比例計算出被裁剪掉的圖片高度，并在畫布上繪制內(nèi)容；若二者比例不相等，說明寬有變化是在水平方向上進行了裁剪，則根據(jù)比例計算出被裁剪掉的圖片寬度，并在畫布上繪制內(nèi)容。

public void createCaptcha() {...    mImage.addDrawTask((component, canvas) -> {//繪制邊框            canvas.drawPath(mPath, mPaint);    });    mLayout.addDrawTask((component, canvas) -> {//繪制驗證碼            canvas.rotate(mSlider.getProgress() * 360 / 10000 - randomDegree, mWidth / 2f, (mHeight - SLIDER_HEIGHT) / 2f);  //根據(jù)拖動條的數(shù)值調(diào)整旋轉(zhuǎn)角度            canvas.translate(0, 0);            PixelMapHolder pixelMapHolder = new PixelMapHolder(pixelMap);//獲取圖片的 PixelMapHolder            canvas.clipPath(mPath, Canvas.ClipOp.INTERSECT);//根據(jù)路徑裁剪canvas            canvas.scale(ratio, ratio);//畫布縮放至跟圖片縮放程度一致            if (ratio == ratioWidth) {                float heightErr = (originHeight * ratio - (mHeight - SLIDER_HEIGHT)) / 2;//根據(jù)比例計算出垂直方向上由于 CLIP_CENTER 裁剪掉的圖片的高度                canvas.drawPixelMapHolder(pixelMapHolder, 0, -heightErr / ratio, mPaint);//繪制內(nèi)容            } else {                float widthErr = (originWidth * ratio - mWidth) / 2;//根據(jù)比例計算出水平方向上由于 CLIP_CENTER 裁剪掉的圖片的寬度                canvas.drawPixelMapHolder(pixelMapHolder, -widthErr / ratio, 0, mPaint);//繪制內(nèi)容            }    });}

項目貢獻人

王時予 李珂 朱偉 鄭森文 陳美汝 張馨心 劉雨琦

想了解更多關于鴻蒙的內(nèi)容，請訪問：

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com/#bkwz

::: hljs-center

:::