微信号:guolin_blog

介绍:Android技术分享平台,在这里不仅可以学到各种Android相关的最新技术,还可以将你自己的技术总结分享给其他人,每周定期更新.

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

2017-01-04 08:00 张旭童

今日科技快讯

上个月,谷歌在应用商店推出了一款重新设计的谷歌键盘(Google keyboard)APP,更名为Gboard,带有新的功能和几项升级。而近日,这款应用的下载量已经突破5亿,创下了应用商店的下载新记录。Gboard是一款全功能键盘应用,支持超过120种语言输入,能在多种语言间随意切换。另外,它还具备自动更正功能以及手动在个人词典中添加新单词的功能。同样处于“5亿下载量应用家族”的,还包括 Google Photos、Dropbox、YouTube 和 Skype。

作者简介

本篇来自 老老司机(第六篇了) 张旭童 的投稿。一直给大家带来实战文章的他,今天也毫无例外,分享了如何实现滑动验证码功能。希望能帮助有需要的朋友。

张旭童 的博客地址:

http://blog.csdn.net/zxt0601

概述

上周一总监让我研究一波滑动验证码,说项目可能会上。我想了一下好像在斗鱼、淘宝都见过,结果下了这两个app,发现怎么点也出不来滑动验证码。于是,我就去web端斗鱼看了一下,果然,每次登陆都会出现验证码。

好吧,那我们这次的目标就定为 在 Android端 app上,自定义View,仿一个web端滑动验证码吧。

(后话,做到后面发现我有点蠢了,我应该直接模仿app端的,很多效果在web端应该很好实现 ,但是在Android端就不那么好整了。,例如验证成功的白光扫过动画,如下图。在Android上实现起来就不太容易,有些效果还是不如web端酷炫。)

(图很渣,也忽略底下的SeekBar,这不是重点) 

一些动画,效果录不出来了,大家可以去斗鱼web端看一下,然后下载Demo看一下,效果还是可以的。

我们的Demo和web端基本上一样。那么本控件包含不仅包含以下功能:

  • 随机区域起点(左上角x,y)生成一个验证码阴影。

  • 验证码拼图 凹凸图形会随机变换。

  • 验证码区域宽高可自定义。

  • 抠图验证码区域,绘制一个用于联动滑动的验证码滑块。

  • 验证失败,会闪烁几下然后回到原点。

  • 验证成功,会有白光扫过的动画。

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

  • 控件继承自 ImageView。理由:

1. 如果放在项目中用,验证码图片希望可以是接口返回。ImageView 以及其子类支持花式加载图片。

2. 继承自 ImageView,绘制图片本身不用我们干预,也不用我们操心 scaleType,节省很多工作。

  • 在 onSizeChanged() 方法中生成 和 控件宽高相关的属性值:

1. 初始化时随机生成验证码区域起点

2. 生成验证码区域Path

3. 生成滑块Bitmap

  • onDraw() 时,依次绘制:

1. 验证码阴影

2. 滑块

核心工作是以上,可是实现起来还是有很多坑的,下面一步一步来吧。

验证码区域的生成

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

  • 在 attrs.xml 定义属性

  • 在View的构造函数里获取 attrs 属性

  • 一些 Paint,Path 的初始化工作

首先思考,验证码区域包含:

  • 绘制在图片上的验证码阴影

  • 可移动的验证码滑块

生成验证码阴影

我们用 Path 存储验证码区域,所以这一步最重要是生成验证码区域的 Path。查看竞品(斗鱼web端)如下:

so,我们这里要绘制一个矩形+四边可能会有随机的凹凸,凹凸可以用半圆来替代。我们如下编写:

代码配有注释,gap 是指凹凸的起点和顶点的距离。


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


这里用的是推导之后的公式,没推导前的也在注释里。

简单说,先计算出中点和半径,利用三次贝塞尔曲线绘制一个圆(cgap1 都是和三次贝塞尔曲线相关)。关于三次贝塞尔曲线就不展开了,网上很多资料,我也是现学的。

这里关于绘制验证码阴影 Path,还有一段曲折心路历程,绘制出来的效果如下:

心路历程(可以不看):

验证码 Path,猛的一看,似乎很简单,不就是 一个矩形 +上 四个边可能出现的凹凸嘛。

凹凸的话,我们就是绘制一个半圆好了。利用 Path的lineTo()+addCircle() 似乎可以很轻松的实现?

最开始我是这么做的,结果发现画出来的 Path 是 多段的Path,闭合后,无法形成一个完整阴影区域。更无法用于下一步验证码滑块bitmap的生成。

好,看来是 addCircle() 的锅,导致了 Path 被分割成多段。那我用 arcTo() 好了,结果发现 arcTo() 不像 addCircle() 那样可以设置绘图的方向(顺时针,逆时针),这当时可把我难住了,因为不能逆时针的话,上、右边的凹就画不出来。所以我放弃了,我转用贝塞尔曲线绘制这个凹凸。

文章写到这里,我突然发现自己智障了,sweepAngle 传入负值不就可以逆时针了吗。如:arcTo(oval, 180, -180);

所以说写博客是有很大好处的,写博客时大脑也是高速旋转,因为生怕写出错误,一是误导别人,二是丢人。大脑高速运转说不定就想通了以前想不通的问题。

于是我就脑残的用 sin+二阶贝尔赛曲线 去绘制这个半圆了,为什么用它们呢?因为当初我绘制波浪滚动的时候用的 sin函数+二阶贝塞尔 模拟波浪,于是我就惯性思维的也这么解决了。结果呢?绘制出来的凹凸不够圆啊,sin函数还是比不过圆是不是。于是我就走上了用三阶贝塞尔曲线模拟圆的路。

看来我当初写这一块代码的时候,脑子确实不太清醒,不过也有收获。又复习了一遍 Path 的几个函数和贝塞尔曲线。

抠图:验证码滑块的生成

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


其实这里我也走了一些曲折的路,我先是用 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,都是和动画相关的,代码如下:


mPaint 如下定义: 所以绘制出阴影也有一些阴影效果。


值得说的就是,配合滑块滑动,是利用 mDragerOffset,默认是0,滑动时 mDragerOffset 增加,滑块右移,反之亦然。

验证成功的白光扫过动画,是利用 canvas.translate() 做的,mSuccessPath 和 mSuccessPaint 如下:


滑动、验证、动画

上一节完成后,我们的滑动验证码View已经可以正常绘制出来了,现在我们为它增加一些方法,让它可以联动滑动、验证功能和动画。

联动滑动

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

校验

校验的话,需要引入一个回调接口:



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

动画

动画里要用到宽高,所以它是在 onSizeChanged() 方法里被调用的。

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

Demo

这一节,我们联动 SeekBar 滑动起来。xml如下:


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

总结

代码传送门,喜欢的话,随手点个star:

https://github.com/mcxtzhang/SwipeCaptcha

包含完整的Demo源码和SwipeCaptchaView。

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

本例完全由前端实现验证码生成、验证功能,是因为:

1. 练习自定义VIew,自己全部实现抠图 验证 绘制,感觉很酷。

2. 我不会做后台,手动微笑。

核心点:

1. 不规则图形Path的生成。

2. 指定Path对Bitmap抠图,抗锯齿。

3. 适配ImageView的ScaleType。

4. 成功、失败的动画

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

 
郭霖 更多文章 FreeRadioGroup一一淡出、自由拖动、自动贴边 2016年终总结,新的里程和新的开始 Android多进程使用场景 CycleRotationView:自定义控件之轮播图 直播写代码,今晚8点见!
猜您喜欢 译见|2015-2016 五大云计算战略趋势报告 有赞有发展 【译】S.O.L.I.D 原则在 Go 中的应用(上) 0x0E 大数据职位,数据场技能(上) 大数据时代的“数字地球”