使用"百度地图"时，会使用到放大缩小功能，并能拖动地图浏览，既然前些天有介绍过图片“放大”预览的功能，利用其实现方式，今天我们就来看看使用Axure来模拟做下“地图”控件的教程，请看下文详细介绍。
1、新建一张图，命名为pic，尺寸为600*375；（建议可导入一张高清大图，缩小尺寸后，使用）
2、点中此”图片：pic“，鼠标右键，选择“转换为动态面板”
3、命名为此动态面板为“display”，并勾选为“自动调整为内容尺寸”；
4、再次点中“动态面板：display”，鼠标右键，选择“转换为动态面板”，并命名新的动态面板为“area”；
5、新建3个矩形，分别命名为1X，2X，3X，尺寸为60*30；设置其填充色：#00FF00，不透明度：20%；设置矩形内容分别为1:1，1:2，1:3,布局如下图所示：
6、到这里，基本布局就结束了，以下是图片放大的动态交互~
7、“矩形：1X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为600*375
其中，宽为600，高位375；锚点：中心；动画：无
8、“矩形：2X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为1200*750其中，宽为1200，高位750；锚点：中心；动画：无
9、“矩形：3X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为1800*1125，其中，宽为1800，高位1125；锚点：中心；动画：无
10、另还需要设置“动态面板：display”的“拖动时”的交互动作.主要是要限定拖动时的界限；
11、移动“动态面板：display”
12、其中，设置移动：拖动；动画：无
13、设置“图片：pic”为局部变量LVAR1；设置“动态面板：area”为局部变量LVAR2；所以界限为：
底部小于等于[[LVAR1.height]]；
右侧小于等于[[LVAR1.width]]；
顶部大于等于[[(LVAR2.height-LVAR1.height)/2]]；
左侧大于等于[[(LVAR2.width-LVAR1.width)/2]]；
14、ok~，简单设置好后，效果就出来了，是不是超级简单~哈哈
15、但是，看官别急！多操作几次后，就会发现，当缩小图片时图片不见了。
以上就是Axure模拟地图放大效果的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
