贝塞尔曲线 (Bézier Curve)
source link: https://leovan.me/cn/2019/02/bezier-curve/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
贝塞尔曲线 (Bézier Curve)
范叶亮 / 2019-02-19
分类: 数学, 可视化 / 标签: 贝塞尔曲线, Bézier Curve / 字数: 1187
知道贝塞尔曲线 (Bézier Curve) 这个名字已经有很长一段时间了，但一直没有去详细了解一番。直到最近想要绘制一个比较复杂的曲线，才发现很多工具都以贝塞尔曲线为基础的，这包括 Adobe 全家桶中的钢笔工具，还有 OmniGraffle 中的曲线。迫于仅靠猜其是如何工作的但一直没猜透的无奈，只能去详细了解一下其原理再使用了。
贝塞尔曲线 (Bézier Curve) 是由法国工程师皮埃尔·贝兹 (Pierre Bézier) 于 1962 年所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计 1。贝塞尔曲线最初由保尔·德·卡斯特里奥 (Paul de Casteljau) 于 1959 年运用德卡斯特里奥算法 (De Casteljau’s Algorithm) 开发，以稳定数值的方法求出贝塞尔曲线。
线性贝塞尔曲线
给定点 P0,P1，线性贝塞尔曲线定义为：
(1)B(t)=(1−t)P0+tP1,t∈[0,1]
不难看出，线性贝塞尔曲线即为点 P0 和 P1 之间的线段。
对于 P0=(4,6),P1=(10,0)，当 t=0.25 时，线性贝塞尔曲线如下图所示：
整个线性贝塞尔曲线生成过程如下图所示：
二次贝塞尔曲线
给定点 P0,P1,P2，二次贝塞尔曲线定义为：
(2)B(t)=(1−t)2P0+2t(1−t)P1+t2P2,t∈[0,1]
对于 P0=(0,0),P1=(4,6),P2=(10,0)，当 t=0.25 时，二次贝塞尔曲线如下图所示：
整个二次贝塞尔曲线生成过程如下图所示：
三次贝塞尔曲线
给定点 P0,P1,P2,P3，三次贝塞尔曲线定义为：
(3)B(t)=(1−t)3P0+3t(1−t)2P1+3t2(1−t)P2+t3P3,t∈[0,1]
对于 P0=(0,0),P1=(−1,6),P2=(6,6),P3=(12,0)，当 t=0.25 时，三次贝塞尔曲线如下图所示：
整个三次贝塞尔曲线生成过程如下图所示：
一般化的贝塞尔曲线
对于一般化的贝塞尔曲线，给定点 P0,P1,⋯,Pn， n 次贝塞尔曲线定义为：
(4)B(t)=∑i=0n(ni)(1−t)n−itiPi,t∈[0,1]
(5)bi,n(t)=(ni)(1−t)n−iti
称之为 n 阶 Bernstein 多项式，点 Pi 称为贝塞尔曲线的控制点。从生成过程来看，贝塞尔曲线是通过 n 次中介点 (Qj,Rk,Sl) 生成的，一个更加复杂的四次贝塞尔曲线 (t=0.25) 如下图所示：
整个四次贝塞尔曲线生成过程如下图所示：
其中，Q0=(1−t)P0+tP1，R0=(1−t)Q0+tQ1，S0=(1−t)R0+tR1，B=(1−t)S0+tS1 为构成贝塞尔曲线的点。
上述图形和动画的绘制代码请参见这里。
在很多绘图软件中，钢笔工具使用的是三次贝塞尔曲线，其中起始点和结束点分别对应 P0 和 P1，起始点和结束点的控制点分别对应 P2 和 P3。
在利用钢笔工具绘图时，可以参考如下建议来快速高效地完成绘图 2：
- 控制点尽可能在曲线的最外侧或最内侧。
- 除了曲线的结束处外，控制点的控制柄尽可能水平或垂直。
- 合理安排控制点的密度。
下面两张图分别展示了一个原始的字母图案，以及参考上述建议利用贝塞尔曲线勾勒出来的字母图案边框：
最后推荐一个网站 The Bezier Game，可以帮助更好的理解和掌握基于贝塞尔曲线的钢笔工具使用。
← 如何阅读一本书 (How to Read a Book) 关不掉的浏览器标签页 (Browser Tabs You do not Close) →
Recommend
-
128
Android 自定义贝塞尔曲线工具 之前在学习贝塞尔曲线的相关内容,在查找相关资料的时候发现网上的资料重复的太多了,而且因为android的canvas只提供了quadTo,cubicTo两种方法来绘制二阶和三阶的贝塞尔曲线.在线的贝塞尔曲线绘制网站也很少
-
46
贝塞尔曲线（Bezier Curve）在计算机图形领域应用非常广泛，比如我们熟知的 CSS 动画、 Canvas 以及 Photoshop 等都可以看到贝塞尔曲线的身影。 文章目录 一、什么是贝塞尔曲线？ 二、贝塞尔曲线分为哪些类型？ 三、贝塞尔曲线是如何
-
35
话说为什么笔者我要求虐去研究什么贝塞尔曲线？讲真，我一个数学一般般，高数及格飘过的人为什么要求虐去搞数学公式啊！研究完贝塞尔曲线，我突然想好好学习数学。真的是数学不好，学什么编程啊。（哭晕在草稿纸中……） 正片干货在此： 科普时间 提到贝塞尔曲线，大...
-
35
背景：因为公司需要做等级切换查看对应的权益，需要做一个曲线运动的一个动画形式，现决定用贝塞尔曲线的动画和CAKeyframeAnimation 动画的形式实现 上图
-
15
作者：哈哈将 -个推 Android 高级开发工程师前言APP开发市场已经告别“野蛮生长”时代，人们不再满足于APP外形创新，而将目光转向全方面的用户体验上。在这过程中，动效化作为移动互联网产品的新趋势，如何实现酷炫丝滑的动画效果已然成为开发者们的新课题。实现
-
10
by zhangxinxu from https://www.zhangxinxu.com 本文地址：https://www.zhangxinxu.com/wordpress/?p=3...
-
16
贝塞尔曲线开发的艺术 一句话概括贝塞尔曲线：将任意一条曲线转化为精确的数学公式。 很多绘图工具中的钢笔工具，就是典型的贝塞尔曲线的应用，这里的一个网站可以在线模拟钢笔工具的使用：
-
11
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4197
-
11
使用贝塞尔曲线实现道具随机飞动效果 2020-12-12 1 工作中，遇到了一个需求是要实现获得道具和货币的飞动效果： 根据道具的多少生成不同数目的道具 ...
-
3
帮助大家理解贝赛尔曲线(Bézier curve)本文摘自 勾三股四 更早时期的 不老歌 博客。在包括Photoshop钢笔工具在内的很多绘图软件里，大家会发现一般的...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK