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

今天帶給大家的案例是使用 Axure 7.0（當然 8.0 也是可以的）制作一個九宮格拼圖原型。不過本文只講述實現原理，不講述具體實現步驟，希望小伙伴們能了解思路并自己動手去實踐，因為思考的過程才是最好的學習過程。

這個案例已經構思了很長時間，中間因為沒有思路便放下了一段時間，前幾天有朋友問我能否制作一個九宮格拼圖的原型，于是又重新思考起來。這個原型最燒腦的地方就是圖片移動邏輯的實現，因為只有空位周邊的圖片才可以將其移動到空位上。另外，這個原型有一個無解的BUG，為了實現圖片的隨機排列，導致了有時候生成的隨機圖片無法復原，也就是無論如何都拼不好，不過這種情況是隨機出現的，有時候也是可以拼好的。

話說何為九宮格拼圖？不說你已經懂了！

預覽地址：http://raedme.cn/axurelab/010_jiugongpintu/

實現原理

好了，接下來就為大家解析一下這個拼圖原型的實現原理（后文較為枯燥，閱讀請謹慎）。

首先，是點擊圖片可以將圖片移動到臨近空白區域的原理。下面我借助一個模型來講。

這是一個九宮格，在本案例中，九宮格我使用中繼器來實現。九宮格中 A、B、C、D、E、F、G、H 分別代表八張圖片，0 代表空白區域。此時，可以將圖片 H 或者圖片 F 移動到 0 位置，對應的 H 或 F 位置變成空白區域 0。之后再點擊和 0 相鄰的圖片，遵循相同的移動原理。

那么問題來了，如何判斷我點擊的圖片相鄰位置有一個空白區域，可以將該圖片移動到空白區域？此問題是該案例的核心問題，那么我接著用一個模型來給大家講解。

在這個圖中，我為九宮格中的每個區域加一個坐標，用（x，y）來表示，這一步是實現該原型的關鍵步驟。然后我們來分析一下每個區域之間坐標的關系。

比如 F 區和 0 區之間的關系，H 區和 0 區之間的關系，其實就是空白區域和它相鄰四周的區域的坐標關系。我們可以任意假設一個區域為空白區域，然后分析它上側、下側、左側、右側區域的（x，y）坐標。經過分析之后，我們可以得出一個結論。

可以用一個表達式來表達：

|0.x-相鄰區域.x|+|0.y-相鄰區域.y|=1

翻譯一下就是：0 區域的 x 值減去相鄰區域的 x 值的絕對值加上 0 區域的 y 值減去相鄰區域的 y 值的絕對值等于 1。反過來推也成立，就是如果兩個區域的（x，y）坐標分別求差的絕對值然后再相加等于 1 的話，那么這兩個區域一定是相鄰的區域。

通過以上邏輯，我們可以判斷相鄰區域（上下相鄰 or 左右相鄰），這非常重要。然后我們再判斷一下相鄰區域的其中一個是否為空白區域，如果是空白區域，那么點擊另一個區域的時候，就可以將其移動到相鄰的空白區域；如果不是空白區域，那么點擊無效。

舉例說明：

當我點擊 H 區域的時候，首先要尋找它的相鄰區域，通過前面介紹的表達式（|0.x-相鄰區域.x|+|0.y-相鄰區域.y|=1）我們可以得到 H 區域的相鄰區域為 E、G、0（不要說你一看就知道，你一看就知道，但是中繼器在運行的時候是不知道的，只能通過邏輯判斷來獲得）。

然后再判斷這些相鄰區域中是否有一個區域是空白區域，這個我們可以通過給中繼器的數據集中加上一個標記字段來標記空白區域，這一步的實現較為簡單。

這個例子中可以得知空白區域是 0 ，因此可以將 H 移動到 0 區域。

如果點擊的區域是 E，那么其相鄰的 4 個區域中就找不到空白區域，因此點擊區域 E 就不會發生移動。

好了，基于以上邏輯，就可以實現九宮格拼圖的核心功能了——點擊圖片移動到相鄰的空白的區域，如果相鄰沒有空白區域，就不移動。

但是接下來還有另外一件事情就是，如何使拼圖圖片可以隨機排列，并且每次原型載入時排列的順序都不一樣。

這 一效果的實現我在以前的案例中都有講過，可以通過給中繼器的數據集增加一個排序字段，然后給排序字段賦值為隨機數，之后為中繼器增加排序。因為每次中繼器 數據集中的每行數據的排序字段的值都不一樣，所以每次排序的結果會不一樣。但是在本案例中需要考慮到要把空白區域始終排在最末尾，因此該數據項的排序字段 需要做一個特殊的處理。

到這里九宮格拼圖的主要實現邏輯就講完了，不知道小伙伴們能否看得懂。具體的實現步驟，小伙伴們勇敢的去探索吧。

作者：大鵬，微信：urmagic，可一起交流原型設計問題，歡迎騷擾。

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