整个小案例耗时大概在1个小时,对于动态面板也有了些新的认识。

最近耳机前面的3.5mm接头被弄断,为了修好耳机,在淘宝上选接头的时候,“发现”鼠标在移动到图片上可以放大图片细节。如图:

Axure学习笔记:动态面板之图片放大

以前看着也没什么感觉,现在正好在学习axure,就想着看能不能实现这个效果;做下来整个小案例耗时大概在1个小时,对于动态面板也有了些新的认识。

预期实现功能

  1. 鼠标在小图上移动,获取固定范围内的高清大图;
  2. 放大的范围不能超出图片本身的边界。

思路整理

根据要实现的功能,并参考上面的图,分析我们需要准备的元件如下:

  1. 一张较小的原图origin;
  2. 一张长宽同比例放大的高清大图tripleImg。由于只需要模拟,这里用了张固定3倍大小的图;
  3. 一个可以挪动的正方形框zoomSquare:模拟一个放大镜。

动作分析:

(1)放大镜的挪动

  • 涉及到图形的移动,初步分析需要用到动态面板
  • 无法与上面效果完全一样,仅靠移动鼠标就能达到效果
  • 查看动态面板支持的事件,找到能够实现我们要求的动作——“拖动时”

(2)大图tripleImg的展示

  • zoomSquare挪动的时候大图只显示出对应的部分,可以使用动态面板实现,并注意不要选择自动调整为内容尺寸。
  • 在为了配合展示对应的部分,大图需要进行同比例的相对移动,比如当放大镜zoomSquare在向右移动时,我们的高清图在向左移动,将需要展示的部分放置于动态面板处。

主要界面

主界面

Axure学习笔记:动态面板之图片放大

动态面板1-放大镜

Axure学习笔记:动态面板之图片放大

动态面板2-高清图

Axure学习笔记:动态面板之图片放大

功能实现

1. 使用图片元件,添加两张图片,大小比例是3(设置全局变量rate=3)。开始考虑到为了方便后续对位置的计算,保持两张图片都贴边,即x起始坐标为0,小图的宽是196像素。想着只需要计算大图的y就可以了。后来发现这个完全没有必要,具体后面会提到。

2. 接下来,按同样的比例设置好正方形的大小。如图:

Axure学习笔记:动态面板之图片放大

3. 转换两张图片为动态面板,并加以命名(命名这事儿真的挺重要,要保持这个习惯);

4. 选中zoomP设置“拖动时”交互用例如图:

设置方块挪动时的边界

Axure学习笔记:动态面板之图片放大

设置挪动时,大图显示的位置

一开始将y设置为[[-(zoomSquare.y+196)]],发现图片无论如何都到不了预想中的地方,后来在tranceTxt中将当前zoomSquare坐标打印出来,并且挪动小图位置发现:动态面板的坐标系计算只基于它所处的state页面,而与外层页面无关。无论在index页面将图片放在哪里,只要state页面中它是以(0,0)为起点,那么可以直接取当前元件坐标即可

最终只需要按照下图设置坐标:

Axure学习笔记:动态面板之图片放大

总结

1. 整体实现不复杂,达到当初设定的目标。对于动态面板的坐标计算也有了更深的印象,个人感觉这个在教程中没有看到,不知道是不是自己看漏了。

2. 如果不使用方块当做放大镜,默认以鼠标为中心进行高清图片的展示也是可以的。此时只需要在origin图片上配置“移动时”事件,当然这个时候就需要考虑坐标的计算了,参考配置如图:

Axure学习笔记:动态面板之图片放大

附上下载链接:http://url.cn/55kfZET