之前看到大神RAEDME大鵬的中繼器九宮格文章，當(dāng)時(shí)對(duì)中繼器的使用還不甚了解，折騰了好久也只做出了開頭部分。。。了解更多中繼器的使用后，終于做出九宮格拼圖的原型，分享給小伙伴們，希望你們能夠喜歡，同時(shí)學(xué)會(huì)中繼器的部分使用方法~

詳解中繼器的九宮格，從兩方面講解，一是原理，二是實(shí)踐。廢話不多說，下面開始講解咯，請(qǐng)跟上我的速度哦~

原理篇

先來看下線框圖表示的九宮格，看下圖。

1-8代表圖片的拼塊，0代表初始可移動(dòng)的空格點(diǎn)，括號(hào)里代表的是每個(gè)點(diǎn)的x和y坐標(biāo)。由圖中可知，在0點(diǎn)四周的拼塊是可以進(jìn)行移動(dòng)的，其他不可以移動(dòng)。那如何辨別哪些點(diǎn)是0點(diǎn)的相鄰四個(gè)點(diǎn)呢？一是用眼看，二是函數(shù)判斷，采取第二種方法。你一定想問why→我們用眼睛看一目了然，axure是程序，沒長(zhǎng)眼睛看不到，要用邏輯判斷，懂了嗎？

假設(shè)當(dāng)前空格點(diǎn)坐標(biāo)（3,3），即圖中的0點(diǎn)，相鄰點(diǎn)則滿足以下條件：

|x-3|+|y-3|=1

符合公式的點(diǎn)都是可點(diǎn)擊移動(dòng)滴

可點(diǎn)擊移動(dòng)點(diǎn)找到后，那就是該移動(dòng)了，舉栗子，移動(dòng)上圖中的8點(diǎn)，點(diǎn)擊8，則8和0點(diǎn)位置互換，0點(diǎn)坐標(biāo)變成（2，3），8點(diǎn)坐標(biāo)變成（3，3），0點(diǎn)此時(shí)在九宮格里排序變成第8位。看下實(shí)際圖片對(duì)比。

點(diǎn)擊右側(cè)完整大圖，左側(cè)拼塊圖分散顯示且空白點(diǎn)在最后，拼塊圖的實(shí)現(xiàn)則由中繼器完成。下面來看看中中繼器的使用。

中繼器6列內(nèi)容：picture保存拼塊圖，x保存點(diǎn)的x坐標(biāo)，y保存點(diǎn)的y坐標(biāo)，move保存該點(diǎn)是否可移動(dòng)（0代表否，1代表是），id代表點(diǎn)的索引值，sortid代表排序值。

index：獲取點(diǎn)的索引值

abs（）：獲取絕對(duì)值

random（）：隨機(jī)獲取0-1之間的數(shù)值

TargetItem：目標(biāo)項(xiàng)，栗子”點(diǎn)擊A移動(dòng)B，則B為目標(biāo)項(xiàng)“

添加排序：對(duì)某項(xiàng)按規(guī)則排序

更新行：對(duì)某條數(shù)據(jù)內(nèi)容進(jìn)行更新

原理篇結(jié)束，下面開始實(shí)踐篇。

如果有沒看懂的，請(qǐng)看大神原理篇，傳送門：玩轉(zhuǎn)中繼器 | 九宮格拼圖的實(shí)現(xiàn)原理

實(shí)踐篇

一張大圖，8個(gè)小圖（直接從大神的預(yù)覽鏈接里copy下來的，捂臉.jpg)，大圖設(shè)置320*320，命名為”原圖“。拖出中繼器命名“九宮格”，點(diǎn)擊選擇樣式的布局為水平排列，每行3個(gè)，行間距和列間距均為10，雙擊進(jìn)入中繼器詳細(xì)頁(yè)，拖出圖片命名“拼圖”，設(shè)置圖片100*100。

給中繼器”九宮格“添加6列內(nèi)容：picture，x，y，move，id，sortid。

picture列選中點(diǎn)擊單元格郵件，選擇導(dǎo)入圖片，將8塊拼圖導(dǎo)入進(jìn)去，增加一行空白行；x和y空白，move列填充0，id空白，sortid列前8行空白，第九行填充1。

實(shí)現(xiàn)拼塊小圖自動(dòng)加載，”每項(xiàng)加載時(shí)“添加用例，設(shè)置”拼圖“=Item.picture。

在瀏覽器里預(yù)覽下，看看是不是圖片自動(dòng)加載出來啦~

圖片加載出來后，實(shí)現(xiàn)它隨機(jī)排序，則用到中繼器的添加排序功能。在”頁(yè)面載入時(shí)“添加用例，給sortid列的不等于1的添加隨機(jī)數(shù)值，然后給該列按照升序進(jìn)行排列，random（）的數(shù)值永遠(yuǎn)小于1，所以排序后，空白點(diǎn)永遠(yuǎn)在最后。

接下來給每個(gè)點(diǎn)添加id，x和y坐標(biāo)，順便添加隱藏”原圖“。給”原圖“在鼠標(biāo)點(diǎn)擊時(shí)添加用例，更新數(shù)據(jù)行，給每一個(gè)點(diǎn)添加id，x和y坐標(biāo)，最后再添加隱藏”原圖“。

排序后的拼塊圖，初始可移動(dòng)的點(diǎn)為6和8，設(shè)置6和8點(diǎn)的move=1。

靜態(tài)部分工作已經(jīng)完成，接下來就是期盼已久的動(dòng)態(tài)了，點(diǎn)擊拼圖可以移動(dòng)，是不是有點(diǎn)小激動(dòng)呢？

進(jìn)入中繼器詳情頁(yè)，給圖片”拼圖“添加點(diǎn)擊用例。

增加點(diǎn)擊條件，當(dāng)前點(diǎn)為可移動(dòng)點(diǎn)（即move==1的點(diǎn)）才能點(diǎn)擊，將該點(diǎn)與空白點(diǎn)（即id==0的點(diǎn)）內(nèi)容（picture，id，move）調(diào)換，將變位置后的空白點(diǎn)的相鄰可移動(dòng)點(diǎn)的move設(shè)為1，非相鄰點(diǎn)的move值設(shè)為0。

實(shí)踐篇完成，瀏覽器里走一遭，欣賞下自己的九宮格拼圖吧~~~~

原型預(yù)覽：http://73vyup.axshare.com

作者：Lprecious，成長(zhǎng)中的產(chǎn)品汪

本文由 @Lprecious 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。