Android实现动态验证码的技术调研与实现

前言

本文链接：http://blog.csdn.net/dreamsever/article/details/53467708

前一段时间看到干货集中营 推荐的一个开源项目验证码CaptchaImageView，可用于动态生成验证码，项目地址：https://github.com/jineshfrancs/CaptchaImageView。我就忽然联想到陆金所App的动态验证码效果挺赞的，因为它不仅有文字倾斜，文字上下错位间距，中间黑曲线遮挡，还有文字背景阴影和文字变形。

下面是陆金所验证码效果，奈何这个app禁止了系统截屏，我只有手动拍照了。。

当时就很想实现一下这样的效果，经过网上的查找我找到两篇博客：
android自定义view（一），打造绚丽的验证码
Android仿斗鱼领取鱼丸文字验证(三)
其实看效果第一篇博客的效果就挺好的，如果不需要那么花哨，干货集中营推荐的CaptchaImageView也是可以用的，但是从效果和体验上我感觉陆金所的更好，更像网页版的动态验证码而且又不难看清楚文字，点击一下刷新验证码，最主要的还是这里有前面几位都没有的效果：文字变形。我就苦思冥想自定义View绘制文字的时候，哪个属性可以让文字变形，没有想出来，我就查了半天试了n次，最后找到了一篇爱哥的博客：http://blog.csdn.net/aigestudio/article/details/41960507，里面大胸美女的那段代码你会发现一个方法：
// 绘制网格位图
canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, matrixMoved, 0, null, 0, null);

这个方法能够实现图片变形，我们可以先生成文字的图片，然后对这个图片进行变形，这样就可以实现文字变形的动态验证码

最终效果：

实现

一、思路

关于思路我就大致的说说，其实除了文字变形基本都是参考的android自定义view（一），打造绚丽的验证码 这篇博客。感兴趣可以具体去看看。
首先，你要会基本的自定义View，市面上关于自定义View的博客太多了，如果对自定义View不了解的可以先去补补课。看到效果我们首先想到的是在onDraw()方法里面画一个背景，生成一个验证码，然后生成不同方位的文字，绘制上去。现在有了文字变形，所以大致步骤需要调节一下，现在是：
1、根据：

mbitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
Canvas myCanvas=new Canvas(mbitmap);

得到一个画布，在这个画布上绘制上下倾斜错位不同颜色的文字，同时也得到了bitmap
2、对上面的到的bitmap进行变形，使用canvas.drawBitmapMesh(。。)方法，可以对图片进行变形扭曲等等，非常强大。用爱哥的话是：它可以对Bitmap做几乎任何改变。前提只要你算法够强

3、使用path绘制干扰线，要有一定的随机性

二、代码

先生成两个空画布,其中一个画布得到变形前的形状的bitmap，后一个画布的到最终的bitmap，最终显示出来

        mbitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        codebitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        Canvas myCanvas=new Canvas(mbitmap);
        Canvas canvas=new Canvas(codebitmap);

生成随机验证码：

/**
     * java生成随机数字和字母组合
     * @return 随机验证码
     */
    public String getCharAndNumr() {
        String val = "";
        Random random = new Random();
        for (int i = 0; i < codeNum; i++) {
            // 输出字母还是数字
            String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num";
            // 字符串
            if ("char".equalsIgnoreCase(charOrNum)) {
                // 取得大写字母还是小写字母
                int choice = random.nextInt(2) % 2 == 0 ? 65 : 97;
                val += (char) (choice + random.nextInt(26));
            } else if ("num".equalsIgnoreCase(charOrNum)) { // 数字
                val += String.valueOf(random.nextInt(10));
            }
        }
        vCode=val;
        return val;
    }

已经画了背景，得到了验证码，现在把验证码绘制成上下倾斜错位且不同颜色的文字效果

for (int i=0;i<codeNum;i++){
            int offsetDegree=mRandom.nextInt(15);
            // 这里只会产生0和1，如果是1那么正旋转正角度，否则旋转负角度
            offsetDegree = mRandom.nextInt(2) == 1?offsetDegree:-offsetDegree;
            myCanvas.save();
            myCanvas.rotate(offsetDegree,mWidth/2,mHeight/2);
            // 给画笔设置随机颜色，+20是为了去除一些边界值
            textPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
            myCanvas.drawText(String.valueOf(tempCode.charAt(i)), i * charLength * 1.6f+30, mHeight * 2 / 3f, textPaint);
            myCanvas.restore();

        }

关于图像扭曲变形这块建议先去看看爱哥的那一篇博客，先看看drawBitmapMesh到底是怎么工作的，我推荐这两篇博客：
自定义控件其实很简单5/12
Android简单实现界面扭曲与简单的物理效果实现
这两篇博客应该就可以看懂drawBitmapMesh是怎么通过网格对图像进行扭曲的，如果还没有看懂还可以再找找其他的博客看看，对这个方法的原理理解透彻，并且你的算法能力比较强，也许你能够实现更加炫酷的效果。由于我的算法能力不是很强，这里我的实现扭曲方法是将验证码bitmap分成4＊3个网格，共(4+1)*(3+1)=20个点

不要笑我的这太简单了，主要是这样实现的效果基本上也挺好的，如果你想要更好的效果可以去按照这个套路去优化，反正原理你已经知道了
代码：

    int index=0;
    float bitmapwidth= mbitmap.getWidth();
    float bitmapheight= mbitmap.getHeight();
    for(int i=0;i<HEIGHT+1;i++){
        float fy=bitmapheight/HEIGHT*i;
        for(int j=0;j<WIDTH+1;j++){
            float fx=bitmapwidth/WIDTH*j;
            //偶数位记录x坐标  奇数位记录Y坐标
            origs[index*2+0]=verts[index*2+0]=fx;
            origs[index*2+1]=verts[index*2+1]=fy;
            index++;
        }
    }
    //设置变形点，这些点将会影响变形的效果
    offset=bitmapheight/HEIGHT/3;
    verts[12]=verts[12]-offset;
    verts[13]=verts[13]+offset;
    verts[16]=verts[16]+offset;
    verts[17]=verts[17]-offset;
    verts[24]=verts[24]+offset;
    verts[25]=verts[25]+offset;

最后扭曲，加干扰线

// 对验证码图片进行扭曲变形
        canvas.drawBitmapMesh(mbitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);
        // 产生干扰效果2 -- 干扰线
        for(Path path : mPaths){
            linePaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
            canvas.drawPath(path, linePaint);
        }

三、完整代码

package sgffsg.com.verifycodeview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.Random;

/**
 * Verification Code View
 * Created by sgffsg on 16/11/30.
 */

public class VerificationCodeView extends View {
    //将图片划分成4*3个小格
    private static final int WIDTH=4;
    private static final int HEIGHT=3;
    //小格相交的总的点数
    private int COUNT=(WIDTH+1)*(HEIGHT+1);
    private float[] verts=new float[COUNT*2];
    private float[] origs=new float[COUNT*2];

    //黄背景颜色
    private int YELLOW_BG_COLOR = 0xfff9dec1;
    //蓝背景颜色
    private int BLUE_BG_COLOR = 0xffdcdef8;

    private RectF mBounds;//用于获取控件宽高
    private Rect textBound;//用于计算文本的宽高

    private Paint bgPaint;//背景画笔
    private Paint textPaint;
    private Paint linePaint;

    private String tempCode;//当前生成的验证码
    private int codeNum = 4;//验证码位数  4或6。。
    private Random mRandom;

    //控件总宽度
    private int mWidth;
    //控件高度
    private int mHeight;

    private Bitmap mbitmap;
    private Bitmap codebitmap;
    /**
     * 绘制贝塞尔曲线的路径集合
     */
    private ArrayList<Path> mPaths = new ArrayList<Path>();
    private float offset=5;//扭曲偏移
    private String vCode;

    public VerificationCodeView(Context context) {
        this(context,null);
    }

    public VerificationCodeView(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public VerificationCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取宽和高的SpecMode和SpecSize
        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        //分别判断宽高是否设置为wrap_content
        if (wSpecMode == MeasureSpec.AT_MOST && hSpecMode == MeasureSpec.AT_MOST) {
            //宽高都为wrap_content,直接指定为400
            setMeasuredDimension(mWidth, mWidth);

        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            //只有宽为wrap_content,宽直接指定为400，高为获取的SpecSize
            setMeasuredDimension(mWidth, hSpecSize);

        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            //只有高为wrap_content,高直接指定为400，宽为获取的SpecSize
            setMeasuredDimension(wSpecSize, mWidth);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBounds=new RectF(getLeft(),getTop(),getRight(),getBottom());
        mWidth= (int) (mBounds.right-mBounds.left);
        mHeight= (int) (mBounds.bottom-mBounds.top);
        createCodeBitmap();
    }

    /**
     * 初始化
     */
    private void initView() {
        mRandom=new Random();

        bgPaint=new Paint();
        bgPaint.setAntiAlias(true);
        bgPaint.setColor(YELLOW_BG_COLOR);

        linePaint=new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setColor(Color.BLACK);
        linePaint.setStrokeWidth(5);
        linePaint.setStrokeCap(Paint.Cap.ROUND);

        textPaint=new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(DisplayUtils.spToPx(getContext(),30));
        textPaint.setShadowLayer(5,3,3,0xFF999999);
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        textPaint.setTextScaleX(0.8F);
        textPaint.setColor(Color.GREEN);

        textBound=new Rect();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(codebitmap,0,0,null);
    }

    /**
     * 生成验证码图片
     */
    private void createCodeBitmap() {
        mPaths.clear();
        // 生成干扰线坐标
        for(int i=0;i<2;i++){
            Path path = new Path();
            int startX = mRandom.nextInt(mWidth/3)+10;
            int startY = mRandom.nextInt(mHeight/3)+10;
            int endX = mRandom.nextInt(mWidth/2)+mWidth/2-10;
            int endY = mRandom.nextInt(mHeight/2)+mHeight/2-10;
            path.moveTo(startX,startY);
            path.quadTo(Math.abs(endX-startX)/2, Math.abs(endY-startY)/2,endX,endY);
            mPaths.add(path);
        }
        mbitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        codebitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        Canvas myCanvas=new Canvas(mbitmap);
        Canvas canvas=new Canvas(codebitmap);
        tempCode=getCharAndNumr();
        //画背景
        myCanvas.drawColor(YELLOW_BG_COLOR);

        textPaint.getTextBounds(tempCode,0,codeNum,textBound);
        float charLength=(textBound.width())/codeNum;
        for (int i=0;i<codeNum;i++){
            int offsetDegree=mRandom.nextInt(15);
            // 这里只会产生0和1，如果是1那么正旋转正角度，否则旋转负角度
            offsetDegree = mRandom.nextInt(2) == 1?offsetDegree:-offsetDegree;
            myCanvas.save();
            myCanvas.rotate(offsetDegree,mWidth/2,mHeight/2);
            // 给画笔设置随机颜色，+20是为了去除一些边界值
            textPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
            myCanvas.drawText(String.valueOf(tempCode.charAt(i)), i * charLength * 1.6f+30, mHeight * 2 / 3f, textPaint);
            myCanvas.restore();

        }
        int index=0;
        float bitmapwidth= mbitmap.getWidth();
        float bitmapheight= mbitmap.getHeight();
        for(int i=0;i<HEIGHT+1;i++){
            float fy=bitmapheight/HEIGHT*i;
            for(int j=0;j<WIDTH+1;j++){
                float fx=bitmapwidth/WIDTH*j;
                //偶数位记录x坐标  奇数位记录Y坐标
                origs[index*2+0]=verts[index*2+0]=fx;
                origs[index*2+1]=verts[index*2+1]=fy;
                index++;
            }
        }
        //设置变形点，这些点将会影响变形的效果
        offset=bitmapheight/HEIGHT/3;
        verts[12]=verts[12]-offset;
        verts[13]=verts[13]+offset;
        verts[16]=verts[16]+offset;
        verts[17]=verts[17]-offset;
        verts[24]=verts[24]+offset;
        verts[25]=verts[25]+offset;

        // 对验证码图片进行扭曲变形
        canvas.drawBitmapMesh(mbitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);
        // 产生干扰效果2 -- 干扰线
        for(Path path : mPaths){
            linePaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
            canvas.drawPath(path, linePaint);
        }
    }

    /**
     * java生成随机数字和字母组合
     * @return 随机验证码
     */
    public String getCharAndNumr() {
        String val = "";
        Random random = new Random();
        for (int i = 0; i < codeNum; i++) {
            // 输出字母还是数字
            String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num";
            // 字符串
            if ("char".equalsIgnoreCase(charOrNum)) {
                // 取得大写字母还是小写字母
                int choice = random.nextInt(2) % 2 == 0 ? 65 : 97;
                val += (char) (choice + random.nextInt(26));
            } else if ("num".equalsIgnoreCase(charOrNum)) { // 数字
                val += String.valueOf(random.nextInt(10));
            }
        }
        vCode=val;
        return val;
    }

    /**
     * refresh verification Code
     */
    public void refreshCode(){
        createCodeBitmap();
        invalidate();
    }

    /**
     * get verification code
     * @return verification code
     */
    public String getvCode() {
        return vCode;
    }
}

具体项目已经上传至github欢迎star
github项目地址

参考文献

android自定义view（一），打造绚丽的验证码
Android仿斗鱼领取鱼丸文字验证(三)
Android简单实现界面扭曲与简单的物理效果实现
自定义控件其实很简单5/12