Skip to content

Instantly share code, notes, and snippets.

@zxhfighter
Last active May 13, 2018 03:34
Show Gist options
  • Save zxhfighter/7999371 to your computer and use it in GitHub Desktop.
Save zxhfighter/7999371 to your computer and use it in GitHub Desktop.
贝塞尔曲线

贝塞尔曲线

前言

如果你仔细留意的话,贝塞尔曲线其实无处不在,例如:

  • 英文字体
  • PS中的钢笔工具
  • CSS动画
  • SVG绘图
  • Canvas绘图

既然用途如此广泛,那么贝塞尔曲线究竟是什么,怎样生成的呢?

定义

贝塞尔曲线是图形学中一种重要的参数曲线(即由参数来控制曲线的形状),最开始是用来设计汽车形状的,后来慢慢沿用到其他领域。

贝塞尔曲线分为线性(Linear)、二次(Quadratic)、三次(Cubic)贝塞尔曲线,都有对应的数学公式,它们的特点如下:

  • 线性:两个端点,没有控制点,一条直线。
  • 二次:两个端点,一个控制点,一条曲线。
  • 三次:两个端点,二个控制点,二条曲线。

我们这里讨论的主要是三次贝塞尔曲线。

三次贝塞尔曲线

三次贝塞尔曲线是这样的一条曲线,它依据四个位置任意的点坐标绘制出的一条光滑曲线,其中有两个端点和两个控制点。下图中的P0和P3为曲线起始端点,P1和P2为控制曲率和方向的控制点。

cubic bezier curve

参考资料

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment