基于安卓平台的滑动拼图验证组件 SwipeCaptcha，实现了鸿蒙化迁移和重构，代码已经开源，目前已经获得了很多人的 Star 和 Fork ，欢迎各位下载使用并提出宝贵意见！
https://gitee.com/isrc_ohos/swipe-captcha_ohos
上一期 SwipeCaptcha_ohos2.0 文章中介绍过，系统为了确保在注册或登录页面时不是机器人在操作，通常需要用户进行手动验证。
本期的 SwipeCaptcha_ohos3.0 是对前两版本验证方式进行功能升级，得到的一种新的验证方式——旋转验证。
此验证方式将图片作为背景，通过把旋转块旋转至能够与背景图片无缝拼接来完成验证，操作简单，安全性强，可被应用于各种网站的登录、注册、找回密码或投票等场景中。
组件效果展示
图 1：旋转验证运行效果
对应图 1 所示的运行效果图，本组件主要提供的功能是：
拖动图片下方的滑动条，可以改变旋转块角度。
若旋转块旋转后与原背景图片的误差值小于既定的阈值，则验证成功，反之则失败。
在验证完成后，可以点击滑动条下方的条状按钮重新生成验证码（即旋转块的角度随机设置）。
Sample 解析
步骤 1：在 xml 文件中添加 RotateCaptchaView 控件。
步骤 2：导入 RotateCaptchaView 类并声明类对象。
步骤 3：绑定 RotateCaptchaView 控件并设置组件背景图片。
步骤 4：设置回调处理函数。
步骤 5：设置 Button 控件监听事件，重新生成验证区域
先设置该控件的高和宽,此处将宽度定为跟随父控件的大小（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"/>//旋转块半径
在 MainAbilitySlice.java 文件中，通过 import 关键字导入 RotateCaptchaView 类，该类用于在后续为验证结果设置回调并重新生成旋转块角度。
//导入SwipeCaptchaView类
import com.huawei.swipecaptchaview.lib.RotateCaptchaView;public class MainAbilitySlice extends AbilitySlice {
//声明SwipeCaptchaView类对象
SwipeCaptchaView swipeCaptchaView;
......
}
在 MainAbilitySlice.java的onStart() 方法中，使用 findComponentById() 方法将 xml 文件中 RotateCaptchaView 控件与 RotateCaptchaView 类对象绑定；再调用 setImageId() 方法设置组件的背景图片。
//根据id绑定相应的控件
rotateCaptchaView = (RotateCaptchaView) findComponentById(ResourceTable.Id_rotateCaptchaView);
...
//设置背景图片
rotateCaptchaView.setImageId(ResourceTable.Media_pic02);
设置验证失败的情况和验证成功同理，只需重写 matchFailed() 方法，同时将文字信息设置为“验证失败！”即可。
//每次旋转结束后会根据相应的回调提示用户验证结果
rotateCaptchaView.setOnCaptchaMatchCallback(new RotateCaptchaView.OnCaptchaMatchCallback() {
@Override
public void matchSuccess(RotateCaptchaView rotateCaptchaView) {
new ToastDialog(getContext())
.setText(" 验证成功！")
.setAlignment(LayoutAlignment.CENTER)
.show();
}
...
}
绑定 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 解析
①初始化准备工作
设置半径 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。
实例化 Image 类得到背景图片的对象。
设置 Image 对象的宽为之前获取的屏幕宽度 mWidth，高为 mHeight-SLIDER_HEIGHT，即组件高减去拖动条高的差值。
设置图片缩放模式为中心缩放。
设置图像源为图 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);//设置图片
再设置拖动条的进度值，其中最小值设置为 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(); //监听器
若大于验证阈值，则验证失败：直接设置回调函数，提示用户验证失败的效果，同时旋转块恢复验证前的角度。
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);
}}}
});
}
②初始化旋转验证区域
在通过 Image 类对象调用 setPixelMap() 方法设置好验证背景图片后，由 initCaptcha() 方法完成旋转验证区域的初始化，主要实现的是对画笔的初始化。
再实例化一个 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();
}
③设置旋转块边框的路径并计算比例
判断是否设置好了背景图片，如果设置好了则使用 Random 类对象调用带参的 nextInt() 方法随机生成一个范围 0 至 240 的整数，以此随机整数与 60 相加的和作为重新生成验证码后旋转块的随机角度。
设置拖动条初始进度为 0，同时激活按钮，将其状态设置为可点击并触发点击事件。
为绘制的画笔添加阴影效果，传入的参数分别表示度数和样式，实现在旋转块圆形边缘处有一圈阴影的效果。
设置好上述属性后，需要调用 invalidate() 方法对图片和布局视图进行刷新。
设置绘制路径即旋转块边框的圆形轨迹，为严谨起见先使用 reset() 方法清空之前已经绘制的 Path 路径至原始状态。
调用 addCircle() 方法设置圆的绘制路径，该方法前两个参数表示旋转块的圆点坐标 X、Y 值，第三个参数表示圆的半径，第四个参数表示绘制方向。
此处我们设置的绘制轨迹是一个以图片中点 (mWidth/2f，(mHeight-SLIDER_HEIGHT)/2f) 为圆心、mCaptchaRadius 为半径、顺时针方向绘制的圆形。
计算原理和坐标轴方向可参考图 3，其中圆心即图片中点坐标的计算方法是横坐标 X 为图片宽度的一半，纵坐标 Y 为图片高度的一半即旋转验证组件的高减去拖动条高的差值的一半。
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();
...
}
该模式会将图片的短边缩放至合适的大小并对长边进行裁剪，因此较小的缩放比例代表被裁剪的边，较大的则代表在填充进旋转验证组件时的真实缩放比例。
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
...
}
若二者比例不相等，说明宽有变化是在水平方向上进行了裁剪，则根据比例计算出被裁剪掉的图片宽度，并在画布上绘制内容。
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);//绘制内容
}
});
}
项目贡献人：王时予、李珂、朱伟、郑森文、陈美汝、张馨心、刘雨琦
👇👇👇
求分享
求点赞
求在看
