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

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

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

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

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

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

步驟三：添加拖動(dòng)交互動(dòng)作

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

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

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

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

步驟四：添加移動(dòng)交互動(dòng)作

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

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

步驟五：添加鼠標(biāo)松開(kāi)交互動(dòng)作

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

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

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

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

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

效果展示與完善

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

投票與點(diǎn)贊

如果您覺(jué)得這篇文章有幫助，請(qǐng)給我們投個(gè)票并加個(gè)贊吧！