您现在的位置是：首页 > 设计知识设计知识
如何制作九宫格拼图,制作9宫格图片拼图模式
2023-01-09 13:01:26设计知识0人已围观
简介 如何制作九宫格拼图,制作9宫格图片拼图模式 相信python里的人都玩过九宫格，那么Axure里的九宫格拼图我们是怎么实现的呢？下面先睹为快，给大家演示一下方法
如何制作九宫格拼图,制作9宫格图片拼图模式
相信python里的人都玩过九宫格，那么Axure里的九宫格拼图我们是怎么实现的呢？下面先睹为快，给大家演示一下方法。希望这篇文章的内容能对你有所帮助。
不详细？可以点击观看【Axure RP免费试用视频教程】
工具/软件
硬件型号：华硕无畏15
版本：Windows7
所需软件：Axure RP
效果图
九宫格拼图游戏。
实现逻辑
第1步
[[math . ABS()]]:用于获取绝对值
:代表“和”，a b表示A和B都先返回真再返回真
:代表“或”，ab表示A或B中的一个如果返回true，则返回true，否则返回false。
[[this.x]]:组件的当前横坐标位置。
[[this.y]]:组件的当前纵坐标位置。
第2步
我们知道，在拼图操作的过程中，将空白位置的相邻图片移动到空白位置。我们将每个小块的长和宽设为100，那么从空白图片的坐标距离不难发现，可以移动到空白位置的图片的坐标距离为100。然后我们在设置移动条件的时候，会以画面距离为依据。
假设一张图片的坐标是(100，200)，一张空白图片的坐标是(0，200)，(x1-x2) 2 (y1-y2) 2=两张图片之间的距离。根据这个公式，可以判断图片和空白图片之间的距离是否为100。考虑到这个公式很难用Axure来表达，我们简化了公式：
当x1-x2=100且Y1-Y2=0时可以移动瓷砖。
X1-X2=0，y1-y2=100 可以移动图块。
否则，不能移动该单幅图块。此时，当鼠标点击组件时，判断是否满足移动条件，移动条件转换成Axure语言如下：
[[math . ABS(this . y/100-ly)==0 math . ABS(LX-this . x/100)==1 math . ABS(this . y/100-ly)==1 math . ABS(LX-this . x/100)==0]]
其中lx和ly是我们设置的局部变量，具体含义描述如下。
第3步
画面运动的逻辑基本成型。接下来，我们来谈谈如何记录空白图片的位置：
我们画四个方框，命名为X，Y，X*100，Y*100，分别代表当前空白位置的位置和坐标。坐标用距离表示，位置用0，1，2表示。如下图所示，图片的坐标和位置可以一一对应。四个方框的位置和坐标写在下图，其他依次类推。
操作步骤
第1步
新建一个动态面板，用来放置九宫格的图片。
第2步
选择第一张图片以设置交互：
If(条件如图1所示)
设置文本(如图2所示)(其中lx是X的组成文本，ly是Y的组成文本)
设置文本(如图3所示)
移动(如图4所示)
其中lx是组件X*100的组件文本，ly是组件Y*100的组件文本。
第3步
只需为八个图块设置相同的交互。X，Y，X*100，Y*100的初始值是初始空白瓷砖的值，所以(X，Y)=(2，2)，(X*100，Y*100)=(200，200)。
结束了，拼图完成了。
注意/提示
好了，这次关于“Axure是怎么做拼图的？”分享到此为止。希望小六分享的内容能帮助到大家。同时可以关注一下，有不懂的问题可以在这里找到详细的解决方法。
Tags： 设计知识
很赞哦！ ()