上次分享一個本專題的一個開篇，講訴了Axure原型的三個層次，即表現層、邏輯層、展示層。并給出了一個簡單的例子：音量調節。
這次將分享一個更為常見的組件：驗證碼。如下圖
先說明一下，在實際工作沒有必要像這篇文章寫的這樣去做一個如此高保真的驗證碼，是在浪費精力。做這些例子呢，主要是鍛煉自己的邏輯能力，以及對Axure的熟悉程度。當然了，做完了可以存進自己的組件庫里，需要用的時候直接拖動就能用。多么酷炫。
話不多述，直接進入正題。
分析如下：
表現層：
- 4個自由角度隨機字符
- 輸入框
- 驗證按鈕
邏輯層
if 我點擊驗證碼圖片then 圖片上字符發生隨機變化，具體變化規則是：生成4個人隨機字符，并旋轉隨機角度，背景也隨機變化
if 我輸入在輸入框的字符與驗證碼上面的圖片一致，則驗證通過
關鍵就在于生成四個隨機字符，隨機旋轉角度，隨機背景。
數據層
我們可以很簡單的假設字符就來自于26個大小寫字母與10個數字的集合，即
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
分析到這里，我們的思路是：
- 構建一個隨機字符集合，然后利用隨機函數從集合中隨機取出四個數，組成驗證碼。
- 運用Axure旋轉事件配合隨機數，達到字符旋轉隨機角度的效果。
- 至于背景圖，專業術語叫噪點圖，在百度上找一張圖，然后利用Dynamic Pannel限制顯示區域的效果，通過隨機移動來達到改變背景的效果。
進入實操
一、畫框架
拖動一個輸入框、一個動態面板、一個按鈕，調整至合適的大小。
雙擊進入動態面板，將噪點圖放到里面去
這樣就實現了噪點圖的局部顯示：
然后我們在動態面板的onclick中添加move事件：
函數是
[[Math.random().toFixed(2)*-100]]
原理解釋：
Math.random()生成0-1隨機數，toFixed(2)保留2位小數，乘以-100是因為Axure的坐標軸的原點是在左上角，則圖片要移動則是變成負數。這邊即隨機將噪點圖片移動1-100個點。
驗證碼生成
這里直接將邏輯層與數據層一起寫了。
可以用設置變量的形式，但是這個又涉及到其他知識，故我們這里直接采用一種取巧的方式，把字符集合存儲在標簽中。
拖動四個標簽在驗證碼背景（放到動態面板里面）上，表示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個隨機字符都是同樣的函數。在動態面板的onclick中添加。
到這一步，已經可以做到點擊驗證碼隨機生成4個字符了。為了逼真一點，我們再加上隨機旋轉函數。
很簡單，設置旋轉角度為1-60的隨機數即可。公式為
[[Math.random()*60]]
好了，最后把字符集合標簽設為隱藏，最后的效果就出來了。
后續可以在頁面onload事件中把動態面板的onclick事件粘貼進去，這樣加載時候就是隨機字符了。
如果要做驗證的話，只要寫一個函數，拼接4個隨機字符，判斷與文本框輸入是否相等即可。這邊不在討論范圍。本文僅演示驗證碼高保真驗證碼生成。
