在軟件設(shè)計(jì)中，為了防止暴力注冊(cè)或爬蟲(chóng)爬取等機(jī)器請(qǐng)求，需要驗(yàn)證操作者本尊是人還是機(jī)器，因此催生了驗(yàn)證碼這個(gè)設(shè)計(jì)。目前驗(yàn)證碼已經(jīng)衍生出許多的形式，包括圖形驗(yàn)證、數(shù)學(xué)運(yùn)算、點(diǎn)選文字、滑動(dòng)拼圖等，本文作者主要介紹怎么使用 Axure 來(lái)設(shè)計(jì)一個(gè)動(dòng)態(tài)的滑動(dòng)拼圖驗(yàn)證碼。

先看一下效果（傳送門(mén)>>)：

一、功能要點(diǎn)

1. 缺塊的位置是隨機(jī)的
2. 拼圖需根據(jù)缺塊的位置生成對(duì)應(yīng)區(qū)域的預(yù)覽圖
3. 拖動(dòng)時(shí)，如果不符合驗(yàn)證成功的條件，需要將拼圖放回起始位置

接下來(lái)我們就來(lái)動(dòng)手做一做。

二、外觀

首先最上面是提示條和刷新按鈕，然后是驗(yàn)證碼主體，還需要一個(gè)驗(yàn)證成功的提示：

驗(yàn)證碼主體整體是一個(gè)動(dòng)態(tài)面板，里面是這樣的：

背景圖是一張【圖片】；缺塊是一個(gè)【矩形】，填充了黑色，設(shè)置了50%的透明度；拼圖是一個(gè)【動(dòng)態(tài)面板】，里面放了一張跟背景圖完全一樣的圖片，這里動(dòng)態(tài)面板一定要設(shè)置與缺塊一樣的大小，不能讓動(dòng)態(tài)面板自適應(yīng)內(nèi)容。

然后會(huì)用到以下全局變量：

• Tolerance：容差，用戶拖拽的時(shí)候，不一定剛好完全將拼圖與缺塊對(duì)應(yīng)上，這個(gè)參數(shù)是用來(lái)控制允許的差距，比如默認(rèn)值為2，表示相差±2個(gè)像素也是認(rèn)為拼圖成功的；
• Vldt_Result：驗(yàn)證結(jié)果，等于 True 時(shí)表示驗(yàn)證碼驗(yàn)證成功。

接下來(lái)我們開(kāi)始寫(xiě)邏輯。

三、缺塊控制

缺塊只需要在【載入時(shí)】，生成一個(gè)在【背景圖】范圍內(nèi)的隨機(jī)位置，并將其【移動(dòng)】到該位置即可，其中【LVAR2】是背景圖，減去自身的寬高是為了避免缺塊移到背景外面去：

四、拼圖生成

首先是需要根據(jù)缺塊的位置生成自身的位置和拼圖預(yù)覽圖：

由于我們是水平拖動(dòng)，所以拼圖的 x 值可以保持不變，y 值跟隨缺塊的 y 值即可；拼圖預(yù)覽圖并不復(fù)雜，實(shí)際上就是移動(dòng)動(dòng)態(tài)面板中的圖片，使對(duì)應(yīng)區(qū)域的圖片顯示出來(lái)，不過(guò)這需要一點(diǎn)想象力。

假設(shè)缺塊在背景圖上的起始位置是（0，0），如果移動(dòng)到（20，20），則拼圖預(yù)覽圖需要移動(dòng)到（-20，-20），顯示出來(lái)的圖片才會(huì)剛好跟缺塊遮擋的圖片一樣。

接著再來(lái)給拼圖這個(gè)【動(dòng)態(tài)面板】添加一個(gè)【跟隨水平拖動(dòng)】的事件即可：

最后是在停止拖動(dòng)時(shí)，進(jìn)行校驗(yàn)：

如果拼圖沒(méi)有接觸到缺塊，或者兩者之間的距離（通過(guò)兩個(gè)元件的 x 值的差值來(lái)判斷）不在設(shè)定的容差內(nèi)，則將拼圖放回原位，否則的話，表示驗(yàn)證成功，將變量【Vldt_Result】設(shè)置為 True，并顯示驗(yàn)證成功提示。

五、刷新功能

最后是刷新功能，很簡(jiǎn)單，就是觸發(fā)缺塊和拼圖的載入事件，重置驗(yàn)證結(jié)果變量值以及隱藏驗(yàn)證成功的提示即可：

驗(yàn)證碼系列教程總共4篇，本篇教程是最后一篇，如果本教程對(duì)你有幫助，歡迎點(diǎn)擊“收藏”或“喜歡”，其他3篇驗(yàn)證碼教程歡迎點(diǎn)擊我的主頁(yè)查看，感謝閱讀。