1. 贝塞尔曲线(Bézier Curves)

在进入具体原理讲解之前，首先看一下一条实际的贝塞尔曲线长什么样子

其中为控制点，蓝色所表示曲线正是非常著名的贝塞尔曲线了，可以从图中观察到，曲线会与初始与终止端点相切，并且经过起点与终点。那么这样一条曲线究竟是怎么得到的呢？

其实贝塞尔曲线的定义很像参数方程，给定一个参数就能确定贝塞尔曲线上的一点，倘若取完所有t值，就能得到完整的贝塞尔曲线，了解一下大概之后，接下来我们就开始介绍计算曲线的过程。

首先从简单的3个控制点情形出发，示意如何画出曲线。 (n个控制点得到的是n-1次曲线，如图中3个控制点便是2次贝塞尔曲线)

正如一开始所说，第一步选定一个参数，在线段之上利用t值进行线性插值:

即，得到之后在线段上重复做相同的线性插值得到点:

通过给点参数t计算得到点之后将两点连接，相信许多读者都能猜到下一步是什么了，没错就是在线段之上再进行一次线性插值！

如此便成功获得了如图所示的3个控制点之下的2次贝塞尔曲线上的一点了，那么对所有的都重复上述的过程，就可以得到上图所示的蓝色贝塞尔曲线了。通过这样一个简单的3个控制点的例子，相信很快就能理解贝塞尔曲线的原理，那么对于4个控制点，5个控制点，乃至任意控制点步骤都是类似的。

其核心所在就是多次的线性插值，并在生成的新的顶点所连接构成的线段之上递归的执行这个过程，直到得到最后一个顶点

如下图这样一个4个控制顶点的例子，步骤完全类似:

那么我们为何称由n个控制点的贝塞尔曲线为n-1次呢？同样以一开始的3个控制点为例，将贝塞尔曲线方程完全展开看看

其实看到这就已经非常清楚了，最终得到的贝塞尔曲线方程恰好就是一个关于参数 t 的二次方程，如果细心观察的话，其实可以发现控制点的系数是非常有规律的，很像二项系数，因此可以总结规律得到一个任意控制点组成的贝塞尔曲线的方程如下:

对于这样一个特殊系数其实也有一个多项式与之对应，正是伯恩斯坦多项式，其定义如图中下方所示。

好了至此就是贝塞尔曲线原理的所有内容了，相信显现在对于任意的控制点，都能很快的画出对应的曲线，最后我们对贝塞尔曲线的几点性质做一个概括:

必定经过起始与终止控制点
必定经与起始与终止线段相切
具有仿射变换性质，可以通过移动控制点移动整条曲线
凸包性质，曲线一定不会超出所有控制点构成的多边形范围

回想一下PS等具有画图功能的软件中的钢笔工具所运用的便是贝塞尔曲线了，除了这个例子之外许多字体或是矢量图都广泛运用了贝塞尔曲线。但对于高阶贝塞尔曲线它有一个严重的缺陷:

对于上图所示的由11个控制点所得到的10次贝塞尔曲线，由于控制点众多，很难控制局部的贝塞尔曲线形状，因此为了解决该问题，有人提出了分段贝塞尔曲线，即将一条高次曲线分成多条低次曲线的拼接，其中用的最多的便是用很多的3次曲线来拼接，如下图:

(注：上图是一个贝塞尔曲线的网页demo，有兴趣读者可以去玩玩) 如果想要使得拼接的点看起来较为光滑的话，就要满足一些连续条件如一阶连续(连接点导数的左右极限相等)，二阶连续等等，这些都是高数的基础知识，在此不多做赘述。

对于本文来说，贝塞尔曲线到这里就已经讲解完毕了，但其实除了贝塞尔曲线之外还有B样条曲线，NURBS曲线等等。简单说两句

B样条曲线相对于贝塞尔曲线可以更好的进行局部控制 NURBS曲线可以得到一些B样条曲线无法精准描述的圆锥曲线，如下图:

相对于贝塞尔曲线来说，这两种曲线更加深入与复杂，读者可以自行收集资料，本文不作过多展开

2. 贝塞尔曲面(Bézier Surfaces)

其实在理解了贝塞尔曲线之后，贝塞尔曲面的原理也是十分容易理解的了，无非是一个从2维到3维的过渡。

如果说对于曲线来说只有一个参数转存失败重新上传取消那么对于一个面来说，就应该有两个参数，分别设，，具体过程如下图所示:

首先规定一共4x4 = 16个控制点，其水平面位置如图中16个黑点所示(并未表示出高度，防止图形太乱)，将这16个点分成4列，图中红色圈中的为一列的具体例子。

第1步在这4个控制点之下利用第一个参数 u转存失败重新上传取消运用第一章的计算贝塞尔曲线的方法得到蓝色点，因为有4列，所以一共可以得到如图所示的4个蓝色点。(灰色曲线分别为每列4个点所对应的贝塞尔曲线)

第2步在得到4个蓝色顶点之后，在这四个蓝色顶点的基础之下利用第二个参数 v转存失败重新上传取消便可以成功得出贝塞尔曲面上的正确一点

第3步遍历所有的 u，v值就可以成功得到一个贝塞尔曲面

贝塞尔曲线与贝塞尔曲面相关推荐

光滑曲线_计算机图形学十：贝塞尔曲线与贝塞尔曲面
贝塞尔曲线与贝塞尔曲面 1 贝塞尔曲线(Bézier Curves) 在进入具体原理讲解之前,首先看一下一条实际的贝塞尔曲线长什么样子其中为控制点,蓝色所表示曲线正是非常著名的贝塞尔曲线了,可以 ...
贝塞尔曲线和贝塞尔曲面_TimelineMax：处理贝塞尔（Bézier）补间
贝塞尔曲线和贝塞尔曲面当您需要高级功能时,GSAP插件非常有用. 我将在本教程中解释的BezierPlugin可以帮助沿定义为点/值数组的弯曲贝塞尔曲线路径上的几乎任何一个或多个属性设置动画. 在跳 ...
【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )
文章目录一.二阶贝塞尔曲线公式二.三阶贝塞尔曲线三.高阶贝塞尔曲线贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.二阶贝塞尔曲线公式二 ...
【Android UI】贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )
文章目录一.一阶贝塞尔曲线二.二阶贝塞尔曲线贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.一阶贝塞尔曲线一阶贝塞尔曲线本质是一条直 ...
java贝塞尔曲线_贝塞尔曲线学习
贝塞尔曲线学习 1.贝塞尔曲线以下公式中: B(t)为t时间下点的坐标: P0为起点,Pn为终点,Pi为控制点一阶贝塞尔曲线(线段): 一阶贝塞尔曲线公式一阶贝塞尔曲线演示意义:由 P0 至 ...
Bézier曲线和 Bézier曲面 ( 贝塞尔曲线和贝塞尔曲面 )
Bézier曲线定义给定空间n+1个点的位置矢量Pi(i=0,1,2-),则Bezier参数曲线上各点坐标的插值公式是:P(t)=∑i=0nPiBi,n(t),t∈[0,1]P(t)=\sum_{ ...
贝塞尔曲线 java_贝塞尔曲线理论及实现——Java篇
贝塞尔曲线贝塞尔曲线(The Bézier Curves),是一种在计算机图形学中相当重要的参数曲线(2D,3D的称为曲面).贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézi ...
java 贝塞尔曲线_贝塞尔曲线：原理、自定义贝塞尔曲线View、使用！！！
一.原理转自:http://www.2cto.com/kf/201401/275838.html Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation Pr ...
android 贝塞尔曲线人脸,贝塞尔曲线绘制人脸框（框内全透明，框外半透明）
参考CropImage 制作截取头像框https://github.com/cokeduo/CropImage https://www.jianshu.com/p/c883fbf52681 //贝塞尔 ...

贝塞尔曲线与贝塞尔曲面

1. 贝塞尔曲线(Bézier Curves)

2. 贝塞尔曲面(Bézier Surfaces)

贝塞尔曲线与贝塞尔曲面相关推荐

最新文章

热门文章