08 握把式圖形與GUI設計

Size: px

Start display at page:

Download "08 握把式圖形與GUI設計"

饮童
8 years ago
Views:

1 第八章握把式圖形與 GUI 設計本章重點本章介紹 MATLAB 的握把式圖形 (Handle Graphics), 以及相關的圖形使用者介面 (GUI, Graphic User Interface) 設計善用握把式圖形以及 GUI 設計技巧, 您就可以隨心所欲地更改 MATLAB 產生的圖形, 並能進一步設計出和善 (Friendly) 直覺 (Intuitive) 的圖形使用者介面本章的 GUI 設計均以基本的 MATLAB 程式設計為主, 另一個以滑鼠為主的 GUI 快速發展環境, 稱為 GUIDE (Graphic User Interface Design Environment), 將在下一章介紹

2 第一章 MATLAB 程式設計與應用 8-1 握把式圖形簡介 MATLAB 在第四版引進了握把式圖形 (Handle Graphics) 的概念, 之後就一路蓬勃發展, 之後的各種工具箱及 demos 都大量使用了以握把式圖形為主的圖形使用者介面, 大大地增加了使用者操作的便利性握把式圖形的概念很簡單, 就是將一個圖形的每一個組成元件都視為一個物件 (Object), 每一個物件都有一個獨一無二的握把 (Handle), 就像每一個人有一個獨一無二的身份證字號一樣根據這個握把, 我們就可以找到這個物件 ( 即圖形元件 ) 的各項性質, 並進而更改這些性質, 以產生不同的圖形呈現效果, 或定義滑鼠事件 (Mouse Events) 的反應指令 (Callbacks) 在握把式圖形的世界中, 每一個圖形物件都是隸屬於一個階層結構 (Hierarchy) 下的某一類, 此階層結構可圖示如下 : Root ( 桌面 ) Figures ( 圖形視窗 ) UI Controls (UI 控制元件 ) Axes ( 圖軸 ) UI menus (UI 選單 ) Images ( 影像 ) Lines ( 線段 ) Patches ( 貼片 ) Surfaces ( 曲面 ) Texts ( 文字 ) Lighting ( 光照 ) 下圖即為此種階層結構的一個例子 : 8-2 MATLAB 系列叢書 ❶

Chapter 8 握把式圖形與 GUI 設計 UI 選單文字物件曲面物件線段物件圖形視窗物件圖軸物件桌面 UI 控制物件在上圖中, 最上層的物件是 Root, 代表電腦的桌面 (Desktop), 而每個桌面可以有多個 MATLAB 圖形視窗 (Figures), 所以我們通常定義 Figure 是 Root 的孩子 (Child), 而 Root 則是 Figure 的父親 (

3 Chapter 8 握把式圖形與 GUI 設計 UI 選單文字物件曲面物件線段物件圖形視窗物件圖軸物件桌面 UI 控制物件在上圖中, 最上層的物件是 Root, 代表電腦的桌面 (Desktop), 而每個桌面可以有多個 MATLAB 圖形視窗 (Figures), 所以我們通常定義 Figure 是 Root 的孩子 (Child), 而 Root 則是 Figure 的父親 ( 或母親,Parent) 同理, 每一個 MATLAB 圖形可以包含 UI(User Interface) 控制元件 ( 例如 radio button checkbox 等 ) UI 選單圖軸等, 而每一個圖軸之下又可以包含影像 (Images) 線段 (Lines) 貼片 (Patches) 曲面 (Surfaces) 文字 (Texts) 及光照 (Lighting) 等因此, 我們只要能取得任一個圖形物件的握把, 就可以找到此物件的父親或孩子, 並進一步存取任一個物件的各種性質在下一節中, 我們將有更完整的範例介紹清蔚出版 8-3

4 第一章 MATLAB 程式設計與應用 8-2 以 GUI 進行圖形物件的性質存取本節的說明將先以 MATLAB 5.x 為主有關於 MATLAB 6.x 相關指令或用法, 並無太大差別, 因此將留在本節最後介紹每一個握把式圖形物件都帶有一連串的性質 (Properties) 及相對應的值 (Values), 我們可以利用 MATLAB 的 propedit 指令來輕易地改變一個圖形物件的性質舉例來說, 先產生一個簡單的圖形如下 : >> t = 0:0.1:4*pi; >> y = exp(-t/5).*sin(t); >> plot(t, y); 欲對此圖進行編修, 可用 propedit 指令, 例如 : >> propedit(gcf) % gcf 會傳回使用中的圖形的握把 8-4 MATLAB 系列叢書 ❶

Chapter 8 握把式圖形與 GUI 設計 (gcf 是常見的握把式圖形指令, 他可以傳回使用中的圖形的握把 ) 此時 MATLAB 即會開啟性質編輯器 (Property Editor), 產生的新視窗如下 : 物件瀏覽區性質修改區性質陳列區在上圖中, 上半部稱為物件瀏覽區 (Object Browser), 他將各個圖形物件的階層式關係以類似檔案總管

5 Chapter 8 握把式圖形與 GUI 設計 (gcf 是常見的握把式圖形指令, 他可以傳回使用中的圖形的握把 ) 此時 MATLAB 即會開啟性質編輯器 (Property Editor), 產生的新視窗如下 : 物件瀏覽區性質修改區性質陳列區在上圖中, 上半部稱為物件瀏覽區 (Object Browser), 他將各個圖形物件的階層式關係以類似檔案總管的方式呈現出來, 您可以在此階層式架構中選取一個物件, 與此物件相關的性質即會陳列在上圖中半部的性質陳列區然後您就可以點選某些性質, 改變其值, 以改變圖形的呈現方式例如, 若想要改變曲線的寬度, 我們可以點選 figure/axes/line, 然後再點選性質陳列區的 LineWidth, 將圖形寬度由預設的 0.5 改為 3, 此時性質編輯器的外觀如下 : 清蔚出版 8-5

6 第一章 MATLAB 程式設計與應用此時再按 Close 或按下鍵盤的 Return 鍵, 即可看到曲線的寬度已由 0.5 改成 3 利用同樣的方法, 您可以將曲線的 Marker 性質設為 o, MarkerSize 設為 20, Color 設為綠色, 以得到不同的呈現效果, 請立刻試看看! 性質編輯器還有一些特異功能, 特別適合高手使用, 說明如下 : 1. 多項選擇 : 您可以同時選擇多項物件 ( 先點選一個物件, 再按 Shift 鍵再點選, 或 Ctrl 鍵再點選另一個物件 ), 此時只有共有的性質, 會出現在性質陳列區例如, 您可以選取多項物件後, 再一起將他們的 Visible 性質設為 off 8-6 MATLAB 系列叢書 ❶

Chapter 8 握把式圖形與 GUI 設計 2. 字串補全 : 選取一物件後, 您可以在性質欄位填入足以辨認的數個字母, 再按下 Return 鍵後, 即可自動補全例如, 您可以選取一個 UI 控制物件, 在性質欄位填入 pos 並按 Return 鍵, 性質編輯器即可將之自動補全為 Position 3.

7 Chapter 8 握把式圖形與 GUI 設計 2. 字串補全 : 選取一物件後, 您可以在性質欄位填入足以辨認的數個字母, 再按下 Return 鍵後, 即可自動補全例如, 您可以選取一個 UI 控制物件, 在性質欄位填入 pos 並按 Return 鍵, 性質編輯器即可將之自動補全為 Position 3. 自動刪除 : 性質欄位會自動忽略第一個空白字元後的字母因此, 若輸入成 ps, 您可以按 Return 鍵, 讓游標回到字頭, 再輸入 pos, 形成 pos ps, 再按 Return 鍵, 性質欄位即會去除空白字元及其後的 ps, 並將 pos 補全成 Position 此功能可讓您的手保持在鍵盤上, 不必再去動用滑鼠, 以增高輸入的效率上述的性質編輯器可對任何圖形物件的性質進行存取, 功能非常強大但是一般來說, 我們常改變的圖形物件只有圖軸及曲線 ( 或曲面 ) 的少數幾個性質, 因此更簡單的方法則是直接使用 MATLAB 圖形視窗的圖形編輯功能例如, 當您在 MATLAB 指令視窗輸入 peaks 指令, 可產生 peaks 函數的三度空間曲面圖形 : 清蔚出版 8-7

8 第一章 MATLAB 程式設計與應用此時您可以點選, 以啟動圖形編輯功能然後, 您可以點選圖軸, 並按滑鼠右鍵, 選取 Properties, 以開啟圖軸編輯畫面, 如下 : 在以上的編輯視窗中, 將 Z 軸的 Scale 改為 Log, 即可將 peaks 函數的高度以對數呈現, 經此編輯後的圖形如下 : 8-8 MATLAB 系列叢書 ❶

9 Chapter 8 握把式圖形與 GUI 設計經由同樣的方法, 您也可以編輯曲線的各種常用性質, 在此不再贅述提示 : MATLAB 的 GUI( 圖形使用者介面 ) 均以直覺友善為最高指導原則, 因此基本上都能夠一玩就會, 所以我極力推薦各位讀者直接去試試看這些介面以上的說明, 均是根據 MATLAB 5.x, 如果您用的是 MATLAB 6.x, 功能上並無太大差異, 最大的差異乃在於 propedit 指令並無法直接修改圖形視窗物件的性質, 此時您可以點選圖形視窗的圖示以啟動圖形編輯功能, 並直接以滑鼠右鍵點選圖形物件, 以改變其性質清蔚出版 8-9

10 第一章 MATLAB 程式設計與應用 8-3 以命令列進行圖形物件的性質存取本節介紹如何以命令列來進行圖形物件的性質存取, 這些指令完全適用於 MATLAB 5.x 及 6.x 我們也可以使用指令列的方式來改變一個圖形的各種性質, 最常用到的是 set 與 get 指令, 其中 set 指令可用來設定某個性質的值, 而 get 指令可用於取得某個性質的值例如 : >> t = 0:0.1:4*pi; >> y = exp(-t/5).*sin(t); >> h = plot(t, y); % h 為曲線的握把 >> set(h, 'linewidth', 3); % 將曲線寬度改為 3 >> set(h, 'Marker', 'o'); % 將曲線的線標改成小圓圈 >> set(h, 'MarkerSize', 20); % 將線標的大小改成我們也可以將上述三個 set 指令合成一個 : 8-10 MATLAB 系列叢書 ❶

11 Chapter 8 握把式圖形與 GUI 設計 >> set(h, 'LineWidth', 3, 'Marker', 'o', 'MarkerSize', 20); 單獨使用 set(h), 可以列出 h 的所有性質及這些性質的預設值, 例如 : >> set(h) 指令執行結果 : Color EraseMode: [ {normal} background xor none ] LineStyle: [ {-} -- : -. none ] LineWidth Marker: [ + o *. x square diamond v ^ > < pentagram hexagram {none} ] MarkerSize MarkerEdgeColor: [ none {auto} ] -or- a ColorSpec. MarkerFaceColor: [ {none} auto ] -or- a ColorSpec. XData YData ZData ButtonDownFcn Children Clipping: [ {on} off ] CreateFcn DeleteFcn BusyAction: [ {queue} cancel ] HandleVisibility: [ {on} callback off ] HitTest: [ {on} off ] Interruptible: [ {on} off ] Parent Selected: [ on off ] SelectionHighlight: [ {on} off ] 清蔚出版 8-11

12 第一章 MATLAB 程式設計與應用 Tag UIContextMenu UserData Visible: [ {on} off ] 在上例中, 以大括弧表示的數值 ( 或字串 ) 即為預設值若欲取得某一個性質的值, 可用 get 指令, 例如, 欲取得 h 的顏色, 可輸入如下 : >> get(h, 'Color') ans = 若要得知 h 的所有性質的值, 可用 get(h), 例如 : >> get(h) 指令執行結果 : Color = [0 0 1] EraseMode = normal LineStyle = - LineWidth = [3] Marker = o MarkerSize = [20] MarkerEdgeColor = auto MarkerFaceColor = none XData = [ (1 by 126) double array] YData = [ (1 by 126) double array] ZData = [] ButtonDownFcn = Children = [] Clipping = on 8-12 MATLAB 系列叢書 ❶

13 Chapter 8 握把式圖形與 GUI 設計 CreateFcn = DeleteFcn = BusyAction = queue HandleVisibility = on HitTest = on Interruptible = on Parent = [ ] Selected = off SelectionHighlight = on Tag = Type = line UIContextMenu = [] UserData = [] Visible = on 提示 : 一般而言, 每一個圖形物件的性質都有數十種之多, 但真正常用到的性質大概不到十種另一個常用到的指令是 findobj, 為 find objects 的簡稱, 此指令可在握把式圖形的階層式結構中, 找出您要的物件例如, 欲找出所有的曲線物件, 可輸入如下 : >> plot(rand(10, 2)); % 畫出兩條曲線清蔚出版 8-13

14 第一章 MATLAB 程式設計與應用 >> h = findobj(0, 'type', 'line') % 找出曲線的握把 h = >> set(h, 'LineWidth', 3); % 經由握把將曲線寬度改為 MATLAB 系列叢書 ❶

15 Chapter 8 握把式圖形與 GUI 設計在上例中第二個敘述中, 0 代表桌面, 因此上例的二三列敘述的意義為找出所有型態為 line 的物件, 並將其曲線寬度改為 3, 傳回的向量 h 長度為 2, 代表共找到兩個型態為 line 的物件 8-4 以 M 檔案進行 GUI 的設計到現在為止, 您應該看過很多以 GUI 為主的 MATLAB 應用程式了吧?( 如果還沒有, 請趕快試試 xpsound travel truss lorenz 等指令 ) 本節將簡單介紹如何在指令視窗建立類似的 GUI 設計 ( 另一個 GUI 的設計方法, 則是使用 GUIDE 發展環境, 詳見下一章介紹 ) MATLAB 的 uicontrol 是產生 UI 控制物件的主要指令以下是一個產生按鈕 (Push Button) 的最簡單例子, 請將之逐列輸入於 MATLAB 指令視窗 : >> h = uicontrol; % 產生按鈕清蔚出版 8-15

$\n'');'; % 以字串定義按鈕被按後的反應指令 >> set(h, 'Callback', cmd); % 設定按鈕的反應指令執行完畢後,MATLAB 會產生一個空白視窗, 上面有一個按鈕 ( 如下圖 ), 每次在點選此按鈕後,MATLAB 的指令視窗即會出現 Somebody pushed me!$

16 第一章 MATLAB 程式設計與應用 >> set(h, 'String', 'Push me!'); % 在按鈕表面加入文字 Push me! >> cmd = 'fprintf(''somebody pushed me!\n'');'; % 以字串定義按鈕被按後的反應指令 >> set(h, 'Callback', cmd); % 設定按鈕的反應指令執行完畢後,MATLAB 會產生一個空白視窗, 上面有一個按鈕 ( 如下圖 ), 每次在點選此按鈕後,MATLAB 的指令視窗即會出現 Somebody pushed me! 的文字在上例中, 由於 UI 控制物件是圖形物件的孩子, 因此若沒有現成的圖形視窗,MATLAB 會新增一圖形視窗來容納 UI 控制物件此外, 所有 UI 控制物件的反應指令 (Callbacks, 亦即按下 UI 控制物件後, MATLAB 執行的指令 ) 都必須以字串來定義, 因此若在反應動作中又出現字串 ( 如上例的 Somebody pushed me! ), 則必須以兩個 '' (Double Quote) 來框住字串 ( 有關字串的處理, 可詳見本書第十一章字元與字串 ) MATLAB 5.x 支援的 UI 控制物件可呈現如下 : 8-16 MATLAB 系列叢書 ❶

17 Chapter 8 握把式圖形與 GUI 設計 >> uicontrol('style', 'push', 'position', [ ]); >> uicontrol('style', 'slide', 'position', [ ]); >> uicontrol('style', 'radio', 'position', [ ]); >> uicontrol('style', 'frame', 'position', [ ]); >> uicontrol('style', 'check', 'position', [ ]); >> uicontrol('style', 'edit', 'position', [ ]); >> uicontrol('style', 'list', 'position', [ ], 'string', ' '); >> uicontrol('style', 'popup', 'position', [ ], 'string', 'one two three'); 在上述例子中,style 後面所接的字串即代表 UI 控制物件的類別, 而 position 後面所接的向量即代表 UI 控制物件在圖形視窗的位置, 以 [x, y, width, length] 為例, 即代表 UI 控制物件的左下角之座標為 [x, y], 長度為 width, 高度為 length ( 均以 Pixel 為單位 ) 提示 : MATLAB 6.x 的 UI 控制物件比 5.x 更加豐富, 新增的支援包含 : 活頁夾 (Tab Panel) 樹狀瀏覽結構 (Tree View, 即類似微軟的檔案總管 ) 組合箱 (Combobox) 表單 (Table) 名片盒 (Card Panel) 捲軸 (Scrollbar) 切換鈕 (Toggle Button) 等, 非常方便! 您可從 MATLAB 6.x 的線上支援查到相關資料以下介紹另外一個較複雜的例子, 其檔案名稱為 ui1.m, 您可在 MATLAB 指令視窗下輸入 ui1, 即可得到一個圖形視窗及相關的 UI 控制物件, 如下圖 : 清蔚出版 8-17

第一章 MATLAB 程式設計與應用上圖有三個 UI 控制物件, 第一個 UI 控制物件可顯示或消除背景的格線 (Grid Lines); 第二個 UI 控制物件可讓使用者輸入 X 軸及 Y 軸的格子點 (Grid Points) 數目 ; 第三個 UI 控制物件則可以改變顯示曲面的色盤矩陣 (Colormap) 您可以隨意點選或改變這些 UI 控制物件, 並觀察圖形和背景的變化

18 第一章 MATLAB 程式設計與應用上圖有三個 UI 控制物件, 第一個 UI 控制物件可顯示或消除背景的格線 (Grid Lines); 第二個 UI 控制物件可讓使用者輸入 X 軸及 Y 軸的格子點 (Grid Points) 數目 ; 第三個 UI 控制物件則可以改變顯示曲面的色盤矩陣 (Colormap) 您可以隨意點選或改變這些 UI 控制物件, 並觀察圖形和背景的變化為使讀者瞭解這個例子, 我們在程式碼中加了很多註解, 主程式為 ui1.m, 其內容可列出如下 : >>type ui1.m 檔案 ui1.m 的內容 : % 產生新圖形視窗, 其左下角之座標為 [30, 30], % 長度為 300, 高度為 200( 均以 Pixel 為單位 ) figure('position', [ ]); % 在圖形視窗內產生一個圖軸, 其左下角之座標為 [0.1, 0.2], % 長度為 0.8, 高度為 0.8( 使用標準化的單位, 即圖形的左下角為 [0, 0], % 長度及高度都是 1 ) 8-18 MATLAB 系列叢書 ❶

19 Chapter 8 握把式圖形與 GUI 設計 axes('position', [ ]); % 視窗上的第一個圖形, 為三度空間的 peaks 函數 point_n = 20; [xx, yy, zz] = peaks(point_n); surf(xx, yy, zz); axis tight % 第一個 UI 控制物件, 用以控制背景格線的顯示 pos1 = [10, 10, 60, 20]; h1 = uicontrol('style', 'checkbox', 'string', 'Grid on',... 'position', pos1, 'value', 1); % 第二個 UI 控制物件, 用以指定 X 軸及 Y 軸的格子點數目 pos2 = [90, 10, 60, 20]; h2 = uicontrol('style','edit',... 'string', int2str(point_n),... 'position', pos2, 'backgroundcolor', [1 1 1]); % 第三個 UI 控制物件, 用以指定顯示曲面所用到的調色盤 pos3 = [170, 10, 60, 20]; h3 = uicontrol('style', 'popupmenu',... 'string', 'hsv gray hot cool pink jet',... 'position', pos3); % 第一個 UI 控制物件的反應指令為 grid set(h1, 'callback', 'grid'); % 第二個 UI 控制物件的反應指令為 cb2 set(h2, 'callback', 'cb2'); % 第三個 UI 控制物件的反應指令為 cb3 set(h3, 'callback', 'cb3'); 清蔚出版 8-19

20 第一章 MATLAB 程式設計與應用此 M 檔案還會呼叫另外兩個 M 檔案, 分別是 cb2.m 及 cb3.m, 其內容可列出如下 : >> type cb2.m 檔案 cb2.m 的內容 : % 取得第二個 UI 控制物件的數值 point_n = round(str2num(get(h2, 'string'))); % 若數字太大或太小, 則設定為 10 if point_n <= 1 point_n > 100, point_n = 10; end set(h2, 'string', int2str(point_n)); % 根據所得的數字, 重畫 peaks 曲面 [xx, yy, zz] = peaks(point_n); surf(xx, yy, zz); axis tight; % 根據第一個 UI 控制物件, 決定是否要畫格線 if get(h1, 'value')==1, grid on; else grid off; end 8-20 MATLAB 系列叢書 ❶

21 Chapter 8 握把式圖形與 GUI 設計 >> type cb3.m 檔案 cb3.m 的內容 : % 根據第三個 UI 控制物件來決定使用的色盤矩陣 switch get(h3, 'value') case 1 colormap(hsv); case 2 colormap(gray); case 3 colormap(hot); case 4 colormap(cool); case 5 colormap(pink); case 6 colormap(jet); otherwise disp('unknown option'); end 在上例的程式設計方法, 我們可以發覺有三個缺點 : 1. 需要使用三個檔案, 管理不方便 2. 使用的變數都在 MATLAB 基本工作空間中, 容易造成變數的相衝及覆蓋可解決上述問題的一個簡單的方法, 是將所有的程式碼集中於一個函示中, 並以不同的輸入字串來指示函式所需執行的功能, 此種 GUI 程式設計的方法在 MATLAB 的各種 demo 程式常被用到, 特稱為 Switchyard Programming 以上例來說, 以 Switchyard Programming 來產生的等效 M 檔案可顯示如下 : 清蔚出版 8-21

22 第一章 MATLAB 程式設計與應用 >> type ui2.m 檔案 ui2.m 的內容 : function ui2(action) if nargin == 0, end action = 'initialize'; switch(action) case 'initialize' % 圖形視窗及 UI 控制物件的初始化 % 產生新圖形視窗, 其左下角之座標為 [30, 30], % 長度為 300, 高度為 200( 均以 Pixel 為單位 ) figh = figure('position', [ ]); % 在圖形視窗內產生一個圖軸, 其左下角之座標為 [0.1, 0.2], % 長度為 0.8, 高度為 0.8( 使用標準化的單位, 即圖形的左下角為 [0, 0], % 長度及高度都是 1 ) axes('position', [ ]); % 視窗上的第一個圖形, 為三度空間的 peaks 函數 point_n = 20; [xx, yy, zz] = peaks(point_n); surf(xx, yy, zz); axis tight % 第一個 UI 控制物件, 用以控制背景格線的顯示 pos1 = [10, 10, 60, 20]; h1 = uicontrol('style', 'checkbox', MATLAB 系列叢書 ❶

23 Chapter 8 握把式圖形與 GUI 設計 'tag', 'UI1',... 'string', 'Grid on',... 'position', pos1, 'value', 1); % 第二個 UI 控制物件, 用以指定 X 軸及 Y 軸的格子點數目 pos2 = [90, 10, 60, 20]; h2 = uicontrol('style', 'edit',... 'tag', 'UI2',... 'string', int2str(point_n),... 'position', pos2, 'backgroundcolor', [1 1 1]); % 第三個 UI 控制物件, 用以指定顯示曲面所用到的調色盤 pos3 = [170, 10, 60, 20]; h3 = uicontrol('style', 'popupmenu',... 'tag', 'UI3',... 'string', 'hsv gray hot cool pink jet',... 'position', pos3); % 第一個 UI 控制物件的反應指令為 grid set(h1, 'callback', 'grid'); % 第二個 UI 控制物件的反應指令為 ui2('callback2') set(h2, 'callback', 'ui2(''callback2'')'); % 第三個 UI 控制物件的反應指令為 ui2('callback3') set(h3, 'callback', 'ui2(''callback3'')'); case 'callback2' % 第二個 UI 控制物件的 callback % 找出第一及第二個 UI 控制物件的握把 h1 = findobj(0, 'tag', 'UI1'); h2 = findobj(0, 'tag', 'UI2'); % 取得第二個 UI 控制物件的數值 point_n = round(str2num(get(h2, 'string'))); 清蔚出版 8-23

24 第一章 MATLAB 程式設計與應用 % 若數字太大或太小, 則設定為 10 if point_n <= 1 point_n > 100, point_n = 10; end set(h2, 'string', int2str(point_n)); % 根據所得的數字, 重畫 peaks 曲面 [xx, yy, zz] = peaks(point_n); surf(xx, yy, zz); axis tight; % 根據第一個 UI 控制物件, 決定是否要畫格線 if get(h1, 'value')==1, grid on; else grid off; end case 'callback3' % 第三個 UI 控制物件的 callback % 找出第三個 UI 控制物件的握把 h3 = findobj(0, 'tag', 'UI3'); % 根據第三個 UI 控制物件來決定使用的色盤矩陣 switch get(h3, 'value') case 1 colormap(hsv); case 2 colormap(gray); case 3 colormap(hot); 8-24 MATLAB 系列叢書 ❶

25 Chapter 8 握把式圖形與 GUI 設計 end case 4 colormap(cool); case 5 colormap(pink); case 6 colormap(jet); otherwise disp('unknown option'); otherwise, end error('unknown action string!'); 在上例中, 我們為了要能夠找出三個 UI 控制物件的握把, 因此特別設定他們個別的 Tag 值, 因此若要用到這些 UI 控制物件, 可用 findobj 指令來直接來找出他們的握把 8-5 以 M 檔案設定滑鼠事件的的反應指令在設計 GUI 時, 千萬別忘了滑鼠的重要性, 您可以設計一個圖形視窗, 使得滑鼠在此圖形的各項動作 ( 稱為滑鼠事件 (Mouse Events), 例如按下移動及釋放等 ), 都可以觸發一連串的反應指令, 達成您要的效果在設定滑鼠事件的反應指令時, 最相關的性質為 : WindowButtonDownFcn: 滑鼠按鈕按下時反應指令 WindowButtonMotionFcn: 滑鼠移動時的反應指令 WindowButtonUpFcn: 滑鼠按鈕釋放時的反指令清蔚出版 8-25

26 第一章 MATLAB 程式設計與應用這些性質都是附屬於一個圖形視窗, 因此, 他們規範了在此圖形視窗下, 各項滑鼠事件的反應指令一般而言, 我們希望滑鼠先被按下, 然後再移動滑鼠時, 才會觸發移動時的反應指令欲達到此效果, 我們必須做下列項 : 在滑鼠按鈕被按下時, 設定 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值在滑鼠按鈕被釋放時, 清除 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值因此, 只有在滑鼠按鈕被按下, 且滑鼠在移動時, 對應於 WindowButtonMotionFcn 的反應指令才會被呼叫以下我們用一個簡單的例子來說明在這個例子中, 滑鼠事件會產生下列反應 : 按下滑鼠時,MATLAB 指令視窗會出現 Mouse down! 的訊息按下並移動滑鼠時,MATLAB 會在圖形視窗畫出滑鼠軌跡, 並指令視窗印出 Mouse is moving! 及當時滑鼠的位置釋放滑鼠時,MATLAB 指令視窗會出現 Mouse up! 的訊息您可以在 MATLAB 指令視窗輸入 tmouse.m 來試看看此檔案, 其圖形視窗的外觀如下 : 8-26 MATLAB 系列叢書 ❶

27 Chapter 8 握把式圖形與 GUI 設計我們已在 tmouse.m 加入詳細註解, 其內容可顥示如下 : >> type tmouse.m 檔案 tmouse.m 的內容 : function tmouse(action) % TMOUSE 本例展示如何以 Handle Graphics 來設定滑鼠事件 (Mouse % Events) 的反應指令 (Callbacks) if nargin == 0, action = 'start'; end switch(action) % 開啟圖形視窗 case 'start', axis([ ]); % 設定圖軸範圍 box on; % 將圖軸加上圖框 title('click and drag your mouse in this window!'); % 設定滑鼠按鈕被按下時的反應指令為 tmouse down set(gcf, 'WindowButtonDownFcn', 'tmouse down'); 清蔚出版 8-27

28 第一章 MATLAB 程式設計與應用 % 滑鼠按鈕被按下時的反應指令 case 'down', % 設定滑鼠移動時的反應指令為 tmouse move set(gcf, 'WindowButtonMotionFcn', 'tmouse move'); % 設定滑鼠按鈕被釋放時的反應指令為 tmouse up set(gcf, 'WindowButtonUpFcn', 'tmouse up'); % 列印 Mouse down! 訊息 fprintf('mouse down!\n'); % 滑鼠移動時的反應指令 case 'move', currpt = get(gca, 'CurrentPoint'); x = currpt(1,1); y = currpt(1,2); line(x, y, 'marker', '.', 'EraseMode', 'xor'); % 列印 Mouse is moving! 訊息及滑鼠現在位置 fprintf('mouse is moving! Current location... = (%g, %g)\n', currpt(1,1), currpt(1,2)); % 滑鼠按鈕被釋放時的反應指令 case 'up', % 清除滑鼠移動時的反應指令 set(gcf, 'WindowButtonMotionFcn', ''); % 清除滑鼠按鈕被釋放時的反應指令 set(gcf, 'WindowButtonUpFcn', ''); % 列印 Mouse up! 訊息 fprintf('mouse up!\n'); end 8-28 MATLAB 系列叢書 ❶

Microsoft PowerPoint - Lec13_GUIDE_

Microsoft PowerPoint - Lec13_GUIDE_ Handle Graphics, GUI, GUIDE 握把式圖形 GUI 設計 GUIDE 彭旭霞助理教授國立清華大學生醫工程與環境科學系 1 Contents 握把式圖形 (Handle Graphics) GUI: M file GUI: GUIDE 2 握把式圖形 (Handle Graphics) 每個構成圖形的基本單位都可視為一個物件 (Object): 曲線曲面圖軸文字每個物件都有一個獨一無二的握把