鴻蒙開源第三方組件—SwipeCaptcha_ohos3.0旋轉(zhuǎn)驗證組件
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
前言
基于安卓平臺的滑動拼## 二級標(biāo)題圖驗證組件SwipeCaptcha(https://github.com/mcxtzhang/SwipeCaptcha )，實現(xiàn)了鴻蒙化遷移和重構(gòu)，代碼已經(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)為了確保在注冊或登錄頁面時不是機(jī)器人在操作，通常需要用戶進(jìn)行手動驗證，本期的SwipeCaptcha_ohos3.0是對前兩版本驗證方式進(jìn)行功能升級，得到的一種新的驗證方式——旋轉(zhuǎn)驗證。
此驗證方式將圖片作為背景，通過把旋轉(zhuǎn)塊旋轉(zhuǎn)至能夠與背景圖片無縫拼接來完成驗證，操作簡單，安全性強(qiáng)，可被應(yīng)用于各種網(wǎng)站的登錄、注冊、找回密碼或投票等場景中。
組件效果展示
成功運行組件后，可以通過將旋轉(zhuǎn)塊旋轉(zhuǎn)至能夠與背景圖片拼接成一張完整圖片，從而完成驗證。對應(yīng)圖1所示的運行效果圖，本組件主要提供的功能是：
- 拖動圖片下方的滑動條，可以改變旋轉(zhuǎn)塊角度;
- 若旋轉(zhuǎn)塊旋轉(zhuǎn)后與原背景圖片的誤差值小于既定的閾值，則驗證成功，反之則失敗;
- 在驗證完成后，可以點擊滑動條下方的條狀按鈕重新生成驗證碼(即旋轉(zhuǎn)塊的角度隨機(jī)設(shè)置)。
圖1 旋轉(zhuǎn)驗證運行效果
Sample解析
通過上文相信大家已經(jīng)了解SwipeCaptcha_ohos3.0組件的使用效果，下面將具體講解其使用方法。其使用方法和SwipeCaptcha_ohos2.0組件類似，在此我們簡單回顧一下，共分為5個步驟：
步驟1. 在xml文件中添加RotateCaptchaView控件。
步驟2. 導(dǎo)入RotateCaptchaView類并聲明類對象。
步驟3. 綁定RotateCaptchaView控件并設(shè)置組件背景圖片。
步驟4. 設(shè)置回調(diào)處理函數(shù)。
步驟5. 設(shè)置Button控件監(jiān)聽事件，重新生成驗證區(qū)域
(1)在xml文件中添加RotateCaptchaView控件
在xml文件中添加RotateCaptchaView控件，用于顯示旋轉(zhuǎn)驗證的動態(tài)效果。先設(shè)置該控件的高和寬,此處將寬度定為跟隨父控件的大小(match_parent)，高度設(shè)置為220vp;再設(shè)置組件左右邊距分別為12vp，旋轉(zhuǎn)塊的半徑為80vp。
- <com.huawei.swipecaptchaview.lib.RotateCaptchaView
- ohos:id="$+id:rotateCaptchaView"//控件id
- ohos:height="220vp"//控件的高
- ohos:width="match_parent"//控件的寬
- ohos:left_margin="12vp"//左邊距
- ohos:right_margin="12vp"//右邊距
- app:captchaRadius="80vp"/>//旋轉(zhuǎn)塊半徑
(2)導(dǎo)入SwipeCaptchaView類并聲明類對象
在MainAbilitySlice.java文件中，通過import關(guān)鍵字導(dǎo)入RotateCaptchaView類，該類用于在后續(xù)為驗證結(jié)果設(shè)置回調(diào)并重新生成旋轉(zhuǎn)塊角度。
- //導(dǎo)入SwipeCaptchaView類
- import com.huawei.swipecaptchaview.lib.RotateCaptchaView;public class MainAbilitySlice extends AbilitySlice {
- //聲明SwipeCaptchaView類對象
- SwipeCaptchaView swipeCaptchaView;
- ......
- }
(3)綁定SwipeCaptchaView控件并設(shè)置組件背景圖片
在MainAbilitySlice.java的onStart()方法中，使用findComponentById()方法將xml文件中RotateCaptchaView控件與RotateCaptchaView類對象綁定;再調(diào)用setImageId()方法設(shè)置組件的背景圖片。
- //根據(jù)id綁定相應(yīng)的控件
- rotateCaptchaView = (RotateCaptchaView) findComponentById(ResourceTable.Id_rotateCaptchaView);
- ...
- //設(shè)置背景圖片
- rotateCaptchaView.setImageId(ResourceTable.Media_pic02);
(4)設(shè)置回調(diào)處理函數(shù)
設(shè)置SwipeCaptchaView組件的回調(diào)處理函數(shù)，來提示用戶旋轉(zhuǎn)驗證結(jié)果。以提示用戶“驗證成功”這個功能為例：需要重寫matchSuccess()方法，設(shè)置驗證成功后的提示信息。在上述方法中實例化一個ToastDialog提示框?qū)ο?，使用該對象的setText()方法設(shè)置顯示文字為“驗證成功!”;setAlignment()方法設(shè)置提示框的布局位置在整體布局的中央;show()方法用于顯示提示框。
設(shè)置驗證失敗的情況和驗證成功同理，只需重寫matchFailed()方法，同時將文字信息設(shè)置為“驗證失敗!”即可。
- //每次旋轉(zhuǎn)結(jié)束后會根據(jù)相應(yīng)的回調(diào)提示用戶驗證結(jié)果
- rotateCaptchaView.setOnCaptchaMatchCallback(new RotateCaptchaView.OnCaptchaMatchCallback() {
- @Override
- public void matchSuccess(RotateCaptchaView rotateCaptchaView) {
- new ToastDialog(getContext())
- .setText(" 驗證成功！")
- .setAlignment(LayoutAlignment.CENTER)
- .show();
- }
- ...
- }
(5)設(shè)置Button控件監(jiān)聽事件，重新生成驗證區(qū)域
綁定button對象和xml文件中“重新生成驗證碼”Button控件;為button設(shè)置監(jiān)聽事件，每次點擊按鈕后調(diào)用createCaptcha()方法，該方法用于重新生成驗證碼(即旋轉(zhuǎn)塊的角度隨機(jī)設(shè)置)。
- button = (Button) findComponentById(ResourceTable.Id_btn_change);//綁定Button
- button.setClickedListener(new Component.ClickedListener() {//設(shè)置監(jiān)聽
- @Override
- public void onClick(Component component) {
- rotateCaptchaView.createCaptcha();//隨機(jī)生成旋轉(zhuǎn)塊的旋轉(zhuǎn)角度
- ...
- }
- });
Library解析
Library解析部分將要重點圍繞RotateCaptchaView類，對其內(nèi)部邏輯按步驟展開講解，主要包括初始化準(zhǔn)備工作、初始化旋轉(zhuǎn)驗證區(qū)域、繪制旋轉(zhuǎn)塊邊框的路徑并計算比例、以及繪制旋轉(zhuǎn)塊邊框和驗證區(qū)域。
(1)初始化準(zhǔn)備工作
此部分是在RotateCaptchaView類構(gòu)造函數(shù)中實現(xiàn)的，具體由初始化方法init()執(zhí)行，此部分主要實現(xiàn)了下述4個功能。
1)設(shè)置參數(shù)
獲取xml文件中添加的SwipeCaptcha_ohos3.0組件的參數(shù)即寬、高，并獲取系統(tǒng)屏幕寬度，用于后續(xù)為背景圖片設(shè)置尺寸;設(shè)置半徑mCaptchaRadius用于確定旋轉(zhuǎn)塊尺寸，設(shè)置旋轉(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)初始化背景圖片
此步驟主要是完成背景圖片的初始化操作，包括圖片尺寸、縮放模式、圖像源等屬性的設(shè)定，原理可參考圖2。
具體實現(xiàn)步驟為：
- 實例化Image類得到背景圖片的對象;
- 設(shè)置Image對象的寬為之前獲取的屏幕寬度mWidth，高為mHeight-SLIDER_HEIGHT，即組件高減去拖動條高的差值;
- 設(shè)置圖片縮放模式為中心縮放;
- 設(shè)置圖像源為圖2中的灰色圖片，表示“暫無背景圖片，”可提示用戶暫未設(shè)置真正的背景圖片。
圖2 初始化并設(shè)置背景圖片效果
- 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);//設(shè)置圖片
3)設(shè)置拖動條
先實例化Slider類得到拖動條對象，為其設(shè)置寬、高、上邊距等屬性;再設(shè)置拖動條的進(jìn)度值，其中最小值設(shè)置為0，最大值設(shè)置為10000(此處將最大值設(shè)置較大的原因是為了得到更加絲滑流暢的拖動效果)，并將初始進(jìn)度值設(shè)置為0，將已拖動的進(jìn)度條顏色設(shè)置為黑色用來強(qiáng)調(diào)拖動進(jìn)度。
- mSlider = new Slider(context);
- mSlider = new Slider(mLayout.getContext());
- mSlider.setWidth(mWidth); //寬度
- mSlider.setHeight(SLIDER_HEIGHT); //高度
- mSlider.setMarginTop(mHeight - SLIDER_HEIGHT);
- mSlider.setMinValue(0); //進(jìn)度最小值
- mSlider.setMaxValue(10000); //進(jìn)度最大值
- mSlider.setProgressValue(0); //當(dāng)前進(jìn)度值
- mSlider.setProgressColor(Color.BLACK); //進(jìn)度條已拖動的顏色
- setSlideListener(); //監(jiān)聽器
4)設(shè)置拖動條監(jiān)聽事件
拖動條的監(jiān)聽事件是通過調(diào)用setSliderListener()方法具體實現(xiàn)的，在該方法中，首先重寫onTouchEnd()方法，判斷旋轉(zhuǎn)結(jié)束后旋轉(zhuǎn)塊當(dāng)前角度和旋轉(zhuǎn)至無縫拼接的角度的差值是否小于已經(jīng)規(guī)定好的驗證閾值mMatchDeviation。
若小于驗證閾值，則驗證成功：先取消旋轉(zhuǎn)塊邊緣的陰影，這是為了完整地呈現(xiàn)旋轉(zhuǎn)拼接后的背景圖片，再設(shè)置回調(diào)函數(shù)，實現(xiàn)彈出提示框提示用戶驗證成功的效果;
若大于驗證閾值，則驗證失?。褐苯釉O(shè)置回調(diào)函數(shù)，提示用戶驗證失敗的效果，同時旋轉(zhuǎn)塊恢復(fù)驗證前的角度。
- 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()方法設(shè)置好驗證背景圖片后，由initCaptcha()方法完成旋轉(zhuǎn)驗證區(qū)域的初始化，主要實現(xiàn)的是對畫筆的初始化。
先實例化一個隨機(jī)數(shù)對象mRandom，用于后續(xù)計算隨機(jī)生成的旋轉(zhuǎn)驗證塊角度值。再實例化Paint類得到畫筆對象mPaint用于具體繪制旋轉(zhuǎn)塊，為其設(shè)置畫筆抗鋸齒、位掩碼標(biāo)志、填充樣式和陰影等屬性，其中設(shè)置抗鋸齒屬性是為了實現(xiàn)邊緣弧線流暢無明顯鋸齒狀過度痕跡的效果，設(shè)置位掩碼標(biāo)志用于防止抖動，實現(xiàn)柔和的顏色過度效果防止出現(xiàn)階梯狀痕跡的現(xiàn)象。
再實例化一個Path類對象用于繪制旋轉(zhuǎn)塊邊緣的圓形路徑。 接著就可以調(diào)用createCaptcha()方法開始繪制了。
- private void initCaptcha() {
- mRandom = new Random(System.nanoTime());
- //設(shè)置畫筆
- 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)設(shè)置旋轉(zhuǎn)塊邊框的路徑并計算比例
這部分和接下來的步驟(4)都是由initCaptcha()方法實現(xiàn)的。在此部分中，
首先：
- 判斷是否設(shè)置好了背景圖片，如果設(shè)置好了則使用Random類對象調(diào)用帶參的nextInt()方法隨機(jī)生成一個范圍0至240的整數(shù)，以此隨機(jī)整數(shù)與60相加的和作為重新生成驗證碼后旋轉(zhuǎn)塊的隨機(jī)角度;
- 設(shè)置拖動條初始進(jìn)度為0，同時激活按鈕，將其狀態(tài)設(shè)置為可點擊并觸發(fā)點擊事件;
- 為繪制的畫筆添加陰影效果，傳入的參數(shù)分別表示度數(shù)和樣式，實現(xiàn)在旋轉(zhuǎn)塊圓形邊緣處有一圈陰影的效果;
- 設(shè)置好上述屬性后，需要調(diào)用invalidate()方法對圖片和布局視圖進(jìn)行刷新。
- 其次：
- 設(shè)置繪制路徑即旋轉(zhuǎn)塊邊框的圓形軌跡，為嚴(yán)謹(jǐn)起見先使用reset()方法清空之前已經(jīng)繪制的Path路徑至原始狀態(tài)。
- 調(diào)用addCircle()方法設(shè)置圓的繪制路徑，該方法前兩個參數(shù)表示旋轉(zhuǎn)塊的圓點坐標(biāo)X、Y值，第三個參數(shù)表示圓的半徑，第四個參數(shù)表示繪制方向。
- 此處我們設(shè)置的繪制軌跡是一個以圖片中點(mWidth/2f,(mHeight-SLIDER_HEIGHT)/2f)為圓心、mCaptchaRadius為半徑、順時針方向繪制的圓形，計算原理和坐標(biāo)軸方向可參考圖3，其中圓心即圖片中點坐標(biāo)的計算方法是橫坐標(biāo)X為圖片寬度的一半，縱坐標(biāo)Y為圖片高度的一半即旋轉(zhuǎn)驗證組件的高減去拖動條高的差值的一半。
圖3 旋轉(zhuǎn)塊邊框圓形路徑設(shè)置原理
- public void createCaptcha() {
- if (mImage.getPixelMap() != null) {//已設(shè)置背景圖片
- randomDegree = mRandom.nextInt(240) + 60;//生成隨機(jī)角度
- mSlider.setProgressValue(0);//初始進(jìn)度為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控件將圖片縮放模式設(shè)為了CLIP_CENTER中心縮放模式，該模式會將圖片的短邊縮放至合適的大小并對長邊進(jìn)行裁剪，因此較小的縮放比例代表被裁剪的邊，較大的則代表在填充進(jìn)旋轉(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ù)上一步設(shè)置好的繪制軌跡mPath和畫筆mPaint繪制旋轉(zhuǎn)塊的圓形邊框，這部分不會隨著旋轉(zhuǎn)而更新。
接著根據(jù)拖動條變化的數(shù)值調(diào)整旋轉(zhuǎn)塊的旋轉(zhuǎn)角度。具體旋轉(zhuǎn)的角度值是mSlider.getProgress() * 360 / 10000 - randomDegree，即算出拖動條當(dāng)前進(jìn)度值占最大值的比例，然后乘以360得到按比例變換后的角度值，再減去前面步驟已生成的隨機(jī)角度，就可以以(mWidth/2f,mHeight-SLIDER_HEIGHT)即背景圖片中點為旋轉(zhuǎn)中心進(jìn)行旋轉(zhuǎn);并獲取圖片的 PixelMapHolder，根據(jù)路徑裁剪canvas畫布，將其縮放至跟圖片縮放程度一致。
最后判斷若圖片寬的縮放比例和圖片真實縮放比例一樣時，說明寬沒變是在垂直方向上進(jìn)行了裁剪，則根據(jù)比例計算出被裁剪掉的圖片高度，并在畫布上繪制內(nèi)容;若二者比例不相等，說明寬有變化是在水平方向上進(jìn)行了裁剪，則根據(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)容
- }
- });
- }
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
