【计算机图形学】交互式Bezier曲线——MATLAB GU

发表于

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

1 引言

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

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

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

2 思路

2.1 原理

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

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

Bi,n(t)=n!i!(n−i)!ti(1−t)n−i=Cniti(1−t)n−i(i=0,1,….n)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)Bi,n​(t)=i!(n−i)!n!​ti(1−t)n−i=Cni​ti(1−t)n−i(i=0,1,….n)

2.2 Bezier函数编写思路

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

  1. 参数矩阵：[t3t2t1]\begin{bmatrix}t^3&t^2&t&1\end{bmatrix}[t3​t2​t​1​]
  2. 系数矩阵：[−13−313−630−33001000]\begin{bmatrix}-1&3&-3&1\3&-6&3&0\-3&3&0&0\1&0&0&0\end{bmatrix}⎣⎡​−13−31​3−630​−3300​1000​⎦⎤​
  3. 控制点矩阵：
* xx=[p0(1)p1(1)p2(1)p3(1)]xx=\begin{bmatrix}p\_0(1)&p\_1(1)&p\_2(1)&p\_3(1)\end{bmatrix}xx=[p0​(1)​p1​(1)​p2​(1)​p3​(1)​]
* yy=[p0(2)p1(2)p2(2)p3(2)]yy=\begin{bmatrix}p\_0(2)&p\_1(2)&p\_2(2)&p\_3(2)\end{bmatrix}yy=[p0​(2)​p1​(2)​p2​(2)​p3​(2)​]

Tips:

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

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

2.3 交互式实现思路

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

3 过程

3.1 界面搭建

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

3.2 三次Bezier函数

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

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

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

1
2
3
4
5
matlab复制代码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 回调函数主要部分

1
2
3
4
5
6
matlab复制代码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曲线及其控制多边形

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%