鸿蒙滑动拼图验证组件，有点意思…

基于安卓平台的滑动拼图验证组件 SwipeCaptcha（
https://github.com/mcxtzhang/SwipeCaptcha），实现了其核心功能的鸿蒙化迁移和重构，代码已经开源到，欢迎各位下载使用并提出宝贵意见！

开源地址：

在页面登录或者注册的时候，为了确保不是机器人操作，会让用户手动验证。验证方式分为滑动拼图验证和滑动验证两种。

01组件效果展示

鸿蒙系统的 SwipeCaptcha 组件在使用时，有两个较为重要的图片：滑块和原图。

这两张图片被放置与同一水平线上，用户拖动滑块至原图处，误差在一定范围内，即可验证成功。

每次调用 SwipeCaptcha 组件，滑块和原图的位置都会发生随机变化，登录时被暴力破解的难度增加，安全性较高。

在 SwipeCaptcha 组件的验证界面，还有当前进度值和验证状态的描述。当前进度值表示滑块在水平方向的滑动进度，进度为 100 时，表示滑块滑至最右端。

进度值下方展示的是当前的验证状态，可分为：“开始”、“验证失败，请重新验证三种状态”、“验证成功”。

下面依次展示 SwipeCaptcha 组件拼图验证失败和成功的效果图。

①验证失败效果

用户未将滑块拖至原图处，导致滑块与原图的位置误差较大，验证失败。

图 1：验证失败效果

②验证成功效果

用户拖动滑块至原图处，误差在一定范围内，验证成功。

图 2：验证成功效果

02Sample 解析

Sample 主要包含以下四个部分：

下面将通过具体步骤对上述四个部分进行详解。

①数据初始化

本步骤包含三个部分的数据设置：

②背景图片绘制

用手机屏幕的宽度除以背景图片的宽度，得到背景图片的缩放比例，当该图片显示在手机中，按照此比例缩放可与屏幕同宽。

该比例用于背景图片适配不同型 的手机屏幕。

③确定滑块和原图的位置

图 3：滑块和原图的位置示意

puzzleWidth 为滑块或者原图的宽度；top 为随机数值，表示滑块或者原图的上边距离背景图片上边的距离；puzzel2left 也为随机数值，表示原图左边距离背景图片左边的距离。

有了以上三个变量可以确定组件中滑块和原图的初始位置和大小（滑块初始时位于屏幕的最左侧）。

下面介绍上述属性是如何计算出来的：

④获取滑块

本步骤需要根据原图的位置，解码出一个图片作为滑块。

首先设置滑块的形状为矩形，依据上述的 puzzel2left、puzzleWidth 属性，确定矩形所在区域，依据缩放比例，将矩形区域映射为原比例图像，并对此图像进行解码，得到滑块图像数据。

⑤绘制滑块

滑块通过画笔来绘制，其位置应该根据滑动进度条的进度来移动，并且要对不同手机屏幕的进行适配。

同时，为了和用户友好的交互，我们还需要为滑块绘制一个边框，告知用户这个边框所在就是滑块（原图也需要绘制边框，原理相同）。

绘制滑块和边框的代码如下：

⑥进度条滑动更新

为进度条设置监听，拖动进度条会引起三处更新：

在验证状态的更新中，需要对用户拖动进度条结束时的验证状态进行判断，滑块和原图的位置差距是否在误差范围内，如果在范围内，则显示验证成功，如果不在误差范围内，则显示验证失败，提示需要重新验证。

项目贡献人：赵柏屹、郑森文、朱伟、陈美汝、张馨心

文章链接：
https://mp.weixin.qq.com/s/sVeRfcEtD4T9MRftkDm8KQ