【Android】仿斗鱼滑动拼图验证码控件

时间 2019-11-21

原文原文链接

本篇文章已受权微信公众号 guolin_blog （郭霖）独家发布
转载请标明出处：
gold.xitu.io/post/583566…
本文出自:【张旭童的稀土掘金】(gold.xitu.io/user/56de21…)
代码传送门：喜欢的话，随手点个star。多谢
github.com/mcxtzhang/S…javascript

概述

本篇滑动验证码的代码其实上周四就写好了，结果周末遇上找房子，搬家，累掉了半条命，赶忙写篇博客恢复恢复元气。前端

上周一总监让我研究一波滑动验证码，说项目可能会上。我想了一下好像在斗鱼、淘宝都见过，结果下了这两个app，发现怎么点也出不来滑动验证码。因而，我就去web端斗鱼看了一下，果真，每次登录都会出现验证码。
好吧，那咱们此次的目标就定为 在 Android端app上，自定义View，仿一个web端滑动验证码吧。
（后话，作到后面发现我有点蠢了，我应该直接模仿app端的，不少效果在web端应该很好实现，可是在Android端就不那么好整了。，例如验证成功的白光扫过动画，以下图。在Android上实现起来就不太容易，有些效果仍是不如web端酷炫。）java

(图很渣，也忽略底下的SeekBar，这不是重点)
一些动画，效果录不出来了，你们能够去斗鱼web端看一下，而后下载Demo看一下，效果仍是能够的。
代码传送门：
github.com/mcxtzhang/S…

咱们的Demo和web端基本上同样。android

那么本控件包含不只包含如下功能：git

随机区域起点(左上角x,y)生成一个验证码阴影。
验证码拼图 凹凸图形会随机变换。
验证码区域宽高可自定义。
抠图验证码区域，绘制一个用于联动滑动的验证码滑块。
验证失败，会闪烁几下而后回到原点。
验证成功，会有白光扫过的动画。

分解一下验证码核心实现思路：github

控件继承自ImageView。理由：
1 若是放在项目中用，验证码图片但愿能够是接口返回。ImageView以及其子类支持花式加载图片。
2 继承自ImageView，绘制图片自己不用咱们干预，也不用咱们操心scaleType，节省不少工做。
在onSizeChanged()方法中生成和控件宽高相关的属性值：
1 初始化时随机生成验证码区域起点
2 生成验证码区域Path
3 生成滑块Bitmap
onDraw()时，依次绘制：
1 验证码阴影
2 滑块

核心工做是以上，但是实现起来仍是有不少坑的，下面一步一步来吧。web

验证码区域的生成

这里我省略自定义View的几个基础步骤：canvas

在attrs.xml定义属性
在View的构造函数里获取attrs属性
一些Paint，Path的初始化工做

完整代码在
github.com/mcxtzhang/S…
能够下载后对照阅读，效果更佳。api

首先思考，验证码区域包含：微信

绘制在图片上的验证码阴影
可移动的验证码滑块

1 生成验证码阴影

咱们用Path存储验证码区域，
因此这一步最重要是生成验证码区域的Path。
查看竞品（斗鱼web端）以下，

so，咱们这里要绘制一个矩形+四边可能会有随机的凹凸，凹凸能够用半圆来替代。
咱们以下编写：
代码配有注释，gap是指凹凸的起点和顶点的距离。

//生成验证码Path
    private void createCaptchaPath() {
        //本来打算随机生成gap，后来发现 宽度/3 效果比较好，
        int gap = mRandom.nextInt(mCaptchaWidth / 2);
        gap = mCaptchaWidth / 3;

        //随机生成验证码阴影左上角 x y 点，
        mCaptchaX = mRandom.nextInt(mWidth - mCaptchaWidth - gap);
        mCaptchaY = mRandom.nextInt(mHeight - mCaptchaHeight - gap);

        mCaptchaPath.reset();
        mCaptchaPath.lineTo(0, 0);

        //从左上角开始 绘制一个不规则的阴影
        mCaptchaPath.moveTo(mCaptchaX, mCaptchaY);//左上角
        mCaptchaPath.lineTo(mCaptchaX + gap, mCaptchaY);
        //draw一个随机凹凸的圆
        drawPartCircle(new PointF(mCaptchaX + gap, mCaptchaY),
                new PointF(mCaptchaX + gap * 2, mCaptchaY),
                mCaptchaPath, mRandom.nextBoolean());


        mCaptchaPath.lineTo(mCaptchaX + mCaptchaWidth, mCaptchaY);//右上角
        mCaptchaPath.lineTo(mCaptchaX + mCaptchaWidth, mCaptchaY + gap);
        //draw一个随机凹凸的圆
        drawPartCircle(new PointF(mCaptchaX + mCaptchaWidth, mCaptchaY + gap),
                new PointF(mCaptchaX + mCaptchaWidth, mCaptchaY + gap * 2),
                mCaptchaPath, mRandom.nextBoolean());


        mCaptchaPath.lineTo(mCaptchaX + mCaptchaWidth, mCaptchaY + mCaptchaHeight);//右下角
        mCaptchaPath.lineTo(mCaptchaX + mCaptchaWidth - gap, mCaptchaY + mCaptchaHeight);
        //draw一个随机凹凸的圆
        drawPartCircle(new PointF(mCaptchaX + mCaptchaWidth - gap, mCaptchaY + mCaptchaHeight),
                new PointF(mCaptchaX + mCaptchaWidth - gap * 2, mCaptchaY + mCaptchaHeight),
                mCaptchaPath, mRandom.nextBoolean());


        mCaptchaPath.lineTo(mCaptchaX, mCaptchaY + mCaptchaHeight);//左下角
        mCaptchaPath.lineTo(mCaptchaX, mCaptchaY + mCaptchaHeight - gap);
        //draw一个随机凹凸的圆
        drawPartCircle(new PointF(mCaptchaX, mCaptchaY + mCaptchaHeight - gap),
                new PointF(mCaptchaX, mCaptchaY + mCaptchaHeight - gap * 2),
                mCaptchaPath, mRandom.nextBoolean());


        mCaptchaPath.close();
    }复制代码

关于drawPartCircle()，它的功能是传入起点、终点坐标，以及须要凹仍是凸，和绘制的Path。它会在Path上绘制一个凹、凸的半圆。
代码以下：

/** * 传入起点、终点 坐标、凹凸和Path。 * 会自动绘制凹凸的半圆弧 * * @param start 起点坐标 * @param end 终点坐标 * @param path 半圆会绘制在这个path上 * @param outer 是否凸半圆 */
    public static void drawPartCircle(PointF start, PointF end, Path path, boolean outer) {
        float c = 0.551915024494f;
        //中点
        PointF middle = new PointF(start.x + (end.x - start.x) / 2, start.y + (end.y - start.y) / 2);
        //半径
        float r1 = (float) Math.sqrt(Math.pow((middle.x - start.x), 2) + Math.pow((middle.y - start.y), 2));
        //gap值
        float gap1 = r1 * c;

        if (start.x == end.x) {
            //绘制竖直方向的

            //是不是从上到下
            boolean topToBottom = end.y - start.y > 0 ? true : false;
            //如下是我写出了全部的计算公式后推的，不要问我过程，只可意会。
            int flag;//旋转系数
            if (topToBottom) {
                flag = 1;
            } else {
                flag = -1;
            }
            if (outer) {
                //凸的 两个半圆
                path.cubicTo(start.x + gap1 * flag, start.y,
                        middle.x + r1 * flag, middle.y - gap1 * flag,
                        middle.x + r1 * flag, middle.y);
                path.cubicTo(middle.x + r1 * flag, middle.y + gap1 * flag,
                        end.x + gap1 * flag, end.y,
                        end.x, end.y);
            } else {
                //凹的 两个半圆
                path.cubicTo(start.x - gap1 * flag, start.y,
                        middle.x - r1 * flag, middle.y - gap1 * flag,
                        middle.x - r1 * flag, middle.y);
                path.cubicTo(middle.x - r1 * flag, middle.y + gap1 * flag,
                        end.x - gap1 * flag, end.y,
                        end.x, end.y);
            }
        } else {
            //绘制水平方向的

            //是不是从左到右
            boolean leftToRight = end.x - start.x > 0 ? true : false;
            //如下是我写出了全部的计算公式后推的，不要问我过程，只可意会。
            int flag;//旋转系数
            if (leftToRight) {
                flag = 1;
            } else {
                flag = -1;
            }
            if (outer) {
                //凸 两个半圆
                path.cubicTo(start.x, start.y - gap1 * flag,
                        middle.x - gap1 * flag, middle.y - r1 * flag,
                        middle.x, middle.y - r1 * flag);
                path.cubicTo(middle.x + gap1 * flag, middle.y - r1 * flag,
                        end.x, end.y - gap1 * flag,
                        end.x, end.y);
            } else {
                //凹 两个半圆
                path.cubicTo(start.x, start.y + gap1 * flag,
                        middle.x - gap1 * flag, middle.y + r1 * flag,
                        middle.x, middle.y + r1 * flag);
                path.cubicTo(middle.x + gap1 * flag, middle.y + r1 * flag,
                        end.x, end.y + gap1 * flag,
                        end.x, end.y);
            }


/* 没推导以前的公式在这里 if (start.x < end.x) { if (outer) { //上左半圆 顺时针 path.cubicTo(start.x, start.y - gap1, middle.x - gap1, middle.y - r1, middle.x, middle.y - r1); //上右半圆:顺时针 path.cubicTo(middle.x + gap1, middle.y - r1, end.x, end.y - gap1, end.x, end.y); } else { //下左半圆 逆时针 path.cubicTo(start.x, start.y + gap1, middle.x - gap1, middle.y + r1, middle.x, middle.y + r1); //下右半圆 逆时针 path.cubicTo(middle.x + gap1, middle.y + r1, end.x, end.y + gap1, end.x, end.y); } } else { if (outer) { //下右半圆 顺时针 path.cubicTo(start.x, start.y + gap1, middle.x + gap1, middle.y + r1, middle.x, middle.y + r1); //下左半圆 顺时针 path.cubicTo(middle.x - gap1, middle.y + r1, end.x, end.y + gap1, end.x, end.y); } }*/
        }
    }复制代码

这里用的是推导以后的公式，没推导前的也在注释里。
简单说，先计算出中点和半径，利用三次贝塞尔曲线绘制一个圆（c和gap1 都是和三次贝塞尔曲线相关）。关于三次贝塞尔曲线就不展开了，网上不少资料，我也是现学的。
这里关于绘制验证码阴影Path，还有一段曲折心路历程，
绘制出来的效果以下：

)

心路历程（能够不看）：
验证码Path，猛的一看，彷佛很简单，不就是一个矩形+上四个边可能出现的凹凸嘛。
凹凸的话，咱们就是绘制一个半圆好了。
利用Path的lineTo()+addCircle()彷佛能够很轻松的实现？
最开始我是这么作的，结果发现画出来的Path是多段的Path，闭合后，没法造成一个完整阴影区域。更没法用于下一步验证码滑块bitmap的生成。
好，看来是addCircle()的锅，致使了Path被分割成多段。那我用arcTo()好了，结果发现arcTo不像addCircle()那样能够设置绘图的方向，（顺时针，逆时针），这当时可把我难住了，由于不能逆时针的话，上、右边的凹就画不出来。因此我放弃了，我转用贝塞尔曲线绘制这个凹凸。
文章写到这里，我忽然发现本身智障了，sweepAngle传入负值不就能够逆时针了吗。如：arcTo(oval, 180, -180);
因此说写博客是有很大好处的，写博客时大脑也是高速旋转，由于生怕写出错误，一是误导别人，二是丢人。大脑高速运转说不定就想通了之前想不通的问题。
因而我就脑残的用sin+二阶贝尔赛曲线去绘制这个半圆了，为何用它们呢？由于当初我绘制波浪滚动的时候用的sin函数+二阶贝塞尔模拟波浪，因而我就惯性思惟的也这么解决了。结果呢？绘制出来的凹凸不够圆啊，sin函数仍是比不过圆是否是。
因而我就走上了用三节贝塞尔曲线模拟圆的路。
看来我当初写这一块代码的时候，脑子确实不太清醒，不过也有收获。又复习了一遍Path的几个函数和贝塞尔曲线。

2 抠图：验证码滑块的生成

验证码Path生成好了后，我要根据Path去生成验证码滑块。那么第一步就是要抠图了。
代码以下：

//生成滑块
    private void craeteMask() {
        mMaskBitmap = getMaskBitmap(((BitmapDrawable) getDrawable()).getBitmap(), mCaptchaPath);
        //滑块阴影
        mMaskShadowBitmap = mMaskBitmap.extractAlpha();
        //拖动的位移重置
        mDragerOffset = 0;
        //isDrawMask 绘制失败闪烁动画用
        isDrawMask = true;
    }复制代码

//抠图
    private Bitmap getMaskBitmap(Bitmap mBitmap, Path mask) {
        //以控件宽高 create一块bitmap
        Bitmap tempBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        //把建立的bitmap做为画板
        Canvas mCanvas = new Canvas(tempBitmap);
        //有锯齿 且没法解决,因此换成XFermode的方法作
        //mCanvas.clipPath(mask);
        // 抗锯齿
        mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
        //绘制用于遮罩的圆形
        mCanvas.drawPath(mask, mMaskPaint);
        //设置遮罩模式(图像混合模式)
        mMaskPaint.setXfermode(mPorterDuffXfermode);
        //★考虑到scaleType等因素，要用Matrix对Bitmap进行缩放
        mCanvas.drawBitmap(mBitmap, getImageMatrix(), mMaskPaint);
        mMaskPaint.setXfermode(null);
        return tempBitmap;
    }复制代码

其实这里我也走了一些曲折的路，我先是用canvas.clipPath(path)抠的图，结果发现有锯齿，搜了不少资料也没搞定。因而我又回到了Xfermode的路上，将其设置为mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
先绘制dst，即遮罩验证码Path，而后再绘制src：Bitmap，取交集便可完成抠图。
这里有一些须要注意的地方：

src的Bitmap是取ImageView自己的bitmap。
建立的新Bitmap的宽高取控件的宽高
它们二者的宽高很大多是不一样的，这就是ImageView参数scaleType的做用。因此咱们取出ImageView的Matrix 用于绘制src的Bitmap。这样抠出来的Bitmap区域就和第1步遮盖住的区域是同样的了。

mMaskShadowBitmap = mMaskBitmap.extractAlpha();这句话是为了在绘制出的滑块周围也绘制一圈阴影，增强立体效果。
仔细看下图效果，周边又一圈立体阴影的效果：

绘制

onDraw()方法其实比较简单，只不过在其中加入了一些布尔类型的flag，都是和动画相关的：
代码以下：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //继承自ImageView，因此Bitmap，ImageView已经帮咱们draw好了。
        //我只在上面绘制和验证码相关的部分，

        //是否处于验证模式，在验证成功后 为false，其他状况为true
        if (isMatchMode) {
            //首先绘制验证码阴影
            if (mCaptchaPath != null) {
                canvas.drawPath(mCaptchaPath, mPaint);
            }
            //绘制滑块
            // isDrawMask 绘制失败闪烁动画用
            if (null != mMaskBitmap && null != mMaskShadowBitmap && isDrawMask) {
                // 先绘制阴影
                canvas.drawBitmap(mMaskShadowBitmap, -mCaptchaX + mDragerOffset, 0, mMaskShadowPaint);
                canvas.drawBitmap(mMaskBitmap, -mCaptchaX + mDragerOffset, 0, null);
            }
            //验证成功，白光扫过的动画，这一块动画感受不完美，有提升空间
            if (isShowSuccessAnim) {
                canvas.translate(mSuccessAnimOffset, 0);
                canvas.drawPath(mSuccessPath, mSuccessPaint);
            }
        }
    }复制代码

mPaint以下定义：因此绘制出阴影也有一些阴影效果。

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setColor(0x77000000);
        //mPaint.setStyle(Paint.Style.STROKE);
        // 设置画笔遮罩滤镜
        mPaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.SOLID));复制代码

值得说的就是，配合滑块滑动，是利用mDragerOffset,默认是0，滑动时mDragerOffset增长，滑块右移，反之亦然。
验证成功的白光扫过动画，是利用canvas.translate()作的，mSuccessPath和mSuccessPaint以下：

mSuccessPaint = new Paint();
        mSuccessPaint.setShader(new LinearGradient(0, 0, width, 0, new int[]{
                0x11ffffff, 0x88ffffff}, null,
                Shader.TileMode.MIRROR));
        //模仿斗鱼 是一个平行四边形滚动过去
        mSuccessPath = new Path();
        mSuccessPath.moveTo(0, 0);
        mSuccessPath.rLineTo(width, 0);
        mSuccessPath.rLineTo(width / 2, mHeight);
        mSuccessPath.rLineTo(-width, 0);
        mSuccessPath.close();复制代码

滑动、验证、动画

上一节完成后，咱们的滑动验证码View已经能够正常绘制出来了，如今咱们为它增长一些方法，让它能够联动滑动、验证功能和动画。

联动滑动：

上一节也提到，滑动主要是改变mDragerOffset的值，而后重绘本身->ondraw(),根据mDragerOffset偏移滑块Bitmap的绘制。

/** * 重置验证码滑动距离,(通常用于验证失败) */
    public void resetCaptcha() {
        mDragerOffset = 0;
        invalidate();
    }

    /** * 最大可滑动值 * @return */
    public int getMaxSwipeValue() {
        //return ((BitmapDrawable) getDrawable()).getBitmap().getWidth() - mCaptchaWidth;
        //返回控件宽度
        return mWidth - mCaptchaWidth;
    }

    /** * 设置当前滑动值 * @param value */
    public void setCurrentSwipeValue(int value) {
        mDragerOffset = value;
        invalidate();
    }复制代码

校验：

校验的话，须要引入一个回调接口：

public interface OnCaptchaMatchCallback {
        void matchSuccess(SwipeCaptchaView swipeCaptchaView);

        void matchFailed(SwipeCaptchaView swipeCaptchaView);
    }

    /** * 验证码验证的回调 */
    private OnCaptchaMatchCallback onCaptchaMatchCallback;

    public OnCaptchaMatchCallback getOnCaptchaMatchCallback() {
        return onCaptchaMatchCallback;
    }

    /** * 设置验证码验证回调 * * @param onCaptchaMatchCallback * @return */
    public SwipeCaptchaView setOnCaptchaMatchCallback(OnCaptchaMatchCallback onCaptchaMatchCallback) {
        this.onCaptchaMatchCallback = onCaptchaMatchCallback;
        return this;
    }复制代码

/** * 校验 */
    public void matchCaptcha() {
        if (null != onCaptchaMatchCallback && isMatchMode) {
            //这里验证逻辑，是经过比较，拖拽的距离 和 验证码起点x坐标。 默认3dp之内算是验证成功。
            if (Math.abs(mDragerOffset - mCaptchaX) < mMatchDeviation) {
                //成功的动画
                mSuccessAnim.start();
            } else {
                mFailAnim.start();
            }
        }

    }复制代码

成功、失败的回调是在动画结束时通知的。

动画：

动画里要用到宽高，因此它是在onSizeChanged()方法里被调用的。

//验证动画初始化区域
    private void createMatchAnim() {
        mFailAnim = ValueAnimator.ofFloat(0, 1);
        mFailAnim.setDuration(100)
                .setRepeatCount(4);
        mFailAnim.setRepeatMode(ValueAnimator.REVERSE);
        //失败的时候先闪一闪动画 斗鱼是 隐藏-显示 -隐藏 -显示
        mFailAnim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                onCaptchaMatchCallback.matchFailed(SwipeCaptchaView.this);
            }
        });
        mFailAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                if (animatedValue < 0.5f) {
                    isDrawMask = false;
                } else {
                    isDrawMask = true;
                }
                invalidate();
            }
        });

        int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
        mSuccessAnim = ValueAnimator.ofInt(mWidth + width, 0);
        mSuccessAnim.setDuration(500);
        mSuccessAnim.setInterpolator(new FastOutLinearInInterpolator());
        mSuccessAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mSuccessAnimOffset = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        mSuccessAnim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                isShowSuccessAnim = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                onCaptchaMatchCallback.matchSuccess(SwipeCaptchaView.this);
                isShowSuccessAnim = false;
                isMatchMode = false;
            }
        });
        mSuccessPaint = new Paint();
        mSuccessPaint.setShader(new LinearGradient(0, 0, width, 0, new int[]{
                0x11ffffff, 0x88ffffff}, null,
                Shader.TileMode.MIRROR));
        //模仿斗鱼 是一个平行四边形滚动过去
        mSuccessPath = new Path();
        mSuccessPath.moveTo(0, 0);
        mSuccessPath.rLineTo(width, 0);
        mSuccessPath.rLineTo(width / 2, mHeight);
        mSuccessPath.rLineTo(-width, 0);
        mSuccessPath.close();
    }复制代码

代码很简单，修改的一些布尔值flag，在onDraw()方法里会用到，结合onDraw()一看便懂。

Demo

这一节，咱们联动SeekBar滑动起来。
xml以下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    ......
>

    <com.mcxtzhang.captchalib.SwipeCaptchaView
        android:id="@+id/swipeCaptchaView"
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:scaleType="centerCrop"
        android:src="@drawable/pic11"
        app:captchaHeight="30dp"
        app:captchaWidth="30dp"/>

    <SeekBar
        android:id="@+id/dragBar"
        android:layout_width="320dp"
        android:layout_height="60dp"
        android:layout_below="@id/swipeCaptchaView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:progressDrawable="@drawable/dragbg"
        android:thumb="@drawable/thumb_bg"/>

    <Button
        android:id="@+id/btnChange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="老板换码"/>
</RelativeLayout>复制代码

UI就是文首那张图的样子，
完整Activity代码：

public class MainActivity extends AppCompatActivity {
    SwipeCaptchaView mSwipeCaptchaView;
    SeekBar mSeekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSwipeCaptchaView = (SwipeCaptchaView) findViewById(R.id.swipeCaptchaView);
        mSeekBar = (SeekBar) findViewById(R.id.dragBar);
        findViewById(R.id.btnChange).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mSwipeCaptchaView.createCaptcha();
                mSeekBar.setEnabled(true);
                mSeekBar.setProgress(0);
            }
        });
        mSwipeCaptchaView.setOnCaptchaMatchCallback(new SwipeCaptchaView.OnCaptchaMatchCallback() {
            @Override
            public void matchSuccess(SwipeCaptchaView swipeCaptchaView) {
                Toast.makeText(MainActivity.this, "恭喜你啊 验证成功 能够搞事情了", Toast.LENGTH_SHORT).show();
                mSeekBar.setEnabled(false);
            }

            @Override
            public void matchFailed(SwipeCaptchaView swipeCaptchaView) {
                Toast.makeText(MainActivity.this, "你有80%的多是机器人，如今走还来得及", Toast.LENGTH_SHORT).show();
                swipeCaptchaView.resetCaptcha();
                mSeekBar.setProgress(0);
            }
        });
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                mSwipeCaptchaView.setCurrentSwipeValue(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //随便放这里是由于控件
                mSeekBar.setMax(mSwipeCaptchaView.getMaxSwipeValue());
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.d("zxt", "onStopTrackingTouch() called with: seekBar = [" + seekBar + "]");
                mSwipeCaptchaView.matchCaptcha();
            }
        });

        //从网络加载图片也ok
        Glide.with(this)
                .load("http://www.investide.cn/data/edata/image/20151201/20151201180507_281.jpg")
                .asBitmap()
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        mSwipeCaptchaView.setImageBitmap(resource);
                        mSwipeCaptchaView.createCaptcha();
                    }
                });
    }
}复制代码

总结

代码传送门喜欢的话，随手点个star。多谢
github.com/mcxtzhang/S…
包含完整Demo和SwipeCaptchaView。

利用一些工具发现web端斗鱼，验证码图片和滑块图片都是接口返回的。
推测前端其实只返回后台：用户移动的距离或者距离的百分比。

本例彻底由前端实现验证码生成、验证功能，是由于：
1 练习自定义VIew，本身所有实现抠图验证绘制，感受很酷。
2 我不会作后台，手动微笑。

核心点：1 不规则图形Path的生成。2 指定Path对Bitmap抠图，抗锯齿。3 适配ImageView的ScaleType。4 成功、失败的动画