深入浅出贝塞尔曲线及应用示例

前言

贝塞尔曲线是计算机图形学(Computer Graphics)中相当重要的参数曲线,在前端领域中,尤其是可视化项目中扮演者举足轻重的作用,比如:

  1. CSS动画中使用cubic-bezier缓动函数
  2. 使用贝塞尔曲线拟合折线图中的点位,使折线图看起来更圆滑、美观。
  3. 钢笔工具

今天我们从贝塞尔曲线的定义出发,再到贝塞尔曲线的应用场景中,为大家深入的介绍贝塞尔曲线是怎样一回事。

贝塞尔曲线的定义

递归定义

一次贝塞尔曲线

首先我们先来看一下一次贝塞尔曲线

1-bezier.gif

图中,这个黄色的小球的运动轨迹即为贝塞尔曲线。

从上图中我们可以看到:一次贝塞尔曲线有2个控制点,设黄色小球的位置由一参数t[0,1]t\in[0,1]确定。

image.png

所以:

P=(1t)P1+tP2P = (1-t)P_1 + tP_2

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享