中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

拖拉拽是設計軟件里常用的操作方式，本文作者分享了在Axure中制作一個能夠拖拉拽隨意放大縮小，或者移動元件的原型模板的教程，一起來學習一下吧。

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

一、效果展示

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

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

二、制作材料

1. 被拖動的對象

我們以拖動放大縮小地圖為案例，所以我們需要準備一個北京地圖的素材，我們可以用形狀畫出北京市下各區的地圖，如果有地圖素材的話，也可以直接導入svg素材，右鍵轉為形狀，再給對應區域添加填充顏色。

2. 動態面板

我們要在元件組上方添加一個動態面板，因為只有動態面板有拖動時這個交互，動態面板的大小覆蓋下面地圖的元件組即可。

3. 拖動控制大小的四個角

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

左上、右上和左下也是一樣的，分別顯示左上、右上和左下的邊線。完成后將4個矩形分別放置在4個角的位置，4個矩形都要轉為動態面板，因為只有動態面板有拖動的交互，默認隱藏。

二、交互制作

1. 鼠標移入出組合時

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

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

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

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

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

尺寸設置完之后，我們還需要考慮4個角具體的位置，左上和右下是不用管他的，因為拖動右下角的話，左上角是不變的，右下角自然就會到達拖動的位置。那現在要改變的就是左下角和右上角的坐標。我們用移動事件將他們移動到對應位置就好了。

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

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

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

3. 鼠標拖動動態面板的交互

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

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

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。