Axure通过鼠标拖动在任意方向上调整图片大小

最近在做一个进阶知识图谱原型,功能非常有趣,加入了很多好玩的功能。比如可以通过鼠标拖动来在任意方向上改变图片的长宽尺寸:

Axure通过鼠标拖动在任意方向上调整图片大小

体验地址:https://usrsky.axshare.com/#id=uvavuf&g=1

一、教程

首先,先把元件结构放好:

Axure通过鼠标拖动在任意方向上调整图片大小

因为需要鼠标拖动时移动图片位置,所以最外层是一个动态面板,同时把“Fit Content(适应内容)”勾选上。

里面放1个图片边框(Frame)以及8个拖放动态面板(默认长宽为8px*8px),命名可按自己习惯,我喜欢用n/w/s/e来,把这9个元件组合到一起(Resizer):

还有一张图片(Image)最在最底层,添加“尺寸改变时”交互(注意:这里1px的微调是根据frame的边框厚度度定制的):

Axure通过鼠标拖动在任意方向上调整图片大小

并且在“载入时”进行单次触发。然后就可以编辑8个拖放动态面板的交互了(注意每个锚点位置):

nw元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

n元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

ne元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

w元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

e元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

sw元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

s元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

se元件交互:

Axure通过鼠标拖动在任意方向上调整图片大小

这样,一个像可以使用鼠标拖放在任意方向调整图片大小的功能就做好啦。赶紧试试吧。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部