初识贝塞尔曲线

MasonEast 发布于2019-08-29 17:07 / 2783人阅读

摘要：贝塞尔曲线被广泛用于制图软件中。多边二次贝塞尔曲线可以看到有两个控制点，这样连续画出来了。如果前一个曲线不存在，当前点就是第一个控制点在中使用绘制二次贝塞尔曲线，参数分别为控制点和终点的值。绘制三次贝塞尔曲线。

贝塞尔曲线在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来表示，紧跟控制点和终点坐标：

意思是，我们绘制一条路径，先把点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();

最后

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

GPU云服务器云服务器贝塞尔曲线贝塞尔曲线详解贝塞尔曲线整理 docker初识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114112.html

用canvas绘制一个曲线动画——深入理解贝塞尔曲线

摘要：实现这样一个曲线动画可以点击这里查看在线演示在写代码之前，先了解一下什么是贝塞尔曲线吧。绘制二次贝赛尔曲线路径这样就完成了基本的绘制二次贝塞尔曲线的方法了。我的github博客地址 https://github.com/hujiulong/... 前言在前端开发中，贝赛尔曲线无处不在：它可以用来绘制曲线，在svg和canvas中，原生提供的曲线绘制都是使用贝赛尔曲线它也可以...

xiaowugui666 2019-08-21 18:35 评论0 收藏0
如何理解并应用贝塞尔曲线

摘要：动画曲线的应用了解了如何用贝塞尔曲线来指定动画曲线后，很多动画涉及到速度方面的效果就可以实现了，例如小车加速刹车，弹簧动画等速度轨迹都可以根据自己的需要来进行定制。贝塞尔曲线又叫贝兹曲线，在大学高数中一度让我非常头疼。前阵子练手写动画的时候，发现贝塞尔曲线可以应用于轨迹的绘制以及定义动画曲线。本文就来探究一下，贝塞尔曲线到底是个什么样的存在。贝塞尔曲线原理贝塞尔曲线由n个点来决...

余学文 2019-08-23 15:54 评论0 收藏0
css3 动画（二）贝塞尔曲线

摘要：根据方程的最高阶数，可以分为线性贝塞尔曲线二次贝塞尔曲线三次贝塞尔曲线以及更高次的贝塞尔曲线。贝塞尔曲线扫盲在中使用的函数，是一个三次贝塞尔曲线函数。三次贝塞尔曲线中四个点，在中第一个点和最后一个点是固定坐标的和是传入函数中的参数的。前言上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性： ...

soasme 2019-08-30 15:54 评论0 收藏0
贝塞尔曲线算法之JS获取点

摘要：什么是贝塞尔曲线贝塞尔曲线，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。这个是三阶贝塞尔曲线，同理，绿点有个，点与点之间都是按百分比运动，最终得到一个小黑点。同理，还有四阶贝塞尔。我们看看中阶贝塞尔曲线上获取点的效果的地址什么是贝塞尔曲线？贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。 showImg(htt...

SQC 2019-08-23 16:12 评论0 收藏0