前言

贝塞尔曲线一直是计算机绘图中的重点,我们常见的PhotoShop和Svg图片等和网页上的图片啊之类的就大量使用了贝塞尔曲线。该文使用html5中的Canvas标签,由特点、原理、实例等各个方面深入研究了贝塞尔曲线的应用与意义。


一、基本简介

贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。二十世纪六十年代晚期,PierreBézier应用数学方法为雷诺公司的汽车制造业描绘出了贝塞尔曲线。


二、一些特点

  1. 有起始点;
  2. 由连续的控制点{P0,P1,…Pn-1}控制曲线的形状;
  3. 描绘的线段一般不经过控制点。

三、一个例子

二次贝塞尔曲线

二次贝塞尔曲线
在线段P1P2和P2P3上取得D和F点,使得:公式, 在链接DF,并在线段DF上找到H点,使得:公式1
=>D(50,110),F(110,200),H(74,146)
图
=>得到了一条曲线
=>贝塞尔曲线其实就是一系列点的集合(只要点够多,就越趋近线段)
下面展示一下一个一次,三次,四次,五次贝塞尔曲线的例子:

贝塞尔曲线示例
一阶贝塞尔
三阶贝塞尔
四阶贝塞尔
五阶贝塞尔

相应推导过程与上面二次贝塞尔的一样,只是需要更多步骤。

四、公式推导

给定一个系数 t ∈ [ 0 , 1 ] t \in [0,1]t∈[0,1]。

1、一次贝塞尔曲线

设P1坐标为(a,b),P2坐标为(c,d)
在线段P1P2上取得一点H(e,f),使得:公式2
公式3
所以一次贝塞尔曲线中各点B ( t ) B(t)B(t)为:公式4

2、二次贝塞尔曲线

由例子部分内容及一次贝塞尔曲线公式:
公式5
同理可得三次,四次,五次贝塞尔曲线公式:

3、三次贝塞尔曲线

公式6

4、四次贝塞尔曲线

公式7

5、五次贝塞尔曲线

公式8
由上述几个公式,研究规律,可以发现:
总结
由上述规律,我们得到n阶贝塞尔曲线公式:

一般公式

一般公式
由上述推导过程,可知不管几阶公式都是由一阶公式推导出来的:所以我们可以得到一个递推公式:
递推公式

五、一些实例

由公式推导的递推公式可知,不管多复杂的贝塞尔曲线,我们都可以拆分成一阶贝塞尔曲线。由此关系,我们在canvas中的曲线逻辑就有一个眉目了,下面是两个用贝塞尔曲线绘制的示意图片(canvas以为我们内置了两个函数quadraticCurveTo和bezierCurveTo,分别代表二次贝塞尔曲线和三次贝塞尔曲线)。

类别示例
头像头像
小孩小孩

由此可见,贝塞尔曲线的功能是很强大的,而他的应用也特别广泛,例如PhotoShop软件,SVG图片等等,我们都能看见他们的身影。
上述所有图片项目地址:贝塞尔曲线Demo


一些建议

  1. 平常绘图等尽量使用2-3阶贝塞尔曲线;
  2. 超过3阶的曲线尽量降阶为2-3阶贝塞尔曲线;
  3. 贝塞尔曲线本质上是一系列点的集合,需要大量的计算。

总结

贝塞尔曲线功能强大,应用广泛。我们不仅可以使用它绘制图片,还能应用与各个领域,例如激光切割啊等等。就像实例中展示的那样,使用贝塞尔曲线,我们可以绘制各种各样的图形,为计算机的图形图像技术产生了深远意义上的影响。基于此,贝塞尔曲线具有很高的研究意义,为我们的社会进步和发展注入了一针强心剂。

转自原文链接
本文至此结束
最后修改:2022 年 06 月 15 日
如果觉得我的文章对你有用,请随意赞赏