鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件原创精华

朱伟ISRC

发布于 2021-11-16 16:15

浏览

8收藏

前言

基于安卓平台的滑动拼## 二级标题图验证组件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCaptcha ），实现了鸿蒙化迁移和重构，代码已经开源到（https://gitee.com/isrc_ohos/swipe-captcha_ohos ），目前已经获得了很多人的Star和Fork ，欢迎各位下载使用并提出宝贵意见！

背景

前一期SwipeCaptcha_ohos2.0文章（https://harmonyos.51cto.com/posts/8787 ）中介绍过，系统为了确保在注册或登录页面时不是机器人在操作（若要实现防机器人操作效果，需要增加加密算法，本期介绍的组件中不包含此部分），通常需要用户进行手动验证，本期的SwipeCaptcha_ohos3.0是对前两版本验证方式进行功能升级，得到的一种新的验证方式——旋转验证。
此验证方式将图片作为背景，通过把旋转块旋转至能够与背景图片无缝拼接来完成验证，操作简单，安全性强，可被应用于各种网站的登录、注册、找回密码或投票等场景中。

组件效果展示

成功运行组件后，可以通过将旋转块旋转至能够与背景图片拼接成一张完整图片，从而完成验证。对应图1所示的运行效果图，本组件主要提供的功能是：

拖动图片下方的滑动条，可以改变旋转块角度；
若旋转块旋转后与原背景图片的误差值小于既定的阈值，则验证成功，反之则失败；
在验证完成后，可以点击滑动条下方的条状按钮重新生成验证码（即旋转块的角度随机设置）。
::: hljs-center

鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件-鸿蒙开发者社区

:::

::: hljs-center

图1 旋转验证运行效果

:::

Sample解析

通过上文相信大家已经了解SwipeCaptcha_ohos3.0组件的使用效果，下面将具体讲解其使用方法。其使用方法和SwipeCaptcha_ohos2.0组件类似，在此我们简单回顾一下，共分为5个步骤：
步骤1. 在xml文件中添加RotateCaptchaView控件。
步骤2. 导入RotateCaptchaView类并声明类对象。
步骤3. 绑定RotateCaptchaView控件并设置组件背景图片。
步骤4. 设置回调处理函数。
步骤5. 设置Button控件监听事件，重新生成验证区域
(1)在xml文件中添加RotateCaptchaView控件
在xml文件中添加RotateCaptchaView控件，用于显示旋转验证的动态效果。先设置该控件的高和宽,此处将宽度定为跟随父控件的大小（match_parent），高度设置为220vp；再设置组件左右边距分别为12vp，旋转块的半径为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"/>//旋转块半径

(2)导入SwipeCaptchaView类并声明类对象
在MainAbilitySlice.java文件中，通过import关键字导入RotateCaptchaView类，该类用于在后续为验证结果设置回调并重新生成旋转块角度。

//导入SwipeCaptchaView类
import com.huawei.swipecaptchaview.lib.RotateCaptchaView;public class MainAbilitySlice extends AbilitySlice {
//声明SwipeCaptchaView类对象
SwipeCaptchaView swipeCaptchaView;  
......
}

(3)绑定SwipeCaptchaView控件并设置组件背景图片
在MainAbilitySlice.java的onStart()方法中，使用findComponentById()方法将xml文件中RotateCaptchaView控件与RotateCaptchaView类对象绑定；再调用setImageId()方法设置组件的背景图片。

//根据id绑定相应的控件
rotateCaptchaView = (RotateCaptchaView) findComponentById(ResourceTable.Id_rotateCaptchaView);
...
//设置背景图片
rotateCaptchaView.setImageId(ResourceTable.Media_pic02);

(4)设置回调处理函数
设置SwipeCaptchaView组件的回调处理函数，来提示用户旋转验证结果。以提示用户“验证成功”这个功能为例：需要重写matchSuccess()方法，设置验证成功后的提示信息。在上述方法中实例化一个ToastDialog提示框对象，使用该对象的setText()方法设置显示文字为“验证成功！”；setAlignment()方法设置提示框的布局位置在整体布局的中央；show()方法用于显示提示框。
设置验证失败的情况和验证成功同理，只需重写matchFailed()方法，同时将文字信息设置为“验证失败！”即可。

//每次旋转结束后会根据相应的回调提示用户验证结果
rotateCaptchaView.setOnCaptchaMatchCallback(new RotateCaptchaView.OnCaptchaMatchCallback() {
    @Override
    public void matchSuccess(RotateCaptchaView rotateCaptchaView) {
        new ToastDialog(getContext())
                .setText(" 验证成功！")
                .setAlignment(LayoutAlignment.CENTER)
                .show();
    }
...
}

(5)设置Button控件监听事件，重新生成验证区域
绑定button对象和xml文件中“重新生成验证码”Button控件；为button设置监听事件，每次点击按钮后调用createCaptcha()方法，该方法用于重新生成验证码（即旋转块的角度随机设置）。

button = (Button) findComponentById(ResourceTable.Id_btn_change);//绑定Button
button.setClickedListener(new Component.ClickedListener() {//设置监听
    @Override
    public void onClick(Component component) {
       rotateCaptchaView.createCaptcha();//随机生成旋转块的旋转角度
        ...
    }
});

Library解析

Library解析部分将要重点围绕RotateCaptchaView类，对其内部逻辑按步骤展开讲解，主要包括初始化准备工作、初始化旋转验证区域、绘制旋转块边框的路径并计算比例、以及绘制旋转块边框和验证区域。

(1)初始化准备工作

此部分是在RotateCaptchaView类构造函数中实现的，具体由初始化方法init()执行，此部分主要实现了下述4个功能。
1）设置参数
获取xml文件中添加的SwipeCaptcha_ohos3.0组件的参数即宽、高，并获取系统屏幕宽度，用于后续为背景图片设置尺寸；设置半径mCaptchaRadius用于确定旋转块尺寸，设置旋转验证阈值mMatchDeviation用于判断旋转验证是否成功。

private void init(Context context, AttrSet attrSet, String defStyleAttr) {
    mHeight = getHeight();//获取xml中旋转验证控件的高
    mWidth = getWidth();//获取xml中旋转验证控件的宽
    if (mWidth == 0) { //match_parent
        //获取系统屏幕宽度
        mWidth = DisplayManager.getInstance().getDefaultDisplay(context).get().getAttributes().width;
    }
    mCaptchaRadius = (mHeight - SLIDER_HEIGHT - AttrHelper.vp2px(20, context)) / 2;//旋转块的半径
    mMatchDeviation = AttrHelper.vp2px(3, context);//旋转验证成功与否的阈值
...
}

2）初始化背景图片
此步骤主要是完成背景图片的初始化操作，包括图片尺寸、缩放模式、图像源等属性的设定，原理可参考图2。
具体实现步骤为：

实例化Image类得到背景图片的对象；
设置Image对象的宽为之前获取的屏幕宽度mWidth，高为mHeight-SLIDER_HEIGHT，即组件高减去拖动条高的差值；
设置图片缩放模式为中心缩放；
设置图像源为图2中的灰色图片，表示“暂无背景图片，”可提示用户暂未设置真正的背景图片。
::: hljs-center

鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件-鸿蒙开发者社区
::: 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，将已拖动的进度条颜色设置为黑色用来强调拖动进度。

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(); //监听器

4）设置拖动条监听事件
拖动条的监听事件是通过调用setSliderListener()方法具体实现的，在该方法中，首先重写onTouchEnd()方法，判断旋转结束后旋转块当前角度和旋转至无缝拼接的角度的差值是否小于已经规定好的验证阈值mMatchDeviation。
若小于验证阈值，则验证成功：先取消旋转块边缘的阴影，这是为了完整地呈现旋转拼接后的背景图片，再设置回调函数，实现弹出提示框提示用户验证成功的效果；
若大于验证阈值，则验证失败：直接设置回调函数，提示用户验证失败的效果，同时旋转块恢复验证前的角度。

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) {//判断旋转验证误差是否小于阈值
                    mPaint.setMaskFilter(null); //取消旋转块的阴影
                    ...
                    onCaptchaMatchCallback.matchSuccess(RotateCaptchaView.this);
                } else {
                    slider.setProgressValue(0);
                    onCaptchaMatchCallback.matchFailed(RotateCaptchaView.this);
                }}}
    });
}

(2)初始化旋转验证区域

在通过Image类对象调用setPixelMap()方法设置好验证背景图片后，由initCaptcha()方法完成旋转验证区域的初始化，主要实现的是对画笔的初始化。
先实例化一个随机数对象mRandom，用于后续计算随机生成的旋转验证块角度值。再实例化Paint类得到画笔对象mPaint用于具体绘制旋转块，为其设置画笔抗锯齿、位掩码标志、填充样式和阴影等属性，其中设置抗锯齿属性是为了实现边缘弧线流畅无明显锯齿状过度痕迹的效果，设置位掩码标志用于防止抖动，实现柔和的颜色过度效果防止出现阶梯状痕迹的现象。
再实例化一个Path类对象用于绘制旋转块边缘的圆形路径。接着就可以调用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();//用于绘制旋转快边缘圆形路径
    createCaptcha();
}

(3)设置旋转块边框的路径并计算比例

这部分和接下来的步骤（4）都是由initCaptcha()方法实现的。在此部分中，
首先：

判断是否设置好了背景图片，如果设置好了则使用Random类对象调用带参的nextInt()方法随机生成一个范围0至240的整数，以此随机整数与60相加的和作为重新生成验证码后旋转块的随机角度；
设置拖动条初始进度为0，同时激活按钮，将其状态设置为可点击并触发点击事件；
为绘制的画笔添加阴影效果，传入的参数分别表示度数和样式，实现在旋转块圆形边缘处有一圈阴影的效果；
设置好上述属性后，需要调用invalidate()方法对图片和布局视图进行刷新。
其次：
设置绘制路径即旋转块边框的圆形轨迹，为严谨起见先使用reset()方法清空之前已经绘制的Path路径至原始状态。
调用addCircle()方法设置圆的绘制路径，该方法前两个参数表示旋转块的圆点坐标X、Y值，第三个参数表示圆的半径，第四个参数表示绘制方向。
此处我们设置的绘制轨迹是一个以图片中点(mWidth/2f,(mHeight-SLIDER_HEIGHT)/2f)为圆心、mCaptchaRadius为半径、顺时针方向绘制的圆形，计算原理和坐标轴方向可参考图3，其中圆心即图片中点坐标的计算方法是横坐标X为图片宽度的一半，纵坐标Y为图片高度的一半即旋转验证组件的高减去拖动条高的差值的一半。
::: hljs-center

鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件-鸿蒙开发者社区

:::

::: hljs-center

图3 旋转块边框圆形路径设置原理

:::

public void createCaptcha() {
    if (mImage.getPixelMap() != null) {//已设置背景图片
        randomDegree = mRandom.nextInt(240) + 60;//生成随机角度
        mSlider.setProgressValue(0);//初始进度为0
        mSlider.setEnabled(true);//状态为可点击并触发监听
        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();
...
}

最后，根据图片的原宽度和控件宽度算出缩放比例，这部分原理与SwipeCaptcha_ohos2.0组件同理，简单回顾一下，此处计算得到的较大的ratio代表图片真实的缩放比例，这是由于上文介绍的Image控件将图片缩放模式设为了CLIP_CENTER中心缩放模式，该模式会将图片的短边缩放至合适的大小并对长边进行裁剪，因此较小的缩放比例代表被裁剪的边，较大的则代表在填充进旋转验证组件时的真实缩放比例。

public void createCaptcha() {
...
//根据图片的原宽度 和 控件宽度 算出缩放比例
    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)绘制旋转块边框和验证区域
本步骤首先在Canvas画布上，根据上一步设置好的绘制轨迹mPath和画笔mPaint绘制旋转块的圆形边框，这部分不会随着旋转而更新。
接着根据拖动条变化的数值调整旋转块的旋转角度。具体旋转的角度值是mSlider.getProgress() * 360 / 10000 - randomDegree，即算出拖动条当前进度值占最大值的比例，然后乘以360得到按比例变换后的角度值，再减去前面步骤已生成的随机角度，就可以以(mWidth/2f,mHeight-SLIDER_HEIGHT)即背景图片中点为旋转中心进行旋转；并获取图片的 PixelMapHolder，根据路径裁剪canvas画布，将其缩放至跟图片缩放程度一致。
最后判断若图片宽的缩放比例和图片真实缩放比例一样时，说明宽没变是在垂直方向上进行了裁剪，则根据比例计算出被裁剪掉的图片高度，并在画布上绘制内容；若二者比例不相等，说明宽有变化是在水平方向上进行了裁剪，则根据比例计算出被裁剪掉的图片宽度，并在画布上绘制内容。

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);  //根据拖动条的数值调整旋转角度
    		canvas.translate(0, 0);
    		
    		PixelMapHolder pixelMapHolder = new PixelMapHolder(pixelMap);//获取图片的 PixelMapHolder
    		canvas.clipPath(mPath, Canvas.ClipOp.INTERSECT);//根据路径裁剪canvas
    		canvas.scale(ratio, ratio);//画布缩放至跟图片缩放程度一致
    		if (ratio == ratioWidth) {
        		float heightErr = (originHeight * ratio - (mHeight - SLIDER_HEIGHT)) / 2;//根据比例计算出垂直方向上由于 CLIP_CENTER 裁剪掉的图片的高度
        		canvas.drawPixelMapHolder(pixelMapHolder, 0, -heightErr / ratio, mPaint);//绘制内容
    		} else {
        		float widthErr = (originWidth * ratio - mWidth) / 2;//根据比例计算出水平方向上由于 CLIP_CENTER 裁剪掉的图片的宽度
        		canvas.drawPixelMapHolder(pixelMapHolder, -widthErr / ratio, 0, mPaint);//绘制内容
    		}
	});
}