3
帮助大家理解贝赛尔曲线(Bézier curve)
source link: https://jiongks.name/blog/2011-02-23
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)
本文摘自 勾三股四 更早时期的 不老歌 博客。
在包括Photoshop钢笔工具在内的很多绘图软件里，大家会发现一般的曲线都可以通过对几个结点的拖拽完成修改，曲线的两端有两个端点，拖拽端点，就会改变曲线的起始点和结束点；两个端点周围又各自延伸出一个控制点，通过一条辅助的直线段和端点连接起来。拖拽两个控制点，曲线的弯曲度就会发生改变。总体感觉有点像织毛衣：一条弯曲的毛线，毛线两端有两根毛线针，呵呵。
这可能是大家对曲线直观的感觉吧，但其实这四个点构成的曲线就是一条三维贝塞尔曲线。
百科中对它的介绍比较抽象，不过我喜欢用数据和公式来说话：
首先n维贝塞尔曲线的公式为：
n
x = ∑ C(n,i) * t^i * (1-t)^(n-i) * xi
0＜i＜1
n
y = ∑ C(n,i) * t^i * (1-t)^(n-i) * yi
0＜i＜1如果到我们这里的三维贝赛尔曲线，那就是：
x = C(3,0) * (1-t)^3 * x0 +
C(3,1) * t * (1-t)^2 * x1 +
C(3,2) * t^2 * (1-t) * x2 +
C(3,3) * t^3 * x3
= (1-t)^3 * x0 +
3t(1-t)^2 * x1 +
3t^2(1-t) * x2 +
t^3 * x3
= x0 (1-t)^3 + 3 x1 t(1-t)^2 + 3 x2 t^2(1-t) + x3 t^3
y = y0 (1-t)^3 + 3 y1 t(1-t)^2 + 3 y2 t^2(1-t) + y3 t^3举个例子，如果起始点为(0,0)，结束点为(2,0)，两个控制点分别为(0,1)和(2,1)，那么x0~x3分别为0,0,2,2，y0~y3分别为0,1,1,0。上面的公式就变为：
x = 0 + 0 + 6 t^2(1-t) + 2 t^3
y = 0 + 3 t(1-t)^2 + 3 t^2(1-t) + 0这就是通过4个结点得到的贝塞尔曲线的二元参数方程式。
在实际应用中，我个人接触到的方程示意比较少，基本都是大家通过可视化的作图工具将曲线调整出理想的结果，然后再记录或推断出端点、控制点的坐标的。这里仅供了解理论知识。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK