MATLAB App Designer入门实战（三）

这期文章中的问题虽然比较少，但是综合性较强。
系列文章目录:

• MATLAB App Designer入门实战（一）
• MATLAB App Designer入门实战（二）
• MATLAB App Designer入门实战（三）

入门实战第三弹——连连看小游戏App

13.在APP Designer获取文件夹内所有图片链接

dir函数在APP Designer中依旧可以用，例如我们想要获得名为’图片‘文件夹中的所有jpg图片的链接，则可以通过以下步骤：

path=‘图片文件夹的链接地址’;
例如：
path=‘E:\MATLAB\R 2019b\bin\连连看\图片’;

通过dir函数获取jpg图像的所有信息
picInformation=dir(fullfile(path,’*.jpg’));

提取其中第i张图的名称并合成完整路径：
picPath=[path,’’,picInformation(i).name];

14.如何确定鼠标点击图片的序号

这个问题的提出是因为连连看足足有6x8=48张图片
↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓

满足以下两个条件的图片组在被点击时很难确定其序号

• 图片量很大
• 图片的位置并不整齐

这时候我们很轻易地就有一个想法，我们为什么不把图片做成按钮？要实现这个功能我们便考虑使用UIimage的ImageClicked回调，但是有一个问题，就是图片量很大，我们就需要批量创建图片，但是批量创建的图片需要写在startupFcn中，startupFcn中创建的控件无法直接为其创立回调，这时候又要用到问题10中的虚控件，创造一个不可视的UIimage控件增添回调，并让批量创建的控件与其共享一个回调，步骤如下：
一 在startupFcn中批量创建控件并赋予属性

二 拖拽创造UIimage对象并隐藏

.

.

三 为虚控件增添回调并让批量创建控件与其共享回调
.

像上期说的一样自主创建的控件要增添回调需要借用
createCallbackFcn，因此我们可以在循环中加一行

set(app.drawPicHdl(i,j),'ImageClickedFcn',createCallbackFcn(app, @VirtualImageClicked, true))

---

这时候我们观察一下创建的回调的结构：

发现通过UIimage对象创建的回调不像通过image对象创建的回调一样具有object输入变量，但是所幸还有一个event可以做一下文章，我们查看一下event的属性发现：

发现它具有一个Source属性，指向的正是原图形对象，而原图形对象能够作为有效地辨别序号的信息有：

• Tag : 标签
• UserData : 用户数据
• Position : 图形位置

这仨属性能够用来分开哪个图是哪个图，我Tag其实用的比较多，但是如果你的序号形式为数对的话，会发现，UserData真香。

四 为控件增添UserData属性
就多写一行呗，美滋滋

这样我们就可以在ImageClicked回调，通过：

event.Source.UserData

了解到到底点击了哪个图片了：

15.如何在图片上方绘制线条

当UIAxes在UIimage或其他控件下面时，画出的图像也是在UIimage或其他控件下面，当UIAxes在他们上面时 ，便会出现以下状况：

我们很自然的想到如果把它调成透明的不就好了，但是很遗憾我们发现，中间白色区域可以调成无色的：

但是背景色除了无色啥颜色都能调。。。。。。。。。。。。。‘。。。。。。。。。。。。。

直接画曲线的想法算是破灭了，但我们。。。。。。还有另一个想法那就是。。。。。uilabel，没错就是能写字能变色的小标签，直线可不就是一个窄窄的长方形嘛（捂脸），不过需要注意的是uilabel也是有边框的，而且左右和上下边框宽度还不一样，这就需要在作图时适当调整数据，通过uilabel我们就能实现连连看的连线功能啦：

---

相信认真看完这篇文章的你已经有了还原该mlapp文件的能力，在这里提供m版和mlapp版的连接：
MATLAB 连连看小游戏m文件链接：MATLAB连连看小游戏
MATLAB 连连看小游戏mlapp文件链接：MATLAB连连看小游戏APP（mlapp）