拖拉拽是設(shè)計(jì)軟件里常用的操作方式，本文作者分享了在Axure中制作一個(gè)能夠拖拉拽隨意放大縮小，或者移動(dòng)元件的原型模板的教程，一起來學(xué)習(xí)一下吧。

拖拉拽是設(shè)計(jì)軟件里常用的操作方式，所以今天作者就教大家在Axure中，如何制作一個(gè)能夠拖拉拽隨意放大縮小或者移動(dòng)元件的原型模板。

一、效果展示

1、鼠標(biāo)拖動(dòng)元件的四個(gè)角，從而放大或者縮小目標(biāo)元件；

2、鼠標(biāo)拖動(dòng)目標(biāo)元件，可以移動(dòng)元件位置。

二、制作材料

1. 被拖動(dòng)的對(duì)象

我們以拖動(dòng)放大縮小地圖為案例，所以我們需要準(zhǔn)備一個(gè)北京地圖的素材，我們可以用形狀畫出北京市下各區(qū)的地圖，如果有地圖素材的話，也可以直接導(dǎo)入svg素材，右鍵轉(zhuǎn)為形狀，再給對(duì)應(yīng)區(qū)域添加填充顏色。

2. 動(dòng)態(tài)面板

我們要在元件組上方添加一個(gè)動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板有拖動(dòng)時(shí)這個(gè)交互，動(dòng)態(tài)面板的大小覆蓋下面地圖的元件組即可。

3. 拖動(dòng)控制大小的四個(gè)角

我們用矩形來制作就可以了，我們以右下角為例，我們?cè)黾右粋€(gè)正方形的矩形，默認(rèn)值顯示右方和下方的邊線，如下圖所示

左上、右上和左下也是一樣的，分別顯示左上、右上和左下的邊線。完成后將4個(gè)矩形分別放置在4個(gè)角的位置，4個(gè)矩形都要轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板有拖動(dòng)的交互，默認(rèn)隱藏。

二、交互制作

1. 鼠標(biāo)移入出組合時(shí)

我們先把所有元件組合在一起，鼠標(biāo)移入組合時(shí)，我們就顯示4個(gè)角的矩形，鼠標(biāo)移出組合時(shí)，我們就隱藏4個(gè)角的矩形。

2. 鼠標(biāo)拖動(dòng)4個(gè)角的矩形

這里我們以右下角為例，其余的3個(gè)角同理。

鼠標(biāo)拖動(dòng)右下角時(shí)，其實(shí)我們就是要把動(dòng)態(tài)面板和下面的目標(biāo)元件放大或者縮小，我們用設(shè)置尺寸的交互就可以實(shí)現(xiàn)了，那么如何確定尺寸呢？我們可以通過左上角的坐標(biāo)，以及右下角的坐標(biāo)計(jì)算得出，其實(shí)寬度就是右下角x坐標(biāo)值-左上角x坐標(biāo)值，高度就等于左上角x坐標(biāo)值-右上角x坐標(biāo)值，這樣尺寸就出來了。

這里我們還需要考慮右下角x坐標(biāo)值-左上角x坐標(biāo)值和左上角x坐標(biāo)值-右上角x坐標(biāo)值必須是一個(gè)正數(shù)，因?yàn)闆]有尺寸是小于0的。所以我們?cè)谝苿?dòng)時(shí)要給增加一個(gè)邊界，右下角左側(cè)不能小于左上角的右側(cè)，右下角的上方，不能小于左上角的底部。

尺寸設(shè)置完之后，我們還需要考慮4個(gè)角具體的位置，左上和右下是不用管他的，因?yàn)橥蟿?dòng)右下角的話，左上角是不變的，右下角自然就會(huì)到達(dá)拖動(dòng)的位置。那現(xiàn)在要改變的就是左下角和右上角的坐標(biāo)。我們用移動(dòng)事件將他們移動(dòng)到對(duì)應(yīng)位置就好了。

那到底要移動(dòng)到哪里合適呢？我們先看左下角，左下角的話，其實(shí)x坐標(biāo)是不變的，變得只有y坐標(biāo)，因?yàn)橐蚁陆堑母叨纫恢?，所以y坐標(biāo)就等于右下角的y坐標(biāo)值。

右上角也是同樣道理，他是高度不變，就是y坐標(biāo)值不變，變得只是左右的位置，這個(gè)位置和右下角的位置是一樣的，所以就是右下角的x坐標(biāo)值。

這樣我們就完成了右下角拖動(dòng)放大縮小的交互了，其他三個(gè)角的原理也是一樣，大家可以自行完成。

3. 鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板的交互

鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板時(shí)，我們只需要用移動(dòng)的交互，將整個(gè)組合跟隨鼠標(biāo)移動(dòng)即可。

這樣我們就制作完成了拖拉拽放大縮小和移動(dòng)元件的原型模板了。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。