Axure高保真教程：拖拉拽放大缩小和移动元件

新知榜官方账号

2023-07-04 15:04:41

Axure高保真教程：拖拉拽放大缩小和移动元件

本文作者从专业产品经理与市场的角度出发，重新编写了该教程，讲解更加清晰，要点明确。

B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等，而C端产品经理需要更多地关注用户的个人需求。

拖拉拽是设计软件里常用的操作方式，所以今天作者就教大家在Axure中，如何制作一个能够拖拉拽随意放大缩小或者移动元件的原型模板。

效果展示

1、鼠标拖动元件的四个角，从而放大或者缩小目标元件；

2、鼠标拖动目标元件，可以移动元件位置。

原型地址：https://pf08m1.axshare.com

制作材料

被拖动的对象：我们以拖动放大缩小地图为案例，所以我们需要准备一个北京地图的素材，我们可以用形状画出北京市下各区的地图，如果有地图素材的话，也可以直接导入svg素材，右键转为形状，再给对应区域添加填充颜色。
动态面板：我们要在元件组上方添加一个动态面板，因为只有动态面板有拖动时这个交互，动态面板的大小覆盖下面地图的元件组即可。
拖动控制大小的四个角：我们用矩形来制作就可以了，我们以右下角为例，我们增加一个正方形的矩形，默认值显示右方和下方的边线，如下图所示左上、右上和左下也是一样的，分别显示左上、右上和左下的边线。

交互制作

鼠标移入出组合：我们先把所有元件组合在一起，鼠标移入组合时，我们就显示4个角的矩形，鼠标移出组合时，我们就隐藏4个角的矩形。
鼠标拖动4个角的矩形：这里我们以右下角为例，其余的3个角同理。鼠标拖动右下角时，其实我们就是要把动态面板和下面的目标元件放大或者缩小，我们用设置尺寸的交互就可以实现了，那么如何确定尺寸呢？我们可以通过左上角的坐标，以及右下角的坐标计算得出，其实宽度就是右下角x坐标值-左上角x坐标值，高度就等于左上角x坐标值-右上角x坐标值，这样尺寸就出来了。这里我们还需要考虑右下角x坐标值-左上角x坐标值和左上角x坐标值-右上角x坐标值必须是一个正数，因为没有尺寸是小于0的。所以我们在移动时要给增加一个边界，右下角左侧不能小于左上角的右侧，右下角的上方，不能小于左上角的底部。尺寸设置完之后，我们还需要考虑4个角具体的位置，左上和右下是不用管他的，因为拖动右下角的话，左上角是不变的，右下角自然就会到达拖动的位置。那现在要改变的就是左下角和右上角的坐标。我们用移动事件将他们移动到对应位置就好了。那到底要移动到哪里合适呢？我们先看左下角，左下角的话，其实x坐标是不变的，变得只有y坐标，因为要跟右下角的高度一致，所以y坐标就等于右下角的y坐标值。右上角也是同样道理，他是高度不变，就是y坐标值不变，变得只是左右的位置，这个位置和右下角的位置是一样的，所以就是右下角的x坐标值。这样我们就完成了右下角拖动放大缩小的交互了，其他三个角的原理也是一样，大家可以自行完成。
鼠标拖动动态面板的交互：鼠标拖动动态面板时，我们只需要用移动的交互，将整个组合跟随鼠标移动即可。

本页网址：https://www.xinzhibang.net/article_detail-5392.html

寻求报道，请

关键词

分享至微信：

相关工具

稿定抠图

稿定设计推出的AI自动消除背景工具

MagicStudio

高颜值AI图像处理工具

Upscalepics

在线图片放大工具

天工巧绘SkyPaint

免费的AI插画绘制工具，由昆仑万维与奇点智源合作推出

Leonardo.ai

AI创建精美的游戏插画资产

美图抠图

美图秀秀推出的AI智能抠图工具，一键移除背景

Upscayl：一款强大的AI图像放大工具

Upscayl：一款强大的AI图像放大工具在日常生活中，我们可能会遇到需要放大图片但又不想失真的情况，无论是在社交媒体上分享照片，还是在商业领域中进行品牌宣传，我们都希望能够呈现出清晰、精美的图像。然而，有时候我们只能获得低分辨率的图像，这让我们感到困惑和失望。但是，现在有一个令人兴奋的解决方案——

分类标签 UpscaylAI图像放大图片放大工具

12-06 16:05

开源的图片放大工具upscayl

简介upscayl是一款开源的图片放大工具，它是超分工具中流行的、成熟度和热度较高的工具之一。upscayl已经在GitHub上收到了1.6万+的star，完全免费开源，支持Windows、Linux和MacOS，只需要下载相应系统的版本安装即可使用。需要注意的是，upscayl要求有GPU支持，否

分类标签图片放大工具超分工具免费开源

11-27 02:03

中国式浪漫

中国式浪漫中国式的浪漫充满了婉约而华贵的情感，从古至今，我们常常可以看到一些文艺作品中描绘的恋人们穿越古代的长廊，相互倾诉着深情而含蓄的爱意。现代社会中，这种东方之美依然在中国式的爱情中得以体现，例如，现代新人在婚礼上常常选择中式的婚纱，穿着华丽的旗袍，展现出古典与现代的结合。传统与现代的碰撞中国式

分类标签中国式浪漫东方之美传统与现代的碰撞

11-26 16:07

使用免费的图片放大软件Upscayl解决低分辨率问题

使用免费的图片放大软件Upscayl解决低分辨率问题作为设计师，我们常常遇到甲方提供的图片素材尺寸过小，无法使用的问题。而在素材网站上找到一张完美的图片后，却发现它需要付费。今天，我要向大家介绍一款开源免费的图片放大软件——Upscayl。Upscayl采用了先进的人工智能技术，能够将低分辨率的图片

分类标签 Upscayl图片放大低分辨率

11-15 22:07

TopazA.I.Gigapixel：最好用的一键智能无损图片放大神器

TopazA.I.Gigapixel：最好用的一键智能无损图片放大神器“胖想不胖，我是胖想~~~”，关注胖想，每天都有精彩内容推荐给你！今天给大家推荐一款一键智能无损图片放大神器——TopazA.I.Gigapixel，这是胖想迄今为止用过的最好用的图片无损放大软件。软件简介TopazAIGigap

分类标签 TopazA.I.Gigapixel图片放大工具AI人工智能

11-12 18:40

Topaz A.I. Gigapixel与Topaz Sharpen AI介绍

Topaz A.I. Gigapixel介绍Topaz A.I. Gigapixel是一款非常实用的AI图片无损放大软件，有了这款软件，我们就可以在不损失图片质量的情况下进行图片的无损放大。它采用了专业的AI人工智能技术，可完美保留图像质量。Topaz A.I. Gigapixel的特点如下：在不丢

分类标签 TopazA.I.GigapixelTopazSharpenAI无损放大锐化清晰

11-12 18:38

AI智能图片放大神器+图片锐化清晰神器

AI智能图片放大神器+图片锐化清晰神器今天卯兔为伙伴们分享两个AI智能图片无损放大神器和AI智能图片锐化清晰神器。有需要的伙伴可免费领取。AI智能图片无损放大神器AI智能图片无损放大神器TopazA.I.Gigapixel是一款非常实用的AI智能图片无损放大神器，有了这款神器，我们就可以在不损失图片

分类标签 AI智能图片无损放大神器AI智能图片锐化清晰神器设计师

11-12 18:37

中国式浪漫

中国式浪漫中国式浪漫充满了婉约而华贵的情感，融合了传统与现代的元素，展现出独特的爱情表达方式。从古至今，各种文艺作品中描绘的恋人们穿越古代的长廊，相互倾诉着深情而含蓄的爱意。这种浪漫，不单单是一种场景的表达，更多的是一种文化的传承。东方之美，婉约而华贵的爱中国式浪漫有着独特的韵味，充满了婉约而华贵的

分类标签中国式浪漫爱情文化传承

11-10 02:10

中国式浪漫

中国式浪漫中国式的浪漫有着独特的韵味，充满了婉约而华贵的情感。从古至今，我们常常可以看到一些文艺作品中描绘的恋人们穿越古代的长廊，相互倾诉着深情而含蓄的爱意。这种浪漫，不单单是一种场景的表达，更多的是一种文化的传承。在现代社会中，这种东方之美依然在中国式的爱情中得以体现。东方之美，婉约而华贵的爱例如

分类标签中国式浪漫东方之美传统与现代的碰撞

11-04 08:29

元认知和悟性的区别与联系

元认知和悟性的区别与联系元认知Metacognition是指个体对自己的认知过程和认知、策略的监控和调节。它包括了认知策略的制定、目标设定、自我评估、策略调整等多个方面。元认知在学习、工作和生活中都起着重要作用，有助于提高学习效果，提升解决问题的能力和提高自我调节能力。在我国元认知的研究主要集中在教

分类标签元认知悟性学习策略

11-03 12:02