验证代码的方法有很多种。 滑块验证码相信大家都很熟悉。 今天我们就用.0来模拟制作滑块验证码。

预览

1. 组件准备

1.添加三个动态面板，分别用于存放滚圈、验证状态和验证码背景图片。 分别命名为“拖拽球”、“状态”、“验证码背景”。 “验证码背景”动态面板隐藏；

2、“拖球”动态面板添加图片；

3、“状态”动态面板设置三种状态，分别是初始状态、错误状态和正确状态；

4、添加一个名为“Drag Limit”的矩形，用于限制“拖动球”的起始和结束坐标；

5. 添加初始状态提示的文字标签。 将其命名为“初始提示内容”并将文本标签放置在“拖动限制”上方；

6、在“验证码背景”动态面板中放置一个动态面板，用于存储随机图案间隙，命名为“滑块标准”；

7、在“验证码背景”动态面板中放置一个矩形框，限制随机出现的图案间隙的位置，并命名为“边界”

8、最后添加一个动态面板，用于存放滑块，命名为“”，初始是隐藏的；

9、注意：“ ”动态面板和“”动态面板中放置的图案大小和样式必须一致。

2. 添加用例

用例很少。 只能在“拖拽球”动态面板上设置。 具体设置如下：

1、首先，当鼠标移入“拖球”动态面板时，需要显示“验证码背景”动态面板和“滑块”动态面板，并且需要随机出现“滑块标准”动态面板，需要控制“ ”动态面板。 它不会出现在“边框”之外，而且为了方便“滑块”出现，最好限制“滑块标准”动态面板出现在“边框”的右半部分。 同时显示“”动态面板，并将“”动态面板的x坐标设置为“Drag Ball”的x坐标，并设置“”动态面板的y坐标到“滑块标准”动态面板。 y 坐标；

这个时候会有两种情况，一种是之前有过操作，而且是正确的，另一种是初始状态或者之前有过操作，但是是错误的，那么我们就要根据“状态”动态面板的状态；

初始状态或之前已执行过操作，但发生错误。 按照步骤1中的设置，如图：

② 如果操作正确，则只需显示“验证码后台”动态面板即可；

2、鼠标移出时，很简单，隐藏“验证码背景”和“滑块”动态面板即可；

3、拖动“拖球”动态面板时，首先需要隐藏“初始提示内容”，然后让“拖球”跟随鼠标移动，同时让“滑块”动态面板和“拖球》》动态面板同步滑动；

4、拖动完成后，判断“”动态面板和“ ”动态面板是否重叠（因为完全重叠很难被认为是正确的，所以即使这里设置了一定的错误，验证也会通过） ，如果重叠，则将“状态”动态面板设置为“验证通过”； 如果不重叠，则将“状态”动态面板设置为“验证错误”，并将“拖拽球”动态面板恢复到原来的位置；

3. 预览

好吧，让我们预览一下。