【计算机图形学】交互式Bezier曲线——MATLAB GUI编程这是我参与11月更文挑战的第6天，活动详情查看：202

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

1 引言

Bezier样条曲线由皮埃尔∙贝塞尔发明，最初为雷诺汽车公司设计汽车车身开发的。

后来发现其有着很多特殊的性质, 在图形设计和路径规划等方面应用十分广泛

本文将基于MATLAB GUI编程，实现可交互式三次贝赛尔曲线

2 思路

2.1 原理

给定空间n+1个点，Bezier曲线段的参数方程表示为 $p(t)=\sum_{i=0}^{n} P_{i} B_{i, n}(t) \quad t \in[0,1]$ ，称为n次Bezier曲线

$\mathrm{B}_{\mathrm{i}, \mathrm{n}}(\mathrm{t})$ 是Bernstein基函数，有如下形式：

$B_{i, n}(t)=\frac{n !}{i !(n-i) !} t^{i}(1-t)^{n-i}=C_{n}^{i} t^{i}(1-t)^{n-i} \quad(i=0,1, \ldots . n)$

2.2 Bezier函数编写思路

根据Bezier曲线参数方程的形式，函数主要思想为三个矩阵相乘，即参数矩阵·系数矩阵·控制点矩阵

参数矩阵： $\begin{bmatrix}t^3&t^2&t&1\end{bmatrix}$
系数矩阵： $\begin{bmatrix}-1&3&-3&1\\3&-6&3&0\\-3&3&0&0\\1&0&0&0\end{bmatrix}$
控制点矩阵：
- $xx=\begin{bmatrix}p_0(1)&p_1(1)&p_2(1)&p_3(1)\end{bmatrix}$
- $yy=\begin{bmatrix}p_0(2)&p_1(2)&p_2(2)&p_3(2)\end{bmatrix}$

Tips:

需注意的是，参数变化从0到1，在计算机中只能离散化实现

故绘制Bezier曲线时，也需循环为每一个点的x,y坐标赋值，即每一个点对应一个不同的t参数值

2.3 交互式实现思路

首先在MATLAB中新建一个GUIDE，即基于图窗的App；保存后将自动生成.fig文件和.m文件
- .fig文件：界面文件
- .m文件：源程序文件
在.fig文件中搭建界面，将主要控件拖动至图窗
在对应控件的Callback事件中编写相应的方法
可直接使用[F5]运行，或在文件目录中双击.fig文件

3 过程

3.1 界面搭建

由于Bezier曲线与坐标轴密切相关，故新建项目时选择了“GUI with Axes and Menu”

3.2 三次Bezier函数

bezier(p0,p1,p2,p3)输入参数为控制点，矩阵形式

首先初始化系数矩阵和控制点矩阵

再以0.001为步长，循环计算三次Bezier曲线上点坐标

for t=0:0.001:1
    tt=[t^3 t^2 t 1]*a;
    x(end+1)=tt*xx';
    y(end+1)=tt*yy';
end

最后绘制控制多边形和三次Bezier曲线

3.3 回调函数主要部分

function pushbutton2_Callback(hObject, eventdata, handles)
handles.x1=str2num(get(handles.edit1,'String'));
handles.y1=str2num(get(handles.edit2,'String'));
%...
bezier([handles.x1,handles.y1],[handles.x2,handles.y2],...
    [handles.x3,handles.y3],[handles.x4,handles.y4]);

此事件为“绘制”按钮的回调事件，首先将文本框中输入的字符型x,y坐标转为整型，再调用三次Bezier函数，即可实现功能

完整代码请见Bezier3(gitee.com)

4 结果

在文本框中输入控制点的x,y坐标，点击“绘制”按钮，即可在坐标框中绘制得到三次Bezier曲线及其控制多边形