鸿蒙开源组件——滑块拼图验证码控件

jacksky

发布于 2021-12-29 16:31

浏览

0收藏

Captcha

项目介绍

项目名称：滑块拼图验证码控件
所属系列：openharmony的第三方组件适配移植
功能：滑块拼图验证码控件
项目移植状态：主功能完成，滑块效果有差异
调用差异：无
开发版本：sdk6，DevEco Studio2.2 Beta1
基线版本： Release 1.12

效果演示

安装教程

1.在项目根目录下的build.gradle文件中，

allprojects {
   repositories {
       maven {
           url 'https://s01.oss.sonatype.org/content/repositories/releases/'
       }
   }
}1.
2.
3.
4.
5.
6.
7.

2.在entry模块的build.gradle文件中，

dependencies {
   implementation('com.gitee.chinasoft_ohos:captcha:1.0.2')
   ......  
}1.
2.
3.
4.

在sdk6，DevEco Studio2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

组件主要由Img控件和Slider控件组成。

1.将Captcha添加至布局

<com.luozm.captcha.Captcha
        ohos:id="$+id:captcha"
        ohos:width="match_parent"
        ohos:height="match_content"
        app:src="$media:cat"/>1.
2.
3.
4.
5.

2.添加Java代码

   captcha = (Captcha) findComponentById(ResourceTable.Id_captCha);
   captcha.setCaptchaListener(new Captcha.CaptchaListener() {
            @Override
            public String onAccess(long time) {
                new ToastDialog(getContext())
                        .setText( "验证成功")
                        .show();
                return "验证通过";
            }

            @Override
            public String onFailed(int failedCount) {
               new ToastDialog(getContext())
                        .setText( "验证失败,失败次数"+ count)
                        .show();
                return "验证失败";
            }

            @Override
            public String onMaxFailed() {
               new ToastDialog(getContext())
                        .setText( "验证超过次数，你的帐号被封锁")
                        .show();
                return "验证超过次数，你的帐号被封锁";
            }
        });1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

4.(可选)自定义拼图样式
1）编写策略类,继承CaptchaStrategy类，重写策略方法,具体可参考DefaultCaptchaStrategy类

public abstract class CaptchaStrategy {

  protected Context mContext;

  public CaptchaStrategy(Context ctx) {
      this.mContext = ctx;
  }

  protected Context getContext() {
      return mContext;
  }

  /**
   * 定义拼图缺块的形状
   *
   * @param blockSize 单位dp，注意转化为px,缺块的大小，注意Path的边界不要超出此大小
   * @return path of the shape
   */
  public abstract Path getBlockShape(int blockSize);

  /**
   * 根据整张拼图的宽高和拼图缺块大小定义拼图缺块的位置
   *
   * @param width  picture width
   * @param height picture height
   * @return position info of the block
   */
  public abstract PositionInfo getBlockPostionInfo(int width, int height, int blockSize);

  /**
    * 定义滑块图片的位置信息(只有设置为无滑动条模式有用并建议重写)
    *
   * @param width  picture width
   * @param height picture height
   * @return position info of the block
   */
  public PositionInfo getPositionInfoForSwipeBlock(int width, int height, int blockSize){
      return getBlockPostionInfo(width,height,blockSize);
  }

  /**
   * 定义拼图缺失部分阴影的Paint
   */
  public abstract Paint getBlockShadowPaint();

  /**
   * 获得拼图缺块图片的Paint
   */
  public abstract Paint getBlockBitmapPaint();

  /**
   * 装饰滑块图片，在绘制图片后执行，即绘制滑块前景
   * @params canvas
   * @params shape   缺块的形状
   */
  public void decoreateSwipeBlockBitmap(Canvas canvas, Path shape) {

  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

2）添加Java代码

captCha.setCaptchaStrategy(new XXXCaptchaStrategy(context));1.

5.(可选)自定义滑块条与Slider自定义样式一样

<com.luozm.captcha.Captcha
    ohos:id="$+id:captcha"
    ohos:width="match_parent"
    ohos:height="match_content"
    app:mode="mode_bar"
    app:src="$media:cat1"
    app:blockSize="150"
    app:max_fail_count="5"
    app:progressbg="$graphic:po_seekbar"
    app:thumbbg="$graphic:thumb"/>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.