Axure高保真教程：迁延拽缩小放大和挪动元件

炎凉

迁延拽是设计软件里罕用的操作形式，本文作者分享了在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. 鼠标拖动静态面板的交互
鼠标拖动静态面板时，咱们只需求用挪动的交互，将全部组合跟随鼠标挪动便可。
这样咱们就制造实现了迁延拽缩小放大和挪动元件的原型模板了。
那以上就是本期教程的整个内容，感兴致的同窗们能够入手试试哦，感激您的浏览，咱们下期见。
本文由 @AI产品人原创公布于人人都是产品经理，未经许可，阻止转载
题图来自 Unsplash，基于 CC0 协定
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。

华人澳洲中文论坛

热图推荐

Axure高保真教程：迁延拽缩小放大和挪动元件

发表回复

炎凉
关注TA

图文推荐

华人澳洲中文论坛

热图推荐

Axure高保真教程：迁延拽缩小放大和挪动元件

发表回复

炎凉 关注TA

图文推荐

炎凉
关注TA