贝塞尔曲线的全解析
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。
曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。
1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。
贝塞尔曲线为计算机矢量图形学奠定了基础。
它的主要意义在于无论是直线或曲线都能在数学上予以描述。
抛物线的三切线定理:
设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11,则如下比例成立:
当P0,P2固定,引入参数t,令上述比值为t:(1-t),即有:
t从0变到1,第一、二式就分别表示控制二边形的第一、二条边,它们是两条 一次Bezier曲线 。将一、二式代入第三式得:
依次类推,
由四个控制点定义的三次Bezier曲线P03可被定义为分别由(P0,P1,P2)和(P1,P2,P3)确定的两条二次Bezier曲线的线性组合。
即由 (n+1) 个控制点Pi(i=0,1,...,n)定义的n次Bezier曲线P0n可被定义为分别由 前、后n个控制点 定义的 两条(n-1)次 Bezier曲线P0n-1与P1n-1的线性组合:
由此得到Bezier曲线的递推计算公式:
以下公式中:B(t)为t时间下点的坐标;P0为起点,Pn为终点,Pi为控制点
由 P0 至 P1 的连续点P01,描述的一条线段:
transition-timing-function 规定过渡效果的时间曲线为贝塞尔曲线
transition: all 2s cubic-bezier( p1x, p1y, p2x, p2y )
项目预览地址: http://jsrun.net/tr3Kp