计算机图形学实验二:曲线拟合

1. 实验内容

1. 绘制三次Bezier曲线

（1）给定四个已知点P1—P4，以此作为控制顶点绘制一段三次Bezier曲线。
（2）给定四个已知点P1—P4，以此作为曲线上的点绘制一段三次Bezier曲线。

2.绘制三次B样条曲线

给定六个已知点P1—P6，以此作为控制顶点绘制一条三次B样条曲线。

2. 实验环境

Visual Studio 2019
图形学实验程序框架
Windows11系统

3. 问题分析

3.1问题1(1)

对于问题1(1)，三次Bezier曲线的矩阵表示形式如下：

(t 3 t 2 t 1)

⎛ ⎝ ⎜ ⎜ ⎜ - 1 3 - 3 1 3 - 6 30 - 3 300 1000 ⎞ ⎠ ⎟ ⎟ ⎟

(0\le t\le 1)

Q (t) = (t^{3} t^{2} t 1) ⎝ ⎜ ⎜ ⎛ - 1 3 - 3 1 3 - 6 30 - 3 300 1000 ⎠ ⎟ ⎟ ⎞ ⎝ ⎜ ⎜ ⎛ P_{0} P_{1} P_{2} P_{3} ⎠ ⎟ ⎟ ⎞ (0 \leq t \leq 1)

其中,

P_3

,

P_2

,

P_1

,

P_0

分别为4个控制点坐标值。

Q (t)

为曲线上点的坐标值。

t

为参数。
曲线的参数式为：

{x(t)=axt3+bxt2+cxt+dxy(t)=ayt3+byt2+cyt+dy(0\le t\le 1).(1)

式中系数分别为：

a_{x} = - x_{0} + 3 x_{1} - 3 x_{2} + x_{3} b_{x} = 3 x_{0} - 6 x_{1} + 3 x_{2} c_{x} = - 3 x_{0} + 3 x_{1} d_{x} = x_{0} a_{y} = - y_{0} + 3 y_{1} - 3 y_{2} + y_{3} b_{y} = 3 y_{0} - 6 y_{1} + 3 y_{2} c_{y} = - 3 y_{0} + 3 y_{1} d_{y} = y_{0} . (2)

在设计程序时，只需将控制点

P_i(i=0,1,2,3)

的坐标

x_i,y_i)

代入

(2)

式解得

a_x,b_x,c_x,d_x

与

a_y,b_y,c_y,d_y

，再将求解得到的值代入

(1)

即可。

3.2问题1(2)

对于问题1(2),已知曲线上4个点，画出穿过这4个点的三次Bezier曲线。线上4个点对应参变量 $t$ 的取值。其中，第 $0$ 号点对应的 $t = 0$ ，第 $3$ 号点对应的 $t = 1$ ，第 $1$ 号点与第 $2$ 号点对应的取值可以自定。在本文中，取第 $1$ 号点对应的 $t = 0.25$ ，取第 $2$ 号点对应的 $t = 0.5$ 。
已知曲线上四个点 $Q(0),Q(t_1),Q(t_2),Q(1)$ ，其中 $0\le t_1 \le t_2 \le 1$ ，将其代入 $(1)$ 式，得到方程组：

.(3)

x (0) = d_{x} x (t_{1}) = a_{x} t_{1}^{3} + b_{x} t_{1}^{2} + c_{x} t_{1} + d_{x} x (t_{2}) = a_{x} t_{2}^{3} + b_{x} t_{2}^{2} + c_{x} t_{2} + d_{x} x (1) = a_{x} + b_{x} + c_{x} + d_{x} . (3)

其中，

x(t_i)

为曲线上已知点的横坐标，为已知量。将$(3)式写成矩阵形式如下：

⎝ ⎜ ⎜ ⎛ 0 t_{1}^{3} t_{2}^{3} 1 0 t_{1}^{2} t_{2}^{2} 1 0 t_{1} t_{2} 1 1111 ⎠ ⎟ ⎟ ⎞ ⎝ ⎜ ⎜ ⎛ a_{x} b_{x} c_{x} d_{x} ⎠ ⎟ ⎟ ⎞ = ⎝ ⎜ ⎜ ⎛ x (0) x (t_{1}) x (t_{2}) x (1) ⎠ ⎟ ⎟ ⎞ . (4)

对

(4)

式，左乘矩阵

⎝ ⎜ ⎜ ⎛ 0 t_{1}^{3} t_{2}^{3} 1 0 t_{1}^{2} t_{2}^{2} 1 0 t_{1} t_{2} 1 1111 ⎠ ⎟ ⎟ ⎞

的逆矩阵，即可解得

axbxcxdx)^T

(0001t31t21t11t32t22t211111)^{-1} (x(0)x(t1)x(t2)x(1)).(5)

对

aybycydy)^T

，同理：

(0001t31t21t11t32t22t211111)^{-1} (y(0)y(t1)y(t2)y(1)).(6)

将根据式

(5)

与

(6)

式解得

axbxcxdx)^T

的

aybycydy)^T

与代入

(1)

式，即可绘制出满足问题1（2）的Bezier曲线。
根据已知的需要穿过的曲线上四个点

Q(0),Q(t_1),Q(t_2),Q(1)

，还可以反推控制点。其中，控制点

P_0

与

P_3

已知，

P_1

与

P_2

未知。

Q_1= (t31t21t11) (−13−313−630−33001000) (P0P1P2P3)= (a3a2a1a0) (P0P1P2P3)(7)

Q_1= (t32t22t21) (−13−313−630−33001000) (P0P1P2P3)= (b3b2b1b0) (P0P1P2P3)(8)

联立

(7) (8)

式，可得:

(a_{2} b_{2} a_{1} b_{1}) (P_{1} P_{2}) = (Q_{1} - a_{3} P_{0} - a_{0} P_{3} Q_{2} - b_{3} P_{0} - b_{0} P_{3}) (9)

解得：

P1P2)= (a2a1b2b1)^{-1} (Q1−a3P0−a0P3Q2−b3P0−b0P3)(10)

(10)

式即根据曲线通过的点反推了控制点

P_1

和

P_2

。

3.3问题2

对于问题2，三次B样条曲线的矩阵表示形式如下：

\frac16

(0\le t \le 1).(11)

Q (t) = (t^{3} t^{2} t 1) \frac{1}{6} ⎝ ⎜ ⎜ ⎛ - 1 3 - 3 1 3 - 6 04 - 3 331 1000 ⎠ ⎟ ⎟ ⎞ ⎝ ⎜ ⎜ ⎛ P_{0} P_{1} P_{2} P_{3} ⎠ ⎟ ⎟ ⎞ (0 \leq t \leq 1) . (11)

分解后的参数式为：

{x(t)=axt3+bxt2+cxt+dxy(t)=ayt3+byt2+cyt+dy(0\le t \le 1)(12)

式中系数分别为：

a_{x} = - (x_{0} - 3 x_{1} + 3 x_{2} - x_{3}) / 6 b_{x} = (x_{0} - 2 x_{1} + x_{2}) / 2 c_{x} = - (x_{0} - x_{2}) / 2 d_{x} = (x_{0} + 4 x_{1} + x_{2}) / 6 a_{y} = - (y_{0} - 3 y_{1} + 3 y_{2} - y_{3}) / 6 b_{y} = (y_{0} - 2 y_{1} + y_{2}) / 2 c_{y} = - (y_{0} - y_{2}) / 2 d_{y} = (y_{0} + 4 y_{1} + y_{2}) / 6

一段三次B样条曲线需要4个控制点。但在已有三次B样条曲线的情况下，可以额外增加一个控制点，即可相应地增加一段B样条曲线，自然地能达到

C_2

连续。

4. 算法设计

4.1问题1(1)

正如3.1所分析，算法的流程如下：
1.计算求解系数 $a_x,b_x,c_x,d_x$ 与 $a_y,b_y,c_y,d_y$ 。
2.从 $t = 0$ 开始，设置步长 $t = 0.001$ ，对于每一个步长 $t$ 值，按 $(14)$ 式绘制曲线。

(0\le t \le 1)(14)

{x (t) = a_{x} t^{3} + b_{x} t^{2} + c_{x} t + d_{x} y (t) = a_{y} t^{3} + b_{y} t^{2} + c_{y} t + d_{y} (0 \leq t \leq 1) (14)

3.循环第2步，直到

t = 1

时结束。
算法的流程图如下：
在这里插入图片描述

4.2问题2

正如章节3.2分析，算法的流程如下：
1.根据 $(5) (6)$ 式，求解 $a_x,b_x,c_x,d_x$ 与 $a_y,b_y,c_y,d_y$ 。
2.从 $t = 0$ 开始，设置步长 $t = 0.001$ ，对于每一个步长 $t$ 值，按 $(15)$ 式绘制曲线。

(0\le t\le 1)(15)

{x (t) = a_{x} t^{3} + b_{x} t^{2} + c_{x} t + d_{x} y (t) = a_{y} t^{3} + b_{y} t^{2} + c_{y} t + d_{y} (0 \leq t \leq 1) (15)

3.循环第2步，直到

t = 1

时结束。
4.根据

(10)

式反推控制点，并将4个控制点连结成线。
在这里插入图片描述

4.3问题3

正如章节3.3所分析，算法的流程如下：
1.取 $i = 0$ 。
2.根据 $P_i,P_{i+1},P_{i+2},P_{i+3}$ 这四个控制点计算参数 $a_x,b_x,c_x,d_x$ 与 $a_y,b_y,c_y,d_y$ 。
3.从 $t = 0$ 开始，设置步长 $t = 0.001$ ，对于每一个步长 $t$ 值，按式 $(16)$ 绘制曲线。

(0\le t\le 1)(16)

{x (t) = a_{x} t^{3} + b_{x} t^{2} + c_{x} t + d_{x} y (t) = a_{y} t^{3} + b_{y} t^{2} + c_{y} t + d_{y} (0 \leq t \leq 1) (16)

4.循环第3步，直到

t = 1

时结束。
5.

i\leftarrow i+1

循环第2步，直到遍历完所有控制点。
在这里插入图片描述

5. 源代码

5.1 Bezier1

//以已知的四个点为控制点绘制Bezier曲线
//p:已知的四个控制点
void CDiamondView::DrawBezier1(POINT p[4])
{
	InvalidateRect(NULL);//强制清屏
	UpdateWindow();
	CDC* pDC = GetDC();
	CPen newPen, * oldPen;
	newPen.CreatePen(PS_SOLID, 1, RGB(0, 0, 0));
	oldPen = pDC->SelectObject(&newPen);
	pDC->Polyline(p, 4);
	pDC->SelectObject(oldPen);
	CPen newPen2;
	newPen2.CreatePen(PS_SOLID, 2, RGB(255, 0, 0));
	oldPen = pDC->SelectObject(&newPen2);
	double ax = -p[0].x + 3 * p[1].x - 3 * p[2].x + p[3].x;
	double ay = -p[0].y + 3 * p[1].y - 3 * p[2].y + p[3].y;
	double bx = 3 * p[0].x - 6 * p[1].x + 3 * p[2].x;
	double by = 3 * p[0].y - 6 * p[1].y + 3 * p[2].y;
	double cx = -3 * p[0].x + 3 * p[1].x;
	double cy = -3 * p[0].y + 3 * p[1].y;
	double dx = p[0].x;
	double dy = p[0].y;
	pDC->MoveTo(p[0].x, p[0].y);
	for (double t = 0; t <= 1; t = t + 0.001) {
		int xt = ax * t * t * t + bx * t * t + cx * t + dx;
		int yt = ay * t * t * t + by * t * t + cy * t + dy;
		pDC->LineTo(xt, yt);
	//	Sleep(10);
	}
	pDC->SelectObject(oldPen);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

5.2 Bezier2

//以已知的四个点为Bezier曲线上的点来绘制Bezier曲线
//p:已知的四个点
void CDiamondView::DrawBezier2(POINT p[4])
{
	//假设控制点1的t1=0.25
	//假设控制点2的t2=0.5
	InvalidateRect(NULL);//强制清屏
	UpdateWindow();
	CDC* pDC = GetDC();
	CPen newPen, * oldPen;
	newPen.CreatePen(PS_SOLID, 2, RGB(0, 0, 0));
	oldPen = pDC->SelectObject(&newPen);
	pDC->Polyline(p, 4);
	pDC->SelectObject(oldPen);
	POINT controlpoint[4];
	controlpoint[0] = p[0];//控制点0即为P0
	controlpoint[3] = p[3];//控制点1即为P1
	controlpoint[1].x = 3.5549 * (p[1].x - 0.4219 * p[0].x - 0.0156 * p[3].x) - 1.3329 * (p[2].x - 0.125 * p[0].x - 0.125 * p[3].x);
	controlpoint[1].y = 3.5549 * (p[1].y - 0.4219 * p[0].y - 0.0156 * p[3].y) - 1.3329 * (p[2].y - 0.125 * p[0].y - 0.125 * p[3].y);//反推控制点1坐标
	controlpoint[2].x = -3.5549*(p[1].x - 0.4219 * p[0].x - 0.0156 * p[3].x) + 3.9995 * (p[2].x - 0.125 * p[0].x - 0.125 * p[3].x);
	controlpoint[2].y = -3.5549 * (p[1].y - 0.4219 * p[0].y - 0.0156 * p[3].y) + 3.9995 * (p[2].y - 0.125 * p[0].y - 0.125 * p[3].y);//反推控制点2坐标
	CPen newPen1;
	newPen1.CreatePen(PS_SOLID, 2, RGB(0, 0, 255));
	oldPen = pDC->SelectObject(&newPen1);
	pDC->Polyline(controlpoint, 4);
	pDC->MoveTo(p[0].x, p[0].y);
	pDC->SelectObject(oldPen);
	CPen newPen2;
	newPen2.CreatePen(PS_SOLID, 2, RGB(255, 0, 0));
	oldPen = pDC->SelectObject(&newPen2);
	//反推ax、bx、cx、dx、ay、by、cy、dy
	double ax = 8.0 / 3.0 * p[3].x - 16 * p[2].x + 64.0 / 3.0 * p[1].x - 8 * p[0].x;
	double ay = 8.0 / 3.0 * p[3].y - 16 * p[2].y + 64.0 / 3.0 * p[1].y - 8 * p[0].y;
	double bx = -2 * p[3].x + 20 * p[2].x - 32 * p[1].x + 14 * p[0].x;
	double by = -2 * p[3].y + 20 * p[2].y - 32 * p[1].y + 14 * p[0].y;
	double cx = -7 * p[0].x + 32.0 / 3.0 * p[1].x - 4 * p[2].x + 1.0 / 3.0 * p[3].x;
	double cy = -7 * p[0].y + 32.0 / 3.0 * p[1].y - 4 * p[2].y + 1.0 / 3.0 * p[3].y;
	double dx = p[0].x;
	double dy = p[0].y;
	for (double t = 0; t <= 1; t = t + 0.001) {
		int xt = ax * t * t * t + bx * t * t + cx * t + dx;
		int yt = ay * t * t * t + by * t * t + cy * t + dy;
		pDC->LineTo(xt, yt);
		//	Sleep(10);
	}
	pDC->SelectObject(oldPen);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

5.3 B样条曲线

//以已知的六个点为控制点来绘制B样条曲线
//p:已知的六个控制点
void CDiamondView::DrawBCurve(POINT p[6])
{
	InvalidateRect(NULL);//强制清屏
	UpdateWindow();
	CDC* pDC = GetDC();
	CPen newPen, * oldPen;
	newPen.CreatePen(PS_SOLID, 1, RGB(0, 0, 0));
	oldPen = pDC->SelectObject(&newPen);
	pDC->Polyline(p, 6);
	pDC->SelectObject(oldPen);
	CPen newPen2;
	newPen2.CreatePen(PS_SOLID, 3, RGB(255, 0, 0));
	oldPen = pDC->SelectObject(&newPen2);
	for (int i = 0; i < 3; i++) {
		double ax = -(p[i].x - 3 * p[i + 1].x + 3 * p[i + 2].x - p[i + 3].x) / 6;
		double ay = -(p[i].y - 3 * p[i + 1].y + 3 * p[i + 2].y - p[i + 3].y) / 6;
		double bx = (p[i].x - 2 * p[i + 1].x + p[i + 2].x) / 2;
		double by = (p[i].y - 2 * p[i + 1].y + p[i + 2].y) / 2;
		double cx = -(p[i].x - p[i + 2].x) / 2;
		double cy = -(p[i].y - p[i + 2].y) / 2;
		double dx = (p[i].x + 4 * p[i + 1].x + p[i + 2].x) / 6;
		double dy = (p[i].y + 4 * p[i + 1].y + p[i + 2].y) / 6;
	//	pDC->MoveTo(p[i].x, p[i].y);
		for (double t = 0; t <= 1; t = t + 0.001) {
			int xt = ax * t * t * t + bx * t * t + cx * t + dx;
			int yt = ay * t * t * t + by * t * t + cy * t + dy;
			pDC->MoveTo(xt, yt);
			pDC->LineTo(xt, yt);
			//	Sleep(10);
		}
	}
	pDC->SelectObject(oldPen);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

6.程序运行结果

在这里插入图片描述
正确地根据4个控制点绘制出了一条Bezier曲线，且将4个控制点连接绘制出来。

正确地根据曲线上4个点绘制出了一条Bezier曲线能够穿过这4个点，且将这4个点连接绘制出来。并且能够根据曲线本身反推控制点，将这4个点用蓝色的线连接绘制出来。
在这里插入图片描述
正确地根据6个控制点绘制了B样条曲线。

7.总结

相关阅读:
7月VR大数据：Quest 2占比突破50%，Pico Neo 3较上月大幅涨幅
递推与递归
Snagit 2024：让你的屏幕活动瞬间变得生动有力 mac/win版
Mysql事务隔离级别是怎么实现的？
leetcode 22. 括号生成
公共组件封装之：邮件导出弹框
【python】python内置函数——map()根据提供的函数对指定序列做映射
java中@Qualifier注解的作用？
哪些人更容易受到网络攻击？
设计模式之状态模式

原文地址：https://blog.csdn.net/qq_46640863/article/details/125445132

计算机图形学 实验二:曲线拟合

目录