滑动验证码实践

一大早起床就看到推送一篇文章，关于仿斗鱼web端的滑动验证码，看了一下实现，挺有趣的，便自己顺着思路撸一遍，改了一点实现和动画什么的，顺带巩固一下绘制的代码。

这里也贴一下原作者文章链接:http://qingmang.me/articles/-4771769944547152798

本文代码链接：代码。看得喜欢关系点个star。

先看一下效果图效果还是不错的。

用法，SlideValidationView 是继承自ImageView，所以验证码图片直接set就行。

SeekBar seekBar;
SlideValidationView slideValidationView;
slideValidationView = (SlideValidationView) findViewById(R.id.yzm);
// 设置监听器，判断验证成功失败时回调
slideValidationView.setListener(new SlideListener() {    
    @Override    
    public void onSuccess() {        
        Toast.makeText(MainActivity.this, "验证成功", Toast.LENGTH_SHORT).show();
        seekBar.setProgress(0);
    @Override
    public void onFail() {
        Toast.makeText(MainActivity.this, "验证失败", Toast.LENGTH_SHORT).show();
        seekBar.setProgress(0);
seekBar = (SeekBar) findViewById(R.id.seekBar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        // 更新验证滑块的位置
        slideValidationView.setOffsetX(progress);
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {    }
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // 进行验证码的判断
        slideValidationView.deal();
复制代码

下面说一下实现，也可以选择去看代码，代码里面注释应该很全了。代码链接：代码。看得喜欢关系点个star。第一步：画拼图的path，上下左右四个半圆随机凹凸

* 创建验证区域path private void creatValidationPath () { validationPath = new Path (); if (validationSize == 0 ) { validationSize = width / 6 ; circleSize = validationSize / 3 ; startX = new Random () .nextInt (width - validationSize * 2 - circleSize * 2 - 10 ) + circleSize + validationSize + 10 ; startY = new Random () .nextInt (height - validationSize - circleSize * 2 ) + circleSize; // 从左上画path到右上 validationPath .moveTo (startX, startY); validationPath .lineTo (startX + circleSize, startY); creatRandomArc (validationPath, startX + circleSize, startY, false, 0 ); validationPath .lineTo (startX + validationSize, startY); // 从右上画path到右下 validationPath .lineTo (startX + validationSize, startY + circleSize); creatRandomArc (validationPath, startX + validationSize, startY + circleSize, true, 0 ); validationPath .lineTo (startX + validationSize, startY + validationSize); // 从右下画path到左下 validationPath .lineTo (startX + circleSize * 2 , startY + validationSize); creatRandomArc (validationPath, startX + circleSize, startY + validationSize, false, 1 ); validationPath .lineTo (startX, startY + validationSize); // 从左下画path到左上 validationPath .lineTo (startX, startY + circleSize * 2 ); creatRandomArc (validationPath, startX, startY + circleSize, true, 1 ); validationPath .lineTo (startX, startY); * 验证区域path四条边的半圆弧度 * @param validationPath 要操作的path * @param beginX 弧度的起始x坐标（取弧度的左边坐标，即弧度的两点，位于左边的那个坐标） * @param beginY 弧度的起始y坐标（取弧度的上边坐标，即弧度的两点，位于上边的那个坐标） * @param isleftRight 是否左右边 * @param type 右上边为0，左下边为1 private void creatRandomArc (Path validationPath, int beginX, int beginY, boolean isleftRight, int type) { RectF rectF; // 是左右边还是上下边 if (isleftRight) { rectF = new RectF (beginX - circleSize / 2 , beginY, beginX + circleSize / 2 , beginY + circleSize); } else { rectF = new RectF (beginX, beginY - circleSize / 2 , beginX + circleSize, beginY + circleSize / 2 ); // 随机得到是突出还是凹入半圆，针对角度问题，用type来解决 if (new Random() .nextInt ( 10 ) > 5 ) { // 突出半圆 if (isleftRight) { validationPath .arcTo (rectF, - 90 + type * 180 , 180 ); } else { validationPath .arcTo (rectF, - 180 + type * 180 , 180 ); } else { // 凹入半圆 if (isleftRight) { validationPath .arcTo (rectF, - 90 + type * 180 , - 180 ); } else { validationPath .arcTo (rectF, - 180 + type * 180 , - 180 );

第二步：绘制阴影（设置画笔的setMaskFilter，应该要为这个view关闭硬件加速，否则阴影没作用）

// 单独为这个view关闭硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);
复制代码

阴影

// 验证块的阴影画笔
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mPaint.setColor(0x99000000);
// 设置画笔遮罩滤镜mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID));
第三步：绘制滑块
因为上面我们得到了拼图的path，我们就创建一个bitmap，在里面分别绘制验证码原图和这个path，通过setXfermode（不了解的可以去搜搜），取得他们的交集，即为我们的滑块，由此我们通过一个变量来控制滑块的绘制x轴就行了
// 以控件宽高 create一块bitmap
Bitmap tempBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
// 把创建的bitmap作为画板
Canvas mCanvas = new Canvas(tempBitmap);
// 抗锯齿
mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
// 绘制用于遮罩的圆形
mCanvas.drawPath(mask, mMaskPaint);
// 设置遮罩模式(图像混合模式)
mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
// 考虑到scaleType等因素，要用Matrix对Bitmap进行缩放
mCanvas.drawBitmap(mBitmap, getImageMatrix(), mMaskPaint);
复制代码
第四步
绘制滑块的阴影，这里面有个api我也是第一次接触，bitmap.extractAlpha()拿到该bitmap的图片大小等信息，但只有透明度没有颜色，返回一张新的bitmap。我们通过设置画笔的阴影来绘制新的bitmap即可绘制出滑块的阴影
// extractAlpha拿到原bitmap的区域，只有透明度Bitmap
 mMaskShadowBitmap = mMaskBitmap.extractAlpha();