Matlab之App Designer 如何进行三维图形绘制教程

一、背景介绍

Matlab中的App Designer可以实现大量数据计算结果的可视化，并通过图形展示出来，方便用户进行分析和查看。本文将基于Matlab中的App Designer详细介绍了建立可视化界面并进行数据导入及三维图形的绘制方法，同时也会对数组导入及计算中注意事项做简单介绍。

二、基于Matlab App Designer建立可视化界面并进行三维图绘制的方法

与二维图建立的方法类似，本文采取先基于Matlab App Designer 建立可视化的界面，然后将数据导入，并将导入的数据在表中显示出来，同时在基于Matlab App Designer建立的界面上进行三维绘图。

1、同样打开一个新的Matlab App Designer页面，并保存为Draw_3D_app_1.mlapp，并在设计视图界面上拖入“编辑字段（文本）”组件，并对组件的属性进行修改，名称改为“数据输入”，同时选择“Button按钮”组件拖入设计视图，并在组件属性中将组件按钮名称更改为“加载”，如图1 参数输入及加载组件界面所示。

图1  参数输入及加载组件界面

2、在Matlab App Designer设计视图界面上拖入1个坐标区组件及1个表组件，导入的数据在表组件中显示，3D图绘制结果在坐标区组件图中显示，如图2 坐标区组件及表组件布置图所示。

如图2 坐标区组件及表组件布置图

3、对“加载“组件，添加回调，进入代码视图进行代码编写，如图3 数据加载及3D绘图代码编写。代码编写中需要注意的是，对于导入两列数组的计算需要采用点乘，即“.*”。同时加载数据完成后在编辑文本组件之后显示“加载完成”。

           clc
           [filename,pathname]=uigetfile({'*.xls';'*.xlsx';'*.*'},'File selector');
           pathname_EditField=string(pathname);
           filename_EditField=string(filename);
           if ~isequal(filename,0)
               app.EditField.Value=fullfile(pathname,filename);
           else
               return
           end
           filename_Ed=app.EditField.Value;
           %Excel中的数据导入，并转化成数组
           pat_1=readtable(filename_Ed,'Sheet',1);
           app.UITable.Data=pat_1;
           app.Label_3.Text='加载完成';
           X_1=table2array(pat_1(:,1));
           Y_1=table2array(pat_1(:,2));
           Z_1=X_1.*Y_1;
           
           plot3(app.UIAxes,X_1,Y_1,Z_1)%在坐标区内进行绘图

图3 数据加载及3D绘图代码

4、点击运行，运行基于Matlab App Designer设计的可视化软件，如图4 数据加载及3D绘图代码运行图所示。

图4 数据加载及3D绘图代码运行图

5、点击“加载”对数据加载，加载的数据显示在导入数据表中，并进行3D绘图，绘制的曲线在坐标区组件中显示。如图5所示。

图5 数据加载及3D运行图

图6 导入的数据图

7、该案例完整的代码如下

classdef Draw_3D_app_1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        Button          matlab.ui.control.Button
        EditFieldLabel  matlab.ui.control.Label
        EditField       matlab.ui.control.EditField
        DLabel          matlab.ui.control.Label
        UITable         matlab.ui.control.Table
        UIAxes          matlab.ui.control.UIAxes
        Label           matlab.ui.control.Label
        Label_2         matlab.ui.control.Label
        Label_3         matlab.ui.control.Label
    end

    methods (Access = private)

        % Button pushed function: Button
        function ButtonPushed(app, event)
           clc
           [filename,pathname]=uigetfile({'*.xls';'*.xlsx';'*.*'},'File selector');
           pathname_EditField=string(pathname);
           filename_EditField=string(filename);
           if ~isequal(filename,0)
               app.EditField.Value=fullfile(pathname,filename);
           else
               return
           end
           filename_Ed=app.EditField.Value;
           %Excel中的数据导入，并转化成数组
           pat_1=readtable(filename_Ed,'Sheet',1);
           app.UITable.Data=pat_1;
           app.Label_3.Text='加载完成';
           X_1=table2array(pat_1(:,1));
           Y_1=table2array(pat_1(:,2));
           Z_1=X_1.*Y_1;
           
           plot3(app.UIAxes,X_1,Y_1,Z_1)%在坐标区内进行绘图

        end

        % Callback function
        function Button_2Pushed(app, event)

        end
    end

    % App initialization and construction
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';

            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
            app.Button.BackgroundColor = [0 0.451 0.7412];
            app.Button.Position = [521 392 100 24];
            app.Button.Text = '加载';

            % Create EditFieldLabel
            app.EditFieldLabel = uilabel(app.UIFigure);
            app.EditFieldLabel.HorizontalAlignment = 'right';
            app.EditFieldLabel.FontWeight = 'bold';
            app.EditFieldLabel.Position = [40 393 53 22];
            app.EditFieldLabel.Text = '参数输入';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'text');
            app.EditField.FontWeight = 'bold';
            app.EditField.Position = [108 393 282 22];

            % Create DLabel
            app.DLabel = uilabel(app.UIFigure);
            app.DLabel.BackgroundColor = [0 1 1];
            app.DLabel.FontName = 'Times New Roman';
            app.DLabel.FontSize = 15;
            app.DLabel.FontWeight = 'bold';
            app.DLabel.Position = [261 443 159 22];
            app.DLabel.Text = '数据分析及3D绘图界面';

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, '3D绘图曲线')
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            app.UIAxes.FontName = 'Times New Roman';
            app.UIAxes.FontWeight = 'bold';
            app.UIAxes.TitleFontWeight = 'bold';
            app.UIAxes.Position = [321 140 300 185];

            % Create UITable
            app.UITable = uitable(app.UIFigure);
            app.UITable.ColumnName = {'Column 1'; 'Column 1'};
            app.UITable.RowName = {};
            app.UITable.FontName = 'Times New Roman';
            app.UITable.FontWeight = 'bold';
            app.UITable.FontSize = 13;
            app.UITable.Position = [11 140 302 185];

            % Create Label
            app.Label = uilabel(app.UIFigure);
            app.Label.BackgroundColor = [0 1 1];
            app.Label.FontName = 'Times New Roman';
            app.Label.FontSize = 15;
            app.Label.FontWeight = 'bold';
            app.Label.Position = [110 338 80 22];
            app.Label.Text = '导入数据表';

            % Create Label_2
            app.Label_2 = uilabel(app.UIFigure);
            app.Label_2.BackgroundColor = [0 1 1];
            app.Label_2.FontName = 'Times New Roman';
            app.Label_2.FontSize = 15;
            app.Label_2.FontWeight = 'bold';
            app.Label_2.Position = [450 338 65 22];
            app.Label_2.Text = '数据绘图';

            % Create Label_3
            app.Label_3 = uilabel(app.UIFigure);
            app.Label_3.FontName = '微软雅黑';
            app.Label_3.FontSize = 13;
            app.Label_3.FontWeight = 'bold';
            app.Label_3.Position = [403 393 103 22];
            app.Label_3.Text = '';
        end
    end

    methods (Access = public)

        % Construct app
        function app = Draw_3D_app_1

            % Create and configure 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

三、案例总结

 基于Matlab中的App Designer设计可视化界面并进行数据导入及3D绘图，可以直观的在可视化界面上展示分析结果，方便用户进行图形的操作。本文采用案例讲解的方式，详细介绍了如何采用Matlab App Designer建立数据3D绘图的GUI可视化界面的方法和详细的过程步骤，并介绍了导入数据进行计算时需要注意的相关事项，同时提供了详细的代码，以便读者进行学习和操作。