Chapter 8. MATLAB圖形用戶界面設計

題目來自《MATLAB程序設計與應用》第二版 劉衛國 Chapter 8 MATLAB圖形用戶界面設計

課後習題解答

1. 圖形窗口與座標軸

課堂討論 在同一圖形窗口建立兩個座標軸

分別用axes函數和axis函數在同一圖形窗口建立兩個座標軸。例如，建立水平放置的兩個座標軸如圖所示。

要求左邊座標軸用默認屬性，座標軸標題爲“座標軸1”；右邊座標軸的 x 軸範圍爲 $[-π, π]$，y 軸範圍爲 $[-1, 1]$ ，座標軸標題爲“座標軸2”。
（1）用axes函數實現。
（2）用axis函數和subplot函數實現。

% (1) axes
figure(811)
ax1 = axes('Position',[0.05 0.1 0.4 0.8]);
ax1.Title.String = '座標軸1';
ax2 = axes('Position',[0.55 0.1 0.4 0.8], ...
    'XLim', [-pi, pi], 'YLim', [-1, 1]);
ax2.Title.String = '座標軸2';
% (2) axis, subplot
figure(812)
subplot(1, 2, 1)
title('座標軸1')
subplot(1, 2, 2)
axis([-pi, pi, -1, 1])
title('座標軸2')

2. 曲線與曲面對象

課堂討論1 plot函數和line函數比較

請比較用plot函數和line函數在同一座標軸繪製多條曲線的方法。在同一座標軸繪製 $y=\sin x$ 和 $y=\cos x$，其中 $x∈[0, 2π]$。要求正弦曲線用藍色實線，餘弦曲線用綠色虛線。

課堂討論2 surf函數和surface函數比較

請比較用surf函數和surface函數在同一座標軸繪製多個曲面的方法。在同一座標軸繪製以下兩個曲面。

% (1) plot函數與line函數比較
x = linspace(0, 2*pi);
figure(8211)
plot(x, sin(x), 'b-', x, cos(x), 'g--')
title('plot函數')
figure(8212)
line(x', sin(x'), 'Color', 'b', 'LineStyle', '-')
line(x', cos(x'), 'Color', 'g', 'LineStyle', '--')
title('line函數')
% (2) surf函數與surface函數比較
[u, v] = meshgrid(-2:0.1:2, -3:0.1:3);
[x, y] = meshgrid(-2:0.1:2, -3:0.1:3);
figure(8221)
subplot(1, 2, 1)
surf(u.^2/2, u, v);
title('曲面(1):(u^2/2, u, v)'); xlabel('x'); ylabel('y'); zlabel('z');
subplot(1, 2, 2)
surf(x, y, x.*y.*exp(-x.^2-y.^2));
title('曲面(2):(x, y, xye^{-x^2-y^2})'); xlabel('x'); ylabel('y'); zlabel('z');
figure(8222)
subplot(1, 2, 1)
surface(u.^2/2, u, v);
title('曲面(1):(u^2/2, u, v)'); xlabel('x'); ylabel('y'); zlabel('z');
subplot(1, 2, 2)
surface(x, y, x.*y.*exp(-x.^2-y.^2));
title('曲面(2):(x, y, xye^{-x^2-y^2})'); xlabel('x'); ylabel('y'); zlabel('z');

3. 圖形用戶界面設計方法

課堂討論 分析執行結果

建立如圖所示的圖形窗口。

若在“繪圖1”按鈕的回調函數體中添加以下代碼：

x=0:pi/50:2*pi；
plot(x, sin(x),'r')
hd=line(x, cos(x))；
hd.Color='b';

在“繪圖2”按鈕的回調函數體中添加以下代碼：

x=0:pi/50:2*pi;
hd=line(x, cos(x));
hd.Color='b';
plot(x, sin(x),'r')

運行該圖形窗口，分別單擊這兩個按鈕，繪出的圖形是否一樣？分別是什麼曲線？

S.f = figure(83); 
S.ax = axes('Position',[0.2 0.25 0.6 0.6]); 
S.bl = uicontrol('style','push',...
                 'units','normalized',...
                 'position',[0.25 0.05 0.2 0.1],...
                 'fontsize',14,...
                 'string','繪圖1',...
                 'callback',{@bl_call,S});
S.br = uicontrol('style','push',...
                 'units','normalized',...
                 'Position',[0.55 0.05 0.2 0.1],...
                 'fontsize',14,...
                 'string','繪圖2',...
                 'callback',{@br_call,S});

function bl_call(varargin)
    S = varargin{3};  % Get the structure.
    S.ax();
    x = 0 : pi/50 : 2*pi;
    plot(x, sin(x),'r');
    hd = line(x, cos(x));
    hd.Color='b';
end

function br_call(varargin)
    S = varargin{3};  % Get the structure.
    S.ax();
    x = 0 : pi/50 : 2*pi;
    hd = line(x, cos(x));
    hd.Color='b';
    plot(x, sin(x),'r');
end

4. 用戶界面設計工具

課堂討論 建立圖形用戶界面的方法

分別用命令和用GUIDE工具建立一個圖形用戶界面。界面中包含一個座標軸和一個“繪圖”按鈕，按鈕的Tag屬性爲BtPlot。運行該用戶界面，單擊“繪圖”按鈕，在座標軸繪製正弦曲線。比較兩種方式的回調函數的定義方法。

% (1) 命令工具
S.f = figure; 
S.ax = axes('Position',[0.15 0.25 0.7 0.7]);
S.btplot = uicontrol('style','push',...
                 'units','normalized',...
                 'tag', 'BtPlot',...
                 'position',[0.4 0.05 0.2 0.1],...
                 'fontsize',14,...
                 'string','繪圖',...
                 'callback',{@BtPlot_call,S});
% (2) GUIDE 工具
gui_plot;

function varargout = gui_plot(varargin)
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @gui_plot_OpeningFcn, ...
                   'gui_OutputFcn',  @gui_plot_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end
 
if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
 
function gui_plot_OpeningFcn(hObject, eventdata, handles, varargin)
handles.output = hObject;
guidata(hObject, handles);
 
function varargout = gui_plot_OutputFcn(hObject, eventdata, handles)
varargout{1} = handles.output;
 
function BtPlot_Callback(hObject, eventdata, handles)
axes(handles.axes1);
cla;
x = 0 : pi/50 : 2*pi;
plot(x, sin(x),'r');
 
function axes1_CreateFcn(hObject, eventdata, handles)

function axes1_DeleteFcn(hObject, eventdata, handles)

5. APP設計工具

課堂討論 APP設計

用App Designer工具建立一個圖形用戶界面，其中包含一個座標軸、一個旋鈕、一個離散旋鈕和一個“繪圖”按鈕，旋鈕的值域爲 $[0, 5]$，離散旋鈕的值域爲 $[1, 4]$。運行該用戶界面，單擊“繪圖”按鈕，從旋鈕獲取 $m$ 的值，從離散旋鈕獲取 $n$ 的值，在座標軸繪製曲線，以下是曲線方程：

app85;

classdef app85 < matlab.apps.AppBase
    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
        UIAxes    matlab.ui.control.UIAxes
        Knob      matlab.ui.control.Knob
        Knob_2    matlab.ui.control.DiscreteKnob
        Button    matlab.ui.control.Button
    end
    % Callbacks that handle component events
    methods (Access = private)
        % Button pushed function: Button
        function ButtonPushed(app, event)
            m = app.Knob.Value;
            n = app.Knob_2.Value;
            t = linspace(0, 2*pi, 100);
            plot(app.UIAxes, m*sin(t), n*cos(t));
        end
    end
    % Component initialization
    methods (Access = private)
        % Create UIFigure and components
        function createComponents(app)
            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 550 301];
            app.UIFigure.Name = 'UI Figure';
            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, {'x = m sin(t)'; 'y = n cos(t) '; 't \in [0 2\pi]'})
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            app.UIAxes.TitleFontWeight = 'bold';
            app.UIAxes.Position = [137 12 400 275];
            % Create Knob
            app.Knob = uiknob(app.UIFigure, 'continuous');
            app.Knob.Limits = [0 5];
            app.Knob.Position = [47 199 60 60];
            app.Knob.Value = 2.5;
            % Create Knob_2
            app.Knob_2 = uiknob(app.UIFigure, 'discrete');
            app.Knob_2.Items = {'1', '2', '3', '4'};
            app.Knob_2.Position = [47 99 60 60];
            app.Knob_2.Value = '2';
            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
            app.Button.FontSize = 18;
            app.Button.Position = [27 40 100 40];
            app.Button.Text = '繪圖';
            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end
    % App creation and deletion
    methods (Access = public)
        % Construct app
        function app = app85
            % Create UIFigure and components
            createComponents(app)
            % Register the app with App Designer
            registerApp(app, app.UIFigure)
            if nargout == 0
                clear app
            end
        end
        % Code that executes before app deletion
        function delete(app)
            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

6. 圖形用戶界面應用舉例

課堂討論 GUIDE和App Designer工具的應用

分別用GUIDE和App Designer工具建立一個圖形用戶界面。界面中包含一個座標軸和一個“繪圖”按鈕，按鈕的Tag屬性爲BtPlot。運行該用戶界面，單擊“繪圖”按鈕，在座標軸用plot函數繪製一個圓。比較兩種方法的回調函數的定義方法以及plot函數的調用方法。

% (1) GUIDE
gui86;	

function varargout = gui86(varargin)
gui_Singleton = 0;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @gui86_OpeningFcn, ...
                   'gui_OutputFcn',  @gui86_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end
 
if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
 
function gui86_OpeningFcn(hObject, eventdata, handles, varargin)
handles.output = hObject;
guidata(hObject, handles);

function varargout = gui86_OutputFcn(hObject, eventdata, handles) 
varargout{1} = handles.output;

function BtPlot_Callback(hObject, eventdata, handles)
axes(handles.axes1);
cla;
t = 0 : pi/50 : 2*pi;
plot(sin(t), cos(t));

% (2) App Designer
app86;	 

classdef app86 < matlab.apps.AppBase
    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
        UIAxes    matlab.ui.control.UIAxes
        BtPlot    matlab.ui.control.Button
    end
    % Callbacks that handle component events
    methods (Access = private)
        % Button pushed function: BtPlot
        function BtPlotPushed(app, event)
            t = 0 : pi/50 : 2*pi;
            plot(app.UIAxes, sin(t), cos(t));
        end
    end
    % Component initialization
    methods (Access = private)
        % Create UIFigure and components
        function createComponents(app)
            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 234 265];
            app.UIFigure.Name = 'UI Figure';
            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, '')
            xlabel(app.UIAxes, '')
            ylabel(app.UIAxes, '')
            app.UIAxes.Box = 'on';
            app.UIAxes.TitleFontWeight = 'bold';
            app.UIAxes.Position = [18 55 200 200];
            % Create BtPlot
            app.BtPlot = uibutton(app.UIFigure, 'push');
            app.BtPlot.ButtonPushedFcn = createCallbackFcn(app, @BtPlotPushed, true);
            app.BtPlot.FontSize = 14;
            app.BtPlot.Position = [68 17 100 28];
            app.BtPlot.Text = '繪圖';
            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end
    % App creation and deletion
    methods (Access = public)
        % Construct app
        function app = app86
            % Create UIFigure and components
            createComponents(app)
            % Register the app with App Designer
            registerApp(app, app.UIFigure)
            if nargout == 0
                clear app
            end
        end
        % Code that executes before app deletion
        function delete(app)
            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

---

感謝 CSDN 用戶 大胖子zi 提供的習題內容。