MATLAB GUI高級界面美化

來自專欄影像工程師

0 前言

本文為MATLAB GUI的界面美化教程，能夠使原本單調的灰色GUI界面變得更加豐富和人性化，主要包括界面背景的設置，按鍵形狀設置和圖標設置三個部分，每個部分均給出相應的代碼。

閱讀本文之前，需要掌握基本的MATLAB GUI編程方法。

1 背景圖設置

基本思路是建立一個和窗口大小相同的axes並且在其中顯示背景圖片。代碼如下：

AxesBg=axes(units,pixels,pos,[0 0 1000 750]); % 建立背景圖像的axesuistack(AxesBg,down); % 置於底層axes(AxesBg);imshow(ImageBg); %顯示圖像set(AxesBg,visible,off); %axe外框不可見

其中第一行的1000和750分別是窗口的寬度和高度，以像素為單位，需要顯示的圖片應該和窗口大小相同，以獲得最好的顯示效果；第三行ImageBg為需要顯示的背景圖片矩陣。

2 按鍵形狀設置

MATLAB GUI自帶的按鍵都是純色的矩形，如果需要設計其他樣式的按鍵，那麼首先需要利用其他的繪圖軟體設計一個按鍵的圖標，然後在程序中讀取它，將其疊加在背景圖片上，同背景圖片一起顯示，然後在GUI設計界面中將按鍵調整到與圖標相同的位置，並且在程序中將其設置為透明的，這樣用戶在界面上看到的是使用繪圖軟體設計的更加美觀的按鍵但是點擊時觸發的是MATLAB GUI本身的按鍵。

2.1 圖標的疊加

假設已經使用繪圖軟體設計了一個按鍵圖標，那麼需要將其保存為PNG等帶有Alpha通道的圖片格式，在MATLAB中讀取之後通過以下函數將其疊加在背景圖片上。

function [ImageBgOut]=ImageAdd(ImageBg,ImAdd,AlphaAdd)% 圖片疊加函數 背景圖片和疊加圖片左上角重疊% ImageBg 背景圖片 RGB 數據類型任意% ImAdd 疊加圖片 RGB 數據類型任意% AlphaAdd 疊加圖片的Alpha通道 灰度 數據類型任意ImAdd=im2double(ImAdd);ImageBg=im2double(ImageBg);AlphaAdd=im2double(AlphaAdd);StartPoint=[1,1];StartPointLoc=1;if (StartPointLoc==1) for i=1:size(ImAdd,1) for j=1:size(ImAdd,2) if (AlphaAdd(i,j)<1 && AlphaAdd(i,j)>0) oripixle=ImageBg(StartPoint(1)+i-1,StartPoint(2)+j-1,:).*(ones(1,1,3)*(1-AlphaAdd(i,j))); addpixle=ImAdd(i,j,:).*(ones(1,1,3)*AlphaAdd(i,j)); ImageBg(StartPoint(1)+i-1,StartPoint(2)+j-1,:)=oripixle+addpixle; elseif(AlphaAdd(i,j)>=1) ImageBg(StartPoint(1)+i-1,StartPoint(2)+j-1,:)=ImAdd(i,j,:); end end endendImageBgOut=im2uint8(ImageBg);

在前言中，美化後的示例圖片背景為：

按鍵圖片為：

疊加之後就能夠呈現出前言中示例的效果。

2.2 按鍵透明化

按鍵透明化實質是將按鍵底下背景圖片的相應內容顯示到按鍵上。在GUI編輯界面中拖放一個按鍵，移動到和按鍵圖標相同的位置上，然後設置其屬性：

• BackgroundColor中red、green和blue都設置為0.941，也就是MATLAB默認的顏色數值。如果設置為其他顏色，在按鍵透明化以後還會殘留陰影。
• 刪除String屬性中的內容，即不顯示文字。
• Units設置為pixels，即用像素為單位衡量按鍵的大小和位置。
• Style設置為pushbutton。

以上設置也可以在程序中完成。設置完成以後通過以下函數能夠將按鍵透明化：

function []=TransparentBnt(handle,ImageBg)% 透明按鍵設置% handle 按鍵的句柄% ImageBg 背景圖片 Position=get(handle,position); ButtonBg=ImageBg(size(ImageBg,1)-Position(2)-Position(4)+1:size(ImageBg,1)-Position(2),Position(1)+1:Position(1)+Position(3),:); set(handle,cdata,ButtonBg);end

2.3 完整代碼

以下代碼包括了顯示背景圖片和設置按鍵的兩種功能，其中ImageAdd和TransparentBnt分為為上述兩個函數。

function []=ImageBGShow()% 背景圖像顯示函數global AxesBg AllHandles% 背景圖片的句柄 和全局句柄% 讀取背景圖文件[ImageBgmap,ImageBgdata]=imread(temp.png); ImageBg=ind2rgb(ImageBgmap,ImageBgdata);% 讀取按鍵圖片[ImAdd,ImMap,AlphaAdd]=imread(BaseBG.png); % rgb uint8 and alpha uint8% 疊加ImageBg=ImageAdd(ImageBg,ImAdd,AlphaAdd);% 剪裁ImageBg=ImageBg(31:780,:,:);% 顯示axes(AxesBg);imshow(ImageBg);% 透明按鍵設置TransparentBnt(AllHandles.pushbtnLocSearch,ImageBg);TransparentBnt(AllHandles.pushbtnZoomClose,ImageBg);TransparentBnt(AllHandles.pushbtnZoomFar,ImageBg);end

3 設置圖標

圖標會在窗口的左上角顯示，也會在電腦的任務欄中顯示。設置圖標的代碼如下：

h = handles.figure1; %返回窗口句柄newIcon = javax.swing.ImageIcon(Icon.png);figFrame = get(h,JavaFrame); %取得Figure的JavaFrame。figFrame.setFigureIcon(newIcon); %修改圖標

其中figure1為本窗口的Tag；Icon.png為圖標文件，圖標文件不易過大，否則會出現顯示模糊的情況，一般小於128×128像素。

4 總結

利用以上三個美化方法，再加上良好的界面布局就能夠做出很好看的界面了。前言中美化後的界面是一個路徑演算法的Demo，因為比較人性化的界面，這個Demo用於比賽、答辯都有很好的效果。最後在放一些圖吧，都是這個Demo的截圖。