Axure中繼器九宮格使用教程

1、Axure中繼器九宮格使用教程之前看到大神RAEDME大鵬的中繼器九宮格文章，當時對中繼器的使用還不甚了解，折騰了好久也只做出了開頭局部。了解更多中繼器的使用后，終于做出九宮格拼圖的原型，分享給小伙伴們，希望你們能夠喜歡，同時學會中繼器的局部使用方法詳解中繼器的九宮格，從兩方面講解，一是原理，二是實踐。廢話不多說，下面開始講解咯，請跟上我的速度哦原理篇先來看下線框圖表示的九宮格，看下列圖。1-8代表圖片的拼塊，0代表初始可移動的空格點，括號里代表的是每個點的x和y坐標。由圖中可知，在0點四周的拼塊是可以進行移動的，其他不可以移動。那如何區(qū)分哪些點是0點的相鄰四個點呢？一是用眼看，二是函數(shù)判斷，

2、采取第二種方法。你一定想問why我們用眼睛看一目了然，axure是程序，沒長眼睛看不到，要用邏輯判斷，懂了嗎？假設當前空格點坐標3,3，即圖中的0點，相鄰點那么滿足以下條件：|x-3|+|y-3|=1符合公式的點都是可點擊移動滴可點擊移動點找到后，那就是該移動了，舉栗子，移動上圖中的8點，點擊8，那么8和0點位置互換，0點坐標變成2，3，8點坐標變成3，3，0點此時在九宮格里排序變成第8位?？聪聦嶋H圖片比照。點擊右側(cè)完整大圖，左側(cè)拼塊圖分散顯示且空白點在最后，拼塊圖的實現(xiàn)那么由中繼器完成。下面來看看中中繼器的使用。中繼器6列內(nèi)容：picture保存拼塊圖，x保存點的x坐標，y保存點的y坐標，m

3、ove保存該點是否可移動0代表否，1代表是，id代表點的索引值，sortid代表排序值。index：獲取點的索引值abs：獲取絕對值random：隨機獲取0-1之間的數(shù)值TargetItem：目標項，栗子點擊A移動B，那么B為目標項“添加排序：對某項按規(guī)那么排序更新行：對某條數(shù)據(jù)內(nèi)容進行更新原理篇結(jié)束，下面開始實踐篇。如果有沒看懂的，請看大神原理篇，傳送門：玩轉(zhuǎn)中繼器 | 九宮格拼圖的實現(xiàn)原理實踐篇一張大圖，8個小圖直接從大神的預覽鏈接里copy下來的，捂臉.jpg)，大圖設置320*320，命名為原圖“。拖出中繼器命名“九宮格，點擊選擇樣式的布局為水平排列，每行3個，行間距和列間距均為10，

4、雙擊進入中繼器詳細頁，拖出圖片命名“拼圖，設置圖片100*100。給中繼器九宮格“添加6列內(nèi)容：picture，x，y，move，id，sortid。picture列選中點擊單元格郵件，選擇導入圖片，將8塊拼圖導入進去，增加一行空白行；x和y空白，move列填充0，id空白，sortid列前8行空白，第九行填充1。實現(xiàn)拼塊小圖自動加載，每項加載時“添加用例，設置拼圖“=Item.picture。在瀏覽器里預覽下，看看是不是圖片自動加載出來啦圖片加載出來后，實現(xiàn)它隨機排序，那么用到中繼器的添加排序功能。在頁面載入時“添加用例，給sortid列的不等于1的添加隨機數(shù)值，然后給該列按照升序進行排列，random的數(shù)值永遠小于1，所以排序后，空白點永遠在最后。接下來給每個點添加id，x和y坐標，順便添加隱藏原圖“。給原圖“在鼠標點擊時添加用例，更新數(shù)據(jù)行，給每一個點添加id，x和y坐標，最后再添加隱藏原圖“。排序后的拼塊圖，初始可移動的點為6和8，設置6和8點的move=1。靜態(tài)局部工作已經(jīng)完成，接下來就是期盼已久的動態(tài)了，點擊拼圖可以移動，是不是有點小沖動呢？進入中繼器詳情頁，給圖片拼圖“添加點擊用例。增加點擊條件，當前點為可移動點即move=1的點才能點擊，將該點與空白點即id=0的點內(nèi)容picture