中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

原理篇

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

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

假設當前空格點坐標（3,3），即圖中的0點，相鄰點則滿足以下條件：

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

符合公式的點都是可點擊移動滴

可點擊移動點找到后，那就是該移動了，舉栗子，移動上圖中的8點，點擊8，則8和0點位置互換，0點坐標變成（2，3），8點坐標變成（3，3），0點此時在九宮格里排序變成第8位?？聪聦嶋H圖片對比。

點擊右側完整大圖，左側拼塊圖分散顯示且空白點在最后，拼塊圖的實現則由中繼器完成。下面來看看中中繼器的使用。

中繼器6列內容：picture保存拼塊圖，x保存點的x坐標，y保存點的y坐標，move保存該點是否可移動（0代表否，1代表是），id代表點的索引值，sortid代表排序值。

index：獲取點的索引值

abs（）：獲取絕對值

random（）：隨機獲取0-1之間的數值

TargetItem：目標項，栗子”點擊A移動B，則B為目標項“

添加排序：對某項按規則排序

更新行：對某條數據內容進行更新

原理篇結束，下面開始實踐篇。

如果有沒看懂的，請看大神原理篇，傳送門：玩轉中繼器 | 九宮格拼圖的實現原理

實踐篇

一張大圖，8個小圖（直接從大神的預覽鏈接里copy下來的，捂臉.jpg)，大圖設置320*320，命名為”原圖“。拖出中繼器命名“九宮格”，點擊選擇樣式的布局為水平排列，每行3個，行間距和列間距均為10，雙擊進入中繼器詳細頁，拖出圖片命名“拼圖”，設置圖片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，id，move）調換，將變位置后的空白點的相鄰可移動點的move設為1，非相鄰點的move值設為0。

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

原型預覽：http://73vyup.axshare.com

作者：Lprecious，成長中的產品汪

本文由 @Lprecious 原創發布于人人都是產品經理。未經許可，禁止轉載。