2023年【Axure 教程】验证码除了 12306我还没有服过谁（滑动拼图篇）

上传人：文*** IP属地：广东上传时间：2023-04-21 格式：DOCX 页数：4 大小：2.36MB 积分：6 举报 版权申诉

全文预览已结束

 下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

【Axure教程】验证码，除了12306，我还没有服过谁（滑动拼图篇）先看一下效果（传送门)：

一、功能要点

缺块的位置是随机的拼图需依据缺块的位置生成对应区域的预览图拖动时，假如不符合验证胜利的条件，需要将拼图放回起始位置接下来我们就来动手做一做。

二、外观

首先最上面是提示条和刷新按钮，然后是验证码主体，还需要一个验证胜利的提示：

验证码主体整体是一个动态面板，里面是这样的：

背景图是一张【图片】；缺块是一个【矩形】，填充了黑色，设置了50%的透亮度；拼图是一个【动态面板】，里面放了一张跟背景图完全一样的图片，这里动态面板肯定要设置与缺块一样的大小，不能让动态面板自适应内容。

然后会用到以下全局变量：

Tolerance：容差，用户拖拽的时候，不肯定刚好完全将拼图与缺块对应上，这个参数是用来掌握允许的差距，比如默认值为2，表示相差±2个像素也是认为拼图胜利的；Vldt_Result：验证结果，等于True时表示验证码验证胜利。接下来我们开头写规律。

三、缺块掌握

缺块只需要在【载入时】，生成一个在【背景图】范围内的随机位置，并将其【移动】到该位置即可，其中【LVAR2】是背景图，减去自身的宽高是为了避开缺块移到背景外面去：

四、拼图生成

首先是需要依据缺块的位置生成自身的位置和拼图预览图：

由于我们是水平拖动，所以拼图的x值可以保持不变，y值跟随缺块的y值即可；拼图预览图并不简单，实际上就是移动动态面板中的图片，使对应区域的图片显示出来，不过这需要一点想象力。

假设缺块在背景图上的起始位置是（0，0），假如移动到（20，20），则拼图预览图需要移动到（-20，-20），显示出来的图片才会刚好跟缺块遮挡的图片一样。

接着再来给拼图这个【动态面板】添加一个【跟随水平拖动】的大事即可：

最终是在停止拖动时，进行校验：

假如拼图没有接触到缺块，或者两者之间的距离（通过两个元件的x值的差值来推断）不在设定的容差内，则将拼图放回原位，否则的话，表示验证胜利，将变量【Vldt_Result】设置为True，并显示验证胜利提示。

五、刷新功能

最终是刷新功能，很简洁，就是触发缺块和拼图的载入大事，重置验证结果变量值以及隐蔽验证胜利的提示即可：

验证码系列教程总共4篇，本篇教程是最终一

人人文库> 全部分类> 应用文书 > 资格认证

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。