一些網(wǎng)站為了驗(yàn)證用戶的行為，使用手動拼圖的方式。今天我們來介紹一種實(shí)現(xiàn)這樣效果的控件。步驟一：創(chuàng)建拼圖組件首先新建一個拼圖圖片、箭頭和兩個矩形。設(shè)置其中一個矩形的尺寸為48*48，填充色為#C6E6E

一些網(wǎng)站為了驗(yàn)證用戶的行為，使用手動拼圖的方式。今天我們來介紹一種實(shí)現(xiàn)這樣效果的控件。

步驟一：創(chuàng)建拼圖組件

首先新建一個拼圖圖片、箭頭和兩個矩形。設(shè)置其中一個矩形的尺寸為48*48，填充色為#C6E6E8，取消邊線顯示，并將其放置在箭頭圖標(biāo)與矩形正中間。然后選中箭頭圖片和該矩形，轉(zhuǎn)化為動態(tài)面板，并命名為“拉桿”。

步驟二：設(shè)置滑塊標(biāo)簽

接下來創(chuàng)建一個尺寸為320*50的矩形，命名為“l(fā)able”，并設(shè)置內(nèi)容為“向右滑動滑塊填充拼圖”。將“動態(tài)面板：拉桿”置于“l(fā)able”的左邊，并按以下布局組合各控件。

步驟三：添加拖動交互動作

在“動態(tài)面板：拉桿”的拖動時交互動作中，設(shè)置以下動作：

1. 移動“動態(tài)面板：欄桿”，移動方式為水平拖動，并設(shè)置范圍。

2. 將“元件：lable”設(shè)為局部變量LVAR1，使“動態(tài)面板：欄桿”右側(cè)小于LVAR1.right。

3. 將“元件：lable”設(shè)為局部變量LVAR1，使“動態(tài)面板：欄桿”左側(cè)大于LVAR1.x。

步驟四：添加移動交互動作

在“動態(tài)面板：拉桿”的移動時交互動作中，設(shè)置以下動作：

1. 當(dāng)“動態(tài)面板：拉桿”移動時，圖片跟隨移動。

步驟五：添加鼠標(biāo)松開交互動作

在“動態(tài)面板：拉桿”的鼠標(biāo)松開時交互動作中，設(shè)置以下動作：

1. 等待1500毫秒，將“動態(tài)面板：拉桿”移動到初始位置。

2. 將“元件：lable”設(shè)為局部變量LVAR1，使“動態(tài)面板：欄桿”的X值為LVAR1.x。

3. 將“動態(tài)面板：欄桿”的Y值設(shè)為this.y。

4. 等待100毫秒，將“矩形：lable”的內(nèi)容值設(shè)為“向右滑動滑塊填充拼圖”。

效果展示與完善

至此，我們已經(jīng)完成了拖動拼圖的交互動作。現(xiàn)在可以先預(yù)覽一下效果，確保一切正常。稍后，我們可以進(jìn)一步完善驗(yàn)證功能。敬請期待！

投票與點(diǎn)贊

如果您覺得這篇文章有幫助，請給我們投個票并加個贊吧！