axure商城

axure教程之图片拖动放大缩小

大家好,我是axure大马猴,今天给大家带来一个拖动图片可以改变大小尺寸的教程。

教程很简单的,几步就搞定了。

浏览地址:https://5crdyy.axshare.com

动态效果演示:

axure教程之图片拖动放大缩小

教程开始:

1、首先准备元件,两个文本标签分别起名字width、height(用于获取图片的宽度跟高度),一张图片(转换为动态面板)。

如图:

axure教程之图片拖动放大缩小

2、两个文本标签,分别载入时候获取图片的宽度即width、高度height,然后隐藏。

如图:

axure教程之图片拖动放大缩小

3、图片转为动态面板后,设定事件动态面板拖动时,设置图片的宽度=文本标签width+TotalDragX(这个函数的意思是:鼠标指针拖动元件从开始到结束的X轴移动距离。)设置图片的高度=文本标签height+TotalDragY(意思是:鼠标指针拖动元件从开始到结束的Y轴移动距离)。

如图:

axure教程之图片拖动放大缩小

4、继续设定动态面板事件,拖动结束时,设置文本标签width=当前图片的宽度,设置文本标签height=当前图片的高度。

如图:

axure教程之图片拖动放大缩小

总结:拖动图片改变尺寸不难,大家熟练掌握TotalDragX、TotalDragY指针函数即可。

给TA打赏
共{{data.count}}人
人已打赏
基础教程

Axure RP 9 订阅版授权激活教程

2020-8-11 16:59:32

基础教程

Axure在浏览器中预览时文字大小错误失效的解决办法

2021-1-9 17:18:31

axure商城
8 条回复 A文章作者 M管理员
  1. TinrayYAO

    按教程操作,出现的效果却是图片不能无限拉大,拖动的尺寸最大值不能超出图片的原尺寸大小

  2. 小杨pm

    能不能用axure9出点教程

    • 枫林

      这个用9原理是一样的

    • 小杨pm

      9的条件和情形一直弄不懂,老师能不能讲一下。怎么才能跳过第一步交互从第二个交互开始设置条件

    • 枫林

      ( ̄▽ ̄”) 我也不是老师。一般交互要先选一个基础条件(9里是叫事件吧),然后在右侧添加情形

    • 枫林

      再根据情形,添加动作,然后设置对应值。(ps:可以双击事件打开框)

  3. 清ing、

    好棒,好详细的教程,学到了!谢谢

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索