Matlab GUI「憤怒的小鳥」系列（二）——歪？妖妖零嗎？這裡有人虐鳥

各位大佬，金金果兒又來改教程了，因為我立志想讓自己寫出來的教程在運行無誤的重要前提之下，整體實現沉穩中不乏活潑、低調中不失大氣、簡約中透著豐富balabalabala......

好，我們上一個教程是讓「憤怒的小鳥」出現在背景圖片上，那這個這個教程講的就是如何用Matlab GUI機制讓小鳥消失！小鳥表示有點方......飛來飛去的很累的，但是該消失還是要消失的（笑

你看看，這個世界想做只小鳥都這麼努力，我們還有什麼理由不去努力呢？

（我是一本正經的分割線）

我們首先了解一下Matlab GUI機制：

GUI是什麼？G=graphic圖形 U=user用戶 I=interface界面 也稱為用戶界面介面，這種機制可以通過滑鼠、鍵盤等實現用戶與界面的交互。

Matlab GUI遵循的是「分發」的規則，屬於典型的事件驅動型的，所有的函數都處於待命的狀態，一旦你有所動作，比如點擊了一個按鈕，它就會觸發這個動作背後對應的函數實現某種功能。編程的基本思想是：執行一個操作後程序會做出一個反應。「一個操作」包括點擊滑鼠、拖動滑塊、填寫數據、選擇選項等；「做出一個反應」包括計算、儲存在哪裡、貼個圖出來、顯示在哪裡。

創建Matlab GUI界面通常有兩種方式：

1. 使用 .m 文件直接動態添加控制項

第二種可視化編輯方法算更適合寫大型程序,我們今天說的是第一種方法

整個流程大致如下：

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
end


當我們把上述代碼敲敲出來，單擊滑鼠之後你會驚奇的發現「憤怒的小鳥」不見了！

截圖如下：

以下完整代碼：

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);
function function_image_clickCallback(~,~,~);
% cla;
set(hAxes_ab,position,[1000 1000 100 100]);
end
end


最後讓我們一起回憶一下這次的教程我都在bibi......哦不，是在認真講什麼東西：

（1）在第一個載入圖片教程的基礎上，我們新學習了一個函數，它是（小可愛你快猜猜我是誰？）

答案：buttondownFcn（滑鼠單擊函數）

（2）基本寫法：

set(image_png,buttondownFcn,@function_image_clickCallback);

function function_image_clickCallback(~,~,~);

我們下一個教程見了～