首先来看看效果https://www.zhihu.com/video/1221058687621615616
从视频中可以看出,图片可以被拖动,并且自动吸附到白色方框内,并且如果当目标区域有图片的时候,两个图片互换位置,接下来就让我们来实现这个效果。
首先新建一个项目,然后创建一个Panel,将其作为我们的背景,命名为BG
然后再在BG下创建image,命名为PicBg来作为摆放图片的地方,调整其大小,给PicBg添加上GridLayoutGroup组件。
圈起来的地方是每个摆放方块的大小。
接下来创建一个Prefeb,作为摆放图片的地方。这个的思路是,用按钮创建这个Prefeb,然后再加上一个按钮作为摆放图片的父亲,图片作为第二曾按钮的子集,图片通过识别鼠标所在的父亲的位置来判断,这个不好表达,接下来就来实现它。
Prefeb中的关系就是这样。
接下来复制9个刚刚创建的Prefeb,并且统一命名为Slot,再通过GridLayoutGroup组件调整他们的位置。将PicBg的大小作调整,我想做成33并且中间留有3单位的空隙,而我的Slot长宽都为120,所以我的PicBg的大小应该为369*369。