axure图片放大器源文件 免费版

axure源文件是一款设计比较常用的图片放大源文件，当鼠标滑过产品图片时就可以实现图片放大功能了，可通过拖动动态面板同步移动图片，这里小编带来了axure RP源文件，用户可修改其中内容，需要的朋友可以下载！

axure RP源文件使用方法

一、准备图片资源

准备好两张图片，一张原图小一点，一张放大后的图片，图片比例保持一致。在原图上放一下矩形框，调整大小为正方形，设置边框为绿色，背景为透明。为了支持拖动事件，将正方形转成动态面板。放大的图片因为是要在指定区域内显示，因此我们将图片转成动态面板，并取消“Fit to Content”选项，对应中文版的就是取消自动适应动态面板内容大小的选项，这样在可见区域范围外将不可见。

二、添加正方形动态面板的拖动事件

只需要处理拖动事件即可，拖动正方形时，移动正方形到当前鼠标位置。

正方形拖动事件

正方形拖动范围限制在原图的显示范围之内，这里的范围限制使用了axure8的新特性 Add boundary，它可以约束部件只能在某个范围内移动，例如你要做个音量调节器，你可以限制音量大小只在某个范围移动。

约束移动范围

下面就是在移动正方形时，同时移动放大的图片到指定位置，这样看起来就像是在给原图做放大操作，计算放大图片的位置如下：

[[-LVAR1.x*rate]]，[[-LVAR1.y*rate]]

计算大图片移动位置

其中rate是放大图片与原图的比率，如下计算：

计算图片缩放比率

三、初始化全局变量和设置放大图片大小

使用了rate来保存放大图片与原图片之间的放大比率，页面加载时计算这个比率，并设置放大图片的放大倍数：

初始化全局变量和设置放大图片大小

这个小例子里需要介绍的内容基本涉及了