Axure通過鼠標拖動在任意方向上調(diào)整圖片大小
圖片縮放是日常常用的操作之一,這種操作如何在Axure中模擬和實現(xiàn)?本文作者分享了一個簡單的方法,大家可以學習下。
最近在做一個進階知識圖譜原型,功能非常有趣,加入了很多好玩的功能。比如可以通過鼠標拖動來在任意方向上改變圖片的長寬尺寸:
體驗地址:https://usrsky.axshare.com/#id=uvavuf&g=1
一、教程
首先,先把元件結(jié)構(gòu)放好:
因為需要鼠標拖動時移動圖片位置,所以最外層是一個動態(tài)面板,同時把“Fit Content(適應內(nèi)容)”勾選上。
里面放1個圖片邊框(Frame)以及8個拖放動態(tài)面板(默認長寬為8px*8px),命名可按自己習慣,我喜歡用n/w/s/e來,把這9個元件組合到一起(Resizer):
還有一張圖片(Image)最在最底層,添加“尺寸改變時”交互(注意:這里1px的微調(diào)是根據(jù)frame的邊框厚度度定制的):
并且在“載入時”進行單次觸發(fā)。然后就可以編輯8個拖放動態(tài)面板的交互了(注意每個錨點位置):
nw元件交互:
n元件交互:
ne元件交互:
w元件交互:
e元件交互:
sw元件交互:
s元件交互:
se元件交互:
這樣,一個像可以使用鼠標拖放在任意方向調(diào)整圖片大小的功能就做好啦。趕緊試試吧。
本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發(fā)揮!