原副标题：【Axure 讲义】接收者，除 12306，我还没遇过谁（绘图校正篇）
为的是避免暴力行为注册登记或食腐banlist等电脑允诺，须要校正操作员是人却是电脑，便有了接收者那个结构设计。责任编辑译者主要就如是说了如何采用 Axure 来结构设计两个静态的绘图接收者，一起来自学一下吧。
在软件结构设计中，为的是避免暴力行为注册登记或食腐banlist等电脑允诺，须要校正操作员本尊是人却是电脑，因而造就了接收者那个结构设计，目前接收者已经派生出许多的形式，包括绘图校正、微积分演算、键入文本、翻转积木等，责任编辑译者主要就如是说怎么采用 Axure 来结构设计两个静态的绘图接收者。
一、接收者外形
接收者的外形结构设计他们能各别充分发挥自己的创意设计，以下是我绘出的，只供他们参照：
可以给他们提供以下几点路子：
采用辨识和写作有一定技术难度的手写体，比如说带下压、custom或形变的一些手写体 加进阻碍因素，比如说轮廓、大背景等 增设跟大背景相近或相近的手写体色调准则就是能够尽量阻碍使用者对文本的辨识，当然，不能让使用者完全辨识不出来，要不然就丧失了它存在的象征意义。
二、接收者GB2312
常规性的绘图接收者文本主要就由大大写字母+位数组成，因而他们须要将大部份会加进的文本放在GB2312中，聚合的时候只须要从GB2312中挑选出方可。为的是方便快捷初始化，他们采用【函数初始化】来储存GB2312，在 Axure 顶端工具栏中找出【项目】，登出来之后选择【函数初始化】：
接著他们加进两个函数初始化【code_library】并输出缺省，缺省是【0-9，A-Z，a-z】的大部份字符串：
三、接收者位数
一般常见绘图接收者都是4位，现在也有一些平台为的是提升技术难度，会增加到5位或6位，为的是能够灵活控制接收者位数，他们也同样通过变量来控制位数的聚合，在【函数初始化】中添加【code_bits】，缺省是4：
四、接收者储存
他们聚合接收者的时候，并不是一下子就从GB2312中挑选出出指定位数的接收者，而是两个两个字符串挑选出出来，最终组成指定位数的接收者，在挑选出过程中，须要有两个变量来储存已经挑选出出来的字符串，所以，他们还须要两个变量，用来储存聚合的接收者，在【函数初始化】中加进【code】，无需缺省：
五、接收者聚合器
上文提到，他们须要按指定位数从GB2312中逐一挑选出字符串来组成接收者，也就是说，接收者的聚合过程是两个循环的过程，因而，他们能采用两个【静态面板】来作为接收者的聚合器，当静态面板循环的时候，按照指定的位数从GB2312中挑选出字符串（静态面板如何循环初始化可参照我之前发过的文章《【Axure 静态面板】让你的动画变成“永动机”》），所以，这里他们先在页面中拖入两个静态面板，并确保静态面板中至少有2个状态（状态中无需放置任何内容，Axure 9.0 建议将静态面板拖动到【负空间】）：
至此，他们大部份的准备工作就做完了，接下来他们就来实现接收者的聚合逻辑。
六、接收者聚合路子
首先，他们先来拆解一下聚合的步骤：
总结一下路子：
当接收者载入或被点击时，接收者聚合器【静态面板】开始循环； 聚合器循环时，判断接收者【code】的长度是否等于指定的位数【code_bits】，如果是，表示已经从GB2312【code_liabrary】中挑选出出足够字符串，这时能停止聚合器循环，并把接收者显示出来； 如果接收者的长度【code】不等于指定位数【code_bits】，表示还没挑选出出足够的字符串，那个时候就从GB2312【code_library】随机挑选出两个字符串加进到接收者【code】中，直到字符串数满足指定的位数，停止聚合器循环并将接收者显示出来。路子基本清晰了，但在动手之前，他们还须要知道那个结构设计中的两个难点，就是怎么从GB2312【code_library】中【随机】挑选出两个字符串，这里就会涉及到几个【函数表达式】：
LVAR.charAt(index)：他们能用那个函数来从GB2312【code_library】中取字符串，那个函数的作用是从字符串串【LVAR】中取出排在【index】位置的字符串，这里须要注意，【index】的索引值是从0开始的，也就是说，index = 0 表示取出第两个字符串，index = 1 表示取出第二个字符串，以此类推，最后两个字符串的 index = LVAR.length-1。 Math.random：他们能用那个函数作为上述函数的索引值【index】，随机聚合取值的索引，那个函数的作用是随机聚合0-1的小数，如果他们要随机聚合0-n的小数，他们只须要将 Math.random 乘以 n（Math.random * n） 就行了，那个 n 的取值须要确保在GB2312的长度范围内，超过GB2312的长度范围就会取不到值，所以 n = code_library.length-1 ( index 索引是从0开始，所以要减去1，否则当 n = code_library.length 时会取不到值。 Math.floor(x)：Math.random 聚合的是小数，但LVAR.charAt(index) 中的 index 必须是整数，所以他们能通过那个函数来对Math.random 聚合的小数进行取整，那个函数的作用是返回 x 的下舍整数，简单说就是将聚合的结果，只保留整数，舍去小数部分，例：Math.floor(1.23) = 1。所以要从GB2312中随机取值，完整的函数表达式就是：code_library.charAt(Math.floor(Math.random*(code_library.length-1)))。
这下，他们能开始动手进行配置了。
七、聚合接收者
首先给接收者加进点击事件，【单击时】开启接收者聚合器（静态面板）循环，循环间隔设为0毫秒方可：
接著，他们给接收者聚合器加进【状态改变时】的事件，这里须要区分两种场景：
场景1：接收者位数=指定位数，表示接收者聚合成功，他们只须要停止聚合器循环并把接收者显示出来方可：
场景2：接收者位数≠指定位数，表示接收者未聚合成功，须要从GB2312中随机挑选出两个字符串加进到接收者【code】中：
上图中后半部分的表达式上文已经解释过了，这里就不再赘述，关于为什么要在那个表达式前面加上[[code]]，这里解释一下：
假设接收者聚合器循环4次，每次从GB2312中抽出的字符串分别是1、2、3、4，如果不加[[code]]，则循环4次分别是以下4种结果：
第一次循环：1 第二次循环：2 第三次循环：3 第四次循环：4从上面4次循环的结果能看出，每次聚合之后都会给【code】重新赋值，所以【code】永远都只会有两个位数，就会陷入无限的循环中，而在前面加进[[code]]之后，4次循环的结果是：
第一次循环：1 第二次循环：12 第三次循环：123 第四次循环：1234因为每一次循环都会将之前已经聚合的【code】拼接到新聚合的【code】，再重新赋值给【code】，所以才能形成上述这种追加内容的效果，然后在第四次循环结束之后，接收者【code】长度满足指定长度，退出循环并显示接收者，接下来他们在浏览器中看看效果：
效果是对的，但是只有第一次点击有效，后面怎么点击都不会变化，哪里出了问题呢？
他们来分析一下，既然第一次点击能聚合说明随机聚合接收者的逻辑是没问题的，那问题应该是出在判断接收者位数的那个逻辑上，原来，【code】默认是空的，所以第一次点击的时候能够正常聚合，但是第二次点击的时候，因为【code】已经有值，所以不会再次聚合，所以这里他们在点击接收者时，应该先清空【code】：
这样就能确保每次点击接收者时【code】都没值，才能够正常聚合，再来看看修改后的效果：
现在还有两个问题，就是接收者在载入时就会自动聚合，但目前却是显示他们增设的默认文本，这里他们做个简单的优化，你能将接收者【单击时】的事件复制粘贴到接收者【载入时】的事件中，不过这里有一种更简单的方式，就是给接收者【载入时】加进触发接收者【单击时】的事件，简单说就是在接收者载入时自动点击自身并聚合：
刷新页面看看效果：
最后，来校正一下接收者位数控制的功能是否正常，将【code_bits】改为6，再看看效果：
跟预期效果是一样的，至此，全部讲义结束，感谢写作。
责任编辑由 @产品锦李 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
：
