初识贝塞尔曲线

贝塞尔曲线在CSS动画中和canvas、svg绘图中都是比较重要的一个东西!所以我来好好的小结一下关于它的一些东西。

什么是贝塞尔曲线

贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。

贝塞尔曲线被广泛用于制图软件中。
以前描述曲线并没有很好的方法,直到它的出现。
如果你用过PS、AI之类的制图软件,想必一定会很好理解。

你可以登录https://bezier.method.ac/这个网站,在线学习体验使用PS中的钢笔工具,进行绘制各种形状的图案。

二次贝塞尔曲线

图片描述

二次贝塞尔曲线,我们要绘制出来需要指定:

  • 起点
  • 终点
  • 控制点

我们可以看到如图所示,在控制点和起点的中点,连接上了控制点与终点的中点,这根线的终点,就是与曲线相交的一个点。
可以认为控制点像一个磁铁一样,把线吸了过去。

图片描述

多边二次贝塞尔曲线
可以看到有两个控制点,这样连续画出来了。
如果想要连贯的曲线,那么它们的控制点应该是中心对称的。
图片描述

三次贝塞尔曲线

三次贝塞尔曲线可以包括一个拐点。
它拥有两个控制点,两个控制点中间的中点,分别连接控制点与起点、终点的连线的中点。这两根线的中点分别相连接,这个中点就是和曲线相交的地方(有点绕,看图就明白了!)
图片描述

这一般也是绘图软件里常用的:
图片描述

应用

在CSS中的应用

我们可以指定动画的运动曲线。在CSS中运用的也是三次贝塞尔曲线。

cubic-bezier(控制点x1, 控制点y1, 控制点x2, 控制点y2)

这个代表的是速度曲线,也就是y值是速度,可以看到粉红色和蓝色的圆点就是两个控制点:
图片描述

而我们CSS中内置的一些默认的属性值,实际上是存了贝塞尔曲线的一些预设:
图片描述

更多可以在:贝塞尔CSS在线体验 这里进行体验。

SVG

在SVG中定义一个二次贝塞尔曲线,用字母Q来表示,紧跟控制点和终点坐标:

<path d="M30 75 Q240 30, 300 120" style="stroke: black; fill: none;"/>

意思是,我们绘制一条路径,先把点Move(M)移动到(30, 75)的位置,然后开始绘制!
以(240, 30)为控制点,曲线的终点是(300, 120)。

如果我们要绘制多边二次贝塞尔曲线,直接在Q后面继续跟两组坐标:

Q 80 30, 100 100, 130 65, 200 80

比如这组数据,就是在(100, 100)画完一边后,继续以(130, 65)为控制点,画到(200, 80)为终点。

然后,我们提到之前的中心对称问题,可以直接使用T字母来表示中心对称的控制点。

Q 80 30, 100 100, T, 200 80

如果我们要绘制三次贝塞尔曲线,后面跟着的坐标组就有3个,分别就是起点的控制点、终点的控制点和端点(终点)。用字母C来开头指定。

M20 80, C 50 20, 150 60, 200 120

另外还有字母S开头,S x2 y2 x y,表示用x2 y2作为控制点,第一个控制点是前一个C命令的终点控制点的中心对称点。(如果前一个曲线不存在,当前点就是第一个控制点)

canvas

在canvas中使用quadraticCurveTo绘制二次贝塞尔曲线,参数分别为控制点和终点的x,y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20)'
ctx.stroke();

bezierCurveTo绘制三次贝塞尔曲线。参数为起点控制点、终点控制点和终点的x、y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)'
ctx.stroke();

最后

本文是根据自己的一些小积累和资料查找总结出来的,如果有错误欢迎指正^_^,谢谢。