Matlab GUI“愤怒的小鸟”系列（二）——歪？妖妖零吗？这里有人虐鸟

朵珐

设计爱好者

各位大佬，金金果儿又来改教程了，因为我立志想让自己写出来的教程在运行无误的重要前提之下，整体实现沉稳中不乏活泼、低调中不失大气、简约中透着丰富balabalabala......

好，我们上一个教程是让“愤怒的小鸟”出现在背景图片上，那这个这个教程讲的就是如何用Matlab GUI机制让小鸟消失！小鸟表示有点方......飞来飞去的很累的，但是该消失还是要消失的（笑

你看看，这个世界想做只小鸟都这么努力，我们还有什么理由不去努力呢？

（我是一本正经的分割线）

我们首先了解一下Matlab GUI机制：

GUI是什么？G=graphic图形 U=user用户 I=interface界面也称为用户界面接口，这种机制可以通过鼠标、键盘等实现用户与界面的交互。

Matlab GUI遵循的是“分发”的规则，属于典型的事件驱动型的，所有的函数都处于待命的状态，一旦你有所动作，比如点击了一个按钮，它就会触发这个动作背后对应的函数实现某种功能。编程的基本思想是：执行一个操作后程序会做出一个反应。“一个操作”包括点击鼠标、拖动滑块、填写数据、选择选项等；“做出一个反应”包括计算、储存在哪里、贴个图出来、显示在哪里。

创建Matlab GUI界面通常有两种方式：

1. 使用 .m 文件直接动态添加控件

2. 使用 GUIDE 快速的生成GUI界面

第二种可视化编辑方法算更适合写大型程序,我们今天说的是第一种方法

整个流程大致如下：

1.在开始操作Matlab的时候，我们首先要把代码保存起来：

（1）在电脑中选择保存matlab代码的文件夹，复制文件夹路径

（2）打开matlab，在主页中的工作路径下粘贴复制好的路径，按Enter键

2.新建脚本

3.新建脚本之后便会弹出一个脚本编辑器

4.在脚本编辑界面敲完代码之后，需要点击“保存”

5.之后会弹出保存代码文件的窗口，这里要注意在“存储为 ”后输入的文件名必须是英文

6.最后点击存储

（我是分割线

我们来考虑一下如何实现让“愤怒的小鸟”消失。首先应该将背景图片和“愤怒的小鸟”载入Matlab(参考上一个教程——“愤怒的小鸟”系列（1）），然后使用回调函数,实现单击鼠标之后“愤怒的小鸟”便随之消失。

回调函数：即CALLBACK函数，就是一个通过函数指针调用的函数。如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。它不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。

实现的机制如下：

1、定义一个回调函数；

2、提供函数实现的一方在初始化的时候，将回调函数的函数指针注册给调用者；

3、当特定的事件或条件发生的时候，调用者使用函数指针调用回调函数对事件进行处理。

理清楚思路之后我们来看一下代码是如何敲

敲

敲......出来的：

GUI是一个“函数”分类机制，代码都是由 "function"领衔的

%为function 命名为 DeletBird

function y = DeletBird(x)

%获取当前工作路径

CWPath = fileparts(mfilename('fullpath'));

%创建工作窗口，命名为：figure(1)，窗口的位置以距离x轴200像素、y轴200像素的位置为原点，长为600像素、宽为800像素

hFigure = figure(1);
set(hFigure,'position',[200 200 600 800]);

嗯......没错，楼下的axes是楼上这位figure大爷的儿子！

%为背景图片在Figure上创建坐标轴，建立坐标轴首先要给它一个parent

hAxes = axes('parent',hFigure);

%设置坐标轴的属性：名称为hAxes，其属性为像素'units','pixels',其位置以距离x轴1像素、y轴1像素的距离，长为600、宽为800像素

set(hAxes,'units','pixels','position',[1 1 600 800]);

%读取jpg格式的背景图片

jpg = imread('angrybird_background50.jpg');

%在hAxes上显示jpg格式的背景图片

imshow(jpg,'parent',hAxes);

%为png格式的“愤怒的小鸟”图片在Figure上创建坐标轴，建立坐标轴首先要给它一个parent

hAxes_ab = axes('parent',hFigure);

%设置坐标轴的属性：名称为hAxes_ab，其属性为像素'units','pixels',其位置以距离x轴100像素、一件事。轴300像素的距离，长为50、宽为50像素

set(hAxes_ab,'units','pixels','position',[100 300 50 50]);

%读取png格式的“愤怒的小鸟”图片

[png , map, mAlpha] = imread('angrybird50.png');

%显示png格式的“愤怒的小鸟”图片

image_png = imshow(png);

%将png格式的“愤怒的小鸟”的图片设置为透明

set(image_png,'AlphaData',mAlpha);

以上代码和教程（一）有很多相似的地方，下面的函数是我们这次教程的重头戏：

%设置图像的单击事件函数（Matlab GUI属于典型的事件驱动型机制，buttondown是鼠标单击事件，即当点击鼠标时会激发相应的功能）。

image_png为前边程序设置的某一对象；buttonDownFcn为这一对象的一个属性，即单击触发相应的函数；@function_image_clickCallback为触发的相对应的函数，为自定义函数需要编写

set(image_png,'buttondownFcn',@function_image_clickCallback);

%回调函数体

function function_image_clickCallback(~,~,~);

%或者通过设置“愤怒的小鸟”的坐标轴将其“移”出当前窗口

set(hAxes_ab,'position',[1000 1000 100 100]);
end

当我们把上述代码敲敲出来，单击鼠标之后你会惊奇的发现“愤怒的小鸟”不见了！

https://www.zhihu.com/video/1040267335206170624

截图如下：

以下完整代码：

function y = DeletBird(x)
%get the current working path
CWPath = fileparts(mfilename('fullpath'));
%create a figure
hFigure = figure(1);
set(hFigure,'position',[200 200 600 800]);
%create an axes
hAxes = axes('parent',hFigure);
set(hAxes,'units','pixels','position',[1 1 600 800]);
%show the jpgfile
jpg = imread('angrybird_background50.jpg');
imshow(jpg,'parent',hAxes);
%create an axes_ab
hAxes_ab = axes('parent',hFigure);
set(hAxes_ab,'units','pixels','position',[100 300 50 50]);
%show the pngfile
[png , map, mAlpha] = imread('angrybird50.png');
image_png = imshow(png);
set(image_png,'AlphaData',mAlpha);
%creat a buttondown'
set(image_png,'buttondownFcn',@function_image_clickCallback);