2023年Axure高保真教程：拖拉拽放大縮小和移動元件

Axure高保真教程：拖拉拽放大縮小和移動元件拖拉拽是設(shè)計軟件里常用的操作方式，所以今日就教大家在Axure中，如何制作一個能夠拖拉拽隨便放大縮小或者移動元件的原型模板。

一、效果展現(xiàn)

1、鼠標拖動元件的四個角，從而放大或者縮小目標元件；

2、鼠標拖動目標元件，可以移動元件位置。

原型地址：

二、制作材料

1.被拖動的對象

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

2.動態(tài)面板

我們要在元件組上方添加一個動態(tài)面板，由于只有動態(tài)面板有拖動時這個交互，動態(tài)面板的大小掩蓋下面地圖的元件組即可。

3.拖動掌握大小的四個角

我們用矩形來制作就可以了，我們以右下角為例，我們增加一個正方形的矩形，默認值顯示右方和下方的邊線，如下圖所示

左上、右上和左下也是一樣的，分別顯示左上、右上和左下的邊線。完成后將4個矩形分別放置在4個角的位置，4個矩形都要轉(zhuǎn)為動態(tài)面板，由于只有動態(tài)面板有拖動的交互，默認隱蔽。

二、交互制作

1.鼠標移入出組合時

我們先把全部元件組合在一起，鼠標移入組合時，我們就顯示4個角的矩形，鼠標移出組合時，我們就隱蔽4個角的矩形。

2.鼠標拖動4個角的矩形

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

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

這里我們還需要考慮右下角x坐標值-左上角x坐標值和左上角x坐標值-右上角x坐標值必需是一個正數(shù)，由于沒有尺寸是小于0的。所以我們在移動時要給增加一個邊界，右下角左側(cè)不能小于左上角的右側(cè)，右下角的上方，不能小于左上角的底部。

尺寸設(shè)置完之后，我們還需要考慮4個角詳細的位置，左上和右下是不用管他的，由于拖動右下角的話，左上角是不變的，右下角自然就會到達拖動的位置。那現(xiàn)在要轉(zhuǎn)變的就是左下角和右上角的坐標。我們用移動大事將他們移動到對應(yīng)位置就好了。

那究竟要移動到哪里合適呢？我們先看左下角，左下角的話，其實x坐標是不變的，變得只有y坐標，由于要跟右下角的高度全都，所以y坐標就等于右下角的y坐標值。

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

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

3.鼠標拖動動態(tài)面板的交互

鼠標拖動動態(tài)面板時，我們只需要用移動的交互，將整個組合跟隨鼠標移動即可。

這樣我們就制作完成了拖拉