验证码，除了 12306，我还没有服过谁（图形点击、图形拖拽）

本文分享两款高保真验证码的设计，首先看一下两款验证码的效果：

图形点击验证码：

图形拖拽验证码：

如果你想体验一下或想直接在自己的项目中引用这些验证码，可点击 传送门>> 预览了解。

由于这两款验证码的核心知识点在之前的文章中已经有分享，所以本文着重分享设计思路。

图形点击验证码

首先是下方随机生成的6个待选的图形，这是通过中继器随机取出的，实现的逻辑是给中继器增加一列，命名为“ID”，每次需要挑选图形的时候，对 ID 生成随机数并赋值，然后按 ID 列重新进行排序，取出前6项即可；接着是从这6项中随机选出一个待选图形显示在上方，并将所选图形的 ID 保存在全局变量中。

关于这块的核心配置可参考文章《验证码，除了 12306，我还没有服过谁（图片验证篇）》。

接着是待选图形显示的时候随机生成角度和位置，关于这块的配置可参考文章《【Axure 教程】验证码，除了 12306，我还没有服过谁（文字点选篇）》

验证逻辑是：当点选下方的待选图形时，将点选的图形的 ID 与保存在全局变量中的待验证图形 ID 进行比较，如果两个相同，则表示点选的图形就是待验证的图形，验证通过。

图形拖拽验证码

此验证码是通过上述验证码调整交互而来，核心逻辑一致，交互改为将待验证图形拖动松开时进行验证，如果拖动结束时，待验证图形没有接触到待选图形或接触到的待选图形的 ID 与待验证图形的 ID 不一致，则将待验证图形放回原位，如果接触到且 ID 一致，则验证通过。

这里有个难点，就是关于中继器外的图形如何判断接触到中继器内的哪一个图形，做的时候实际上是反过来做，就是中继器内的每个图形不断地判断是否接触到中继器外的图形，关于这个点，我之前在《Axure 实现刮刮乐效果》中也有提到过，配置的时候，首先给中继器的图形添加一个显示事件，这个事件会不断判断光标是否接触到当前的图形，如果是，就会把当前图形的 ID 保存到全局变量中：

在拖动图形时，不断触发上述的显示事件：

这样当拖动待验证图形时，会将待验证图形的 ID 保存到全局变量，中继器内的每张图片会不断判断是否接触到光标，如果接触到，就会保存当前的 ID 到全局变量，当鼠标松开时，只需判断两个变量是否相同即可：

以上便是本文的全部内容，感谢阅读！