圖片縮放是日常常用的操作之一，這種操作如何在Axure中模擬和實現(xiàn)？本文作者分享了一個簡單的方法，大家可以學(xué)習(xí)下。

最近在做一個進(jìn)階知識圖譜原型，功能非常有趣，加入了很多好玩的功能。比如可以通過鼠標(biāo)拖動來在任意方向上改變圖片的長寬尺寸：

體驗地址：https://usrsky.axshare.com/#id=uvavuf&g=1

一、教程

首先，先把元件結(jié)構(gòu)放好：

因為需要鼠標(biāo)拖動時移動圖片位置，所以最外層是一個動態(tài)面板，同時把“Fit Content(適應(yīng)內(nèi)容)”勾選上。

里面放1個圖片邊框(Frame)以及8個拖放動態(tài)面板(默認(rèn)長寬為8px*8px)，命名可按自己習(xí)慣，我喜歡用n/w/s/e來，把這9個元件組合到一起(Resizer)：

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

還有一張圖片(Image)最在最底層，添加“尺寸改變時”交互（注意：這里1px的微調(diào)是根據(jù)frame的邊框厚度度定制的）：

并且在“載入時”進(jìn)行單次觸發(fā)。然后就可以編輯8個拖放動態(tài)面板的交互了（注意每個錨點位置）：

nw元件交互：

n元件交互：

ne元件交互：

w元件交互：

e元件交互：

sw元件交互：

s元件交互：

se元件交互：

這樣，一個像可以使用鼠標(biāo)拖放在任意方向調(diào)整圖片大小的功能就做好啦。趕緊試試吧。