Axure中继器九宫格使用教程

1、Axure中继器九宫格使用教程之前看到大神RAEDME大鹏的中继器九宫格文章，当时对中继器的使用还不甚了解，折腾了好久也只做出了开头局部。了解更多中继器的使用后，终于做出九宫格拼图的原型，分享给小伙伴们，希望你们能够喜欢，同时学会中继器的局部使用方法详解中继器的九宫格，从两方面讲解，一是原理，二是实践。废话不多说，下面开始讲解咯，请跟上我的速度哦原理篇先来看下线框图表示的九宫格，看下列图。1-8代表图片的拼块，0代表初始可移动的空格点，括号里代表的是每个点的x和y坐标。由图中可知，在0点四周的拼块是可以进行移动的，其他不可以移动。那如何区分哪些点是0点的相邻四个点呢？一是用眼看，二是函数判断，

2、采取第二种方法。你一定想问why我们用眼睛看一目了然，axure是程序，没长眼睛看不到，要用逻辑判断，懂了吗？假设当前空格点坐标3,3，即图中的0点，相邻点那么满足以下条件：|x-3|+|y-3|=1符合公式的点都是可点击移动滴可点击移动点找到后，那就是该移动了，举栗子，移动上图中的8点，点击8，那么8和0点位置互换，0点坐标变成2，3，8点坐标变成3，3，0点此时在九宫格里排序变成第8位。看下实际图片比照。点击右侧完整大图，左侧拼块图分散显示且空白点在最后，拼块图的实现那么由中继器完成。下面来看看中中继器的使用。中继器6列内容：picture保存拼块图，x保存点的x坐标，y保存点的y坐标，m

3、ove保存该点是否可移动0代表否，1代表是，id代表点的索引值，sortid代表排序值。index：获取点的索引值abs：获取绝对值random：随机获取0-1之间的数值TargetItem：目标项，栗子点击A移动B，那么B为目标项“添加排序：对某项按规那么排序更新行：对某条数据内容进行更新原理篇结束，下面开始实践篇。如果有没看懂的，请看大神原理篇，传送门：玩转中继器 | 九宫格拼图的实现原理实践篇一张大图，8个小图直接从大神的预览链接里copy下来的，捂脸.jpg)，大图设置320*320，命名为原图“。拖出中继器命名“九宫格，点击选择样式的布局为水平排列，每行3个，行间距和列间距均为10，

4、双击进入中继器详细页，拖出图片命名“拼图，设置图片100*100。给中继器九宫格“添加6列内容：picture，x，y，move，id，sortid。picture列选中点击单元格邮件，选择导入图片，将8块拼图导入进去，增加一行空白行；x和y空白，move列填充0，id空白，sortid列前8行空白，第九行填充1。实现拼块小图自动加载，每项加载时“添加用例，设置拼图“=Item.picture。在浏览器里预览下，看看是不是图片自动加载出来啦图片加载出来后，实现它随机排序，那么用到中继器的添加排序功能。在页面载入时“添加用例，给sortid列的不等于1的添加随机数值，然后给该列按照升序进行排列，random的数值永远小于1，所以排序后，空白点永远在最后。接下来给每个点添加id，x和y坐标，顺便添加隐藏原图“。给原图“在鼠标点击时添加用例，更新数据行，给每一个点添加id，x和y坐标，最后再添加隐藏原图“。排序后的拼块图，初始可移动的点为6和8，设置6和8点的move=1。静态局部工作已经完成，接下来就是期盼已久的动态了，点击拼图可以移动，是不是有点小冲动呢？进入中继器详情页，给图片拼图“添加点击用例。增加点击条件，当前点为可移动点即move=1的点才能点击，将该点与空白点即id=0的点内容picture