欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

Axure怎么制作模拟地图放大效果?

程序员文章站 2023-08-14 14:01:50
Axure怎么制作模拟地图放大效果?...

使用"百度地图"时,会使用到放大缩小功能,并能拖动地图浏览,既然前些天有介绍过图片“放大”预览的功能,利用其实现方式,今天我们就来看看使用axure来模拟做下“地图”控件的教程,请看下文详细介绍。

Axure怎么制作模拟地图放大效果?

1、新建一张图,命名为pic,尺寸为600*375;(建议可导入一张高清大图,缩小尺寸后,使用)

Axure怎么制作模拟地图放大效果?

2、点中此”图片:pic“,鼠标右键,选择“转换为动态面板

Axure怎么制作模拟地图放大效果?

3、命名为此动态面板为“display”,并勾选为“自动调整为内容尺寸”;

Axure怎么制作模拟地图放大效果?

4、再次点中“动态面板:display”,鼠标右键,选择“转换为动态面板”,并命名新的动态面板为“area”;

5、新建3个矩形,分别命名为1x,2x,3x,尺寸为60*30;设置其填充色:#00ff00,不透明度:20%;设置矩形内容分别为1:1,1:2,1:3,布局如下图所示:

Axure怎么制作模拟地图放大效果?

6、到这里,基本布局就结束了,以下是图片放大的动态交互~

7、“矩形:1x”的“鼠标点击时”的动作:

设置“图片:pic”尺寸为600*375

其中,宽为600,高位375;锚点:中心;动画:无

Axure怎么制作模拟地图放大效果?

Axure怎么制作模拟地图放大效果?

8、“矩形:2x”的“鼠标点击时”的动作:

设置“图片:pic”尺寸为1200*750其中,宽为1200,高位750;锚点:中心;动画:无

Axure怎么制作模拟地图放大效果?

Axure怎么制作模拟地图放大效果?

9、“矩形:3x”的“鼠标点击时”的动作:

相关标签: Axure 地图