上次分享一個本專題的一個開篇颗圣，講訴了Axure原型的三個層次屁使，即表現層、邏輯層蛮寂、展示層洁段。并給出了一個簡單的例子：音量調節(jié)共郭。
這次將分享一個更為常見的組件：驗證碼疾呻。如下圖
先說明一下除嘹，在實際工作沒有必要像這篇文章寫的這樣去做一個如此高保真的驗證碼，是在浪費精力岸蜗。做這些例子呢璃岳，主要是鍛煉自己的邏輯能力悔捶，以及對Axure的熟悉程度单芜。當然了，做完了可以存進自己的組件庫里洲鸠，需要用的時候直接拖動就能用。多么酷炫绢淀。
話不多述瘾腰，直接進入正題。
分析如下：
表現層：
- 4個自由角度隨機字符
- 輸入框
- 驗證按鈕
邏輯層
if 我點擊驗證碼圖片then 圖片上字符發(fā)生隨機變化蹋盆，具體變化規(guī)則是：生成4個人隨機字符，并旋轉隨機角度义锥，背景也隨機變化
if 我輸入在輸入框的字符與驗證碼上面的圖片一致岩灭，則驗證通過
關鍵就在于生成四個隨機字符，隨機旋轉角度柱恤，隨機背景找爱。
數據層
我們可以很簡單的假設字符就來自于26個大小寫字母與10個數字的集合，即
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
分析到這里车摄，我們的思路是：
- 構建一個隨機字符集合吮播，然后利用隨機函數從集合中隨機取出四個數，組成驗證碼意狠。
- 運用Axure旋轉事件配合隨機數，達到字符旋轉隨機角度的效果闷板。
- 至于背景圖，專業(yè)術語叫噪點圖遮晚，在百度上找一張圖，然后利用Dynamic Pannel限制顯示區(qū)域的效果巩梢，通過隨機移動來達到改變背景的效果艺玲。
進入實操
一饭聚、畫框架
拖動一個輸入框、一個動態(tài)面板秒梳、一個按鈕酪碘，調整至合適的大小。
雙擊進入動態(tài)面板徙赢，將噪點圖放到里面去
這樣就實現了噪點圖的局部顯示：
然后我們在動態(tài)面板的onclick中添加move事件：
函數是
[[Math.random().toFixed(2)*-100]]
原理解釋：
Math.random()生成0-1隨機數狡赐，toFixed(2)保留2位小數钦幔，乘以-100是因為Axure的坐標軸的原點是在左上角，則圖片要移動則是變成負數鲤氢。這邊即隨機將噪點圖片移動1-100個點卷玉。
驗證碼生成
這里直接將邏輯層與數據層一起寫了。
可以用設置變量的形式，但是這個又涉及到其他知識东抹，故我們這里直接采用一種取巧的方式，把字符集合存儲在標簽中食茎。
拖動四個標簽在驗證碼背景（放到動態(tài)面板里面）上，表示4個隨機字符附迷。再拖動一個標簽放在下面哎媚，作為字符串的存儲集合。如圖
候選字符里面總共有26+26+10=62個字符
我們從這62個字符中隨機選取需要用到以下公式稻据。
[[LVAR1.charAt((Math.random()*62).toFixed(0))]]
LVAR1指向字符集合买喧。charAt()函數返回字符串中指定位置的字符。Math.random()返回0-1隨機數淤毛，乘以62則變成生成1-62的隨機數低淡，toFixed（0）函數將結果保留0位小數，即取整查牌。
4個隨機字符都是同樣的函數。在動態(tài)面板的onclick中添加兽泣。
到這一步胁孙，已經可以做到點擊驗證碼隨機生成4個字符了。為了逼真一點稠鼻，我們再加上隨機旋轉函數狂票。
很簡單，設置旋轉角度為1-60的隨機數即可。公式為
[[Math.random()*60]]
好了周霉，最后把字符集合標簽設為隱藏亚皂，最后的效果就出來了。
后續(xù)可以在頁面onload事件中把動態(tài)面板的onclick事件粘貼進去狞谱，這樣加載時候就是隨機字符了禁漓。
如果要做驗證的話，只要寫一個函數与斤，拼接4個隨機字符荚恶，判斷與文本框輸入是否相等即可。這邊不在討論范圍食寡。本文僅演示驗證碼高保真驗證碼生成廓潜。
