Axure7.0的图片放大及切换效果

图片放大+不同图形进行切换

本节内容对图片放大效果与图片切换进行实现，实现效果有，在鼠标移入图片时能够显示半透明矩形块，并伴随鼠标移动，并且半透明矩形块不超出图片区域，同时放大区域能够将伴随鼠标的矩形块内容进行放大。根据选择不同的图片，图片上显示所选择的内容，同时随鼠标移动进行放大。

思路：

1、       实现鼠标移入图片，矩形框伴随鼠标一起移动

2、       控制矩形框不超出图片边界

3、       将半透明矩形块进行放大，并展示在放大区域

4、       实现图片切换效果

一、      准备工作

Axure7.0，要展示的图片

二、      开始

l  在左边栏中间位置的部件库中找到图片部件，拖动到主页的内容区域，命名为“zhongtu”并设置宽度（400）、高度（400）。

l  选择“zhongtu”的图片部件，右键选择“导入图片”

l  在左边栏的部件库中，选择矩形框拖入主页面中，命名为“xiaojuxing”，设置边框为无，填充色为灰色（透明度选择为30%）。

l  选择“zhongtu”部件，在部件交互中，找到“鼠标移动时”新增用例，在部件中选择“移动”，勾选“xiaojuxing”，并在下发的移动框中选择“绝对位置”，x:点击fx进行新增局部变量，局部变量名称设置为“xjx”，选择“部件”，对象选择“xiaojuxing”，在插入变量或函数框中，输入[[Cursor.x-xjx.width/2]]公式，公式的含义是通过鼠标的坐标位置进行设置小矩形的坐标，点击确定，y:同理。

按F5或者点击预览，进行预览效果，是不是发现鼠标在小矩形块中移动时，是不是小矩形框没有移动变化（什么原因）？？？半透明的小矩形是不是会超出图片边界？？

这是由于我们的鼠标移动时的用例事件，是放在“zhongtu”图片部件中，它的层级是在“xiaojuxing”下方，由于鼠标在“zhongtu”区域中移动，被小矩形框屏蔽，导致无法捕捉到鼠标移动，无法触发移动事件发生，所以无效。

三、      调整优化

l  解决小矩形屏蔽问题

为了解决小矩形屏蔽问题，我们再拉一个矩形框，命名为“mengban”蒙版的意思，同样的边框设置为无，填充透明度为100%，可以理解为在图片上面放一层玻璃面板，并且图层设置时候，将他放到最上层，避免发生刚刚类似的事情，无法触发事件发生，然后将刚刚在图片上的鼠标移动时事件剪切出来，找到这个“mengban”的鼠标移动时的事件，再选择粘贴进去。这个时候验证下小矩形屏蔽问题是不是解决了。

l  小矩形与图片边界问题

为了解决超出边界问题，我在事件触发前，增加条件判断，在用例上面编辑条件，整个矩形要限制在矩形框中，要判断8个条件（四角+四边），接下来我用左上角的边界做为例子，进行详细说明，左上角发生超出边界时，我们看看它是怎么超出的，通过分析我们会发现，

小矩形的x轴坐标与mengban的最左边界坐标相比较时，小矩形（x轴）<图片（x轴），那么小矩形就会超出图片边界，

小矩形的y轴坐标与mengban的上面边界坐标相比较时，小矩形（y轴）<图片（y轴），那么小矩形就会超出图片边界，

出现这种情况时，我们要将小矩形，拉回图片框里面，并与左上角对齐一致，这时就设置小矩形的“移动”事件，选择绝对位置，

X：[[This.left]]

Y: [[This.top]]

其他三个角与四个边，采用同样类似的方式解决。

还有一种简单快速的方式也能够解决，就是将玻璃蒙版“mengban”尺寸调小，边长减掉小矩形的长度，位置也调小，这样也不会超出边界，精确度没有上一种的方法高。

这时我们已经将鼠标在图片上移动，小滑块伴随在鼠标一起移动的事件，完美的解决了，接下来，就要做图片放大效果了！

四、      增加放大镜

分析：我们要局部放大图片，目前没办法直接局部放大，但是我们可以把图片先放大，然后通过显示局部内容来解决。可以考虑动态面板了！！！，动态面板能够满足这两个特性的哦。下面来具体实现：

l  在部件库中拖入动态面板，命名为“fangdajing”，大小调整为400x400像素。

l  双击动态面板，再双击打开“State1”，然后在部件库中再拖入一个图片控件，命名为“datu”，大小调整为1000x1000，位置x轴、y轴坐标设置为：（0,0），右键选择“导入图片”。

思考：这里的图片大小为什么是1000x1000，而不是1200或者其他的值？？？

l  添加为了移动事件，为了放大图上显示的位置和小图上鼠标小矩形一致，我们要将大图进行移动。在“xiaojuxing”上添加移动事件，选择移动勾选动态面板里面的“datu”，然后选择图片的绝对位置，X：[[(mb.left-This.x)*2.5]]，Y：[[(mb.top-This.y)*2.5]]，通过设置局部变量“zhongtu”的左边坐标、顶部坐标与小矩形的距离，再反方向移动2.5倍即可。

验证下效果看看是不是已经实现了！

五、      多图片切换

准备好几组图片，每个图片三种规格尺寸，分别为60*60、400*400、1000*1000。

l  在部件库中选择中继器拖入，命名“tupianku”，双击打开中继器，删除原来里面的矩形框，在部件库中拖入图片命名为“yasuotu”，设置图片大小为60x60，然后在中继器的数据集中添加三列列名自行命名，我这里是命名为image60、image400、image1000。再将同一组图片导入同一行，60*60的图片导入到image60列对应的空格中、400*400的图片导入到image400列对应的空格中、1000*1000的图片导入到image1000列对应的空格中，中继器项目交互中将原来的itemload的用例（文字于）删除，添加新用例“设置图形”，勾选中继器，默认中选择“值”，fx：[[Item.image60]]。再中继器的图片“yasuotu”中添加鼠标单击时用例事件，选择“设置图像”，勾选“zhongtu”默认值为fx：[[Item.image400]]，勾选“fangdajing” 默认值为fx：[[Item.image1000]]。

l  中继器格式，布局调整为“横向”。

l  点击中继器里面的图片，添加鼠标单击事件，设置图像“xiaotu”默认值：值=[[Item.img400]]，“fangdatu”默认值：值=[[Item.img1000]]

 第一次写，有不足之处，请多多指导！