04月27, 2017

来!说说贝塞尔!

贝塞尔曲线大家应该都不陌生吧,今天来聊聊贝塞尔曲线,网上的帖子一大堆,弱弱地说,我只是个搬运工。。。。

写在前面的话,通常贝塞尔曲线用来友好的绘制各种各样的曲线,所以在css3,svg,canvas中都有涉及。

贝塞尔曲线的来源

贝塞尔曲线是什么?一句话,是一个函数绘制在坐标中的图像。我这么说你一定觉得我在和你开玩笑,好吧,原理一会介绍,我们先来说说它从哪里来。

alt恩,据说就是他,他叫贝塞尔,贝塞尔在天文学上有较多贡献,在天体测量方面,他重新订正《巴拉德雷星表》,加上岁差和章动以及光行差的改正,并把位置归算到1760年的春分点.....balabala.....(省略若干不重要的字)。他在数学研究中提出了贝塞尔函数,讨论了该函数的一系列性质及其求值方法,为解决物理学和天文学的有关问题提供了重要工具。

贝塞尔曲线的原理

我们先以二次贝塞尔为例,用图形直观的解释一下这个概念。

在一个平面内任选 3 个不共线的点,依次用线段连接。如图 alt

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD,与该线段总长 AB 的比例。 alt

根据上一步得到的比例,从第二条线段上找出对应的点 E,使得 AD:AB = BE:BC。 alt

连接这两点 DE。

alt

从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB = BE:BC。 alt

到这里,我们就确定了贝塞尔曲线上的一个点 F。接下来,请稍微回想一下中学所学的极限知识,让选取的点 D 在第一条线段上从起点 A 移动到终点 B,找出所有的贝塞尔曲线上的点 F。所有的点找出来之后,我们也得到了这条贝塞尔曲线。 alt

随着t从0变到1的动态过程

alt

好了,现在直观的图像解释法结束,我们用数学函数的角度再来一遍。

杨辉三角大家应该都不陌生吧?恩,不陌生。

alt

如上图,我们现在把公式代入:

(x+y)¹=x+y         系数:1 1
(x+y)²=x²+2xy+y²    系数:1 2 1
(x+y)³ = x³+3x²y+3xy²+y³  系数:1 3 3 1

以此类推。。。

假设x=t,y=1-t,t∈(0,1),以上表达式就成为:

(t + (1-t))³ =  t³+3t²(1-t)+3t(1-t)²+(1-t)³

我们把公式抽象成函数: alt

然后再取无穷大:

alt

综上所述,我们可以知道:

贝塞尔曲线就是与t相关的速度曲线函数

几次贝塞尔取决于函数中最高次数啦,像我们上面替换的B(t)就是三次贝塞尔曲线的表达式。

贝塞尔曲线的应用

alt

实际中,我们尤以三次贝塞尔曲线使用频繁,比如:

  • css3中cubic-bezier(x1,y1, x2,y2)
  • svg中<path d="M0 0 C x1 y1, x2, y2, 1 1”/>
  • canvas中ctx.moveTo(0,0);ctx.bezierCurveTo(x1,y1,x2,y2,1,1)

  • 那么我们来看一下,三次贝塞尔曲线的动态标示:

    alt

    在css3中我们利用cubic-bezier(x1,y1,x2,y2)这个函数来对动画速度变化,具体来说: alt

    图中有是个点,p0,p1,p2,p3,其中p0,p3的坐标是固定的,也就是说曲线弯曲程度是有p1,p2两个控制点决定的。来给你们感受一下。。。 点我试试

    同理,在SVG中d中包含了四个点的坐标,需要将P0,P3的坐标也加入其中。 canvas中则需要P1,P2,P3的坐标。

    恩,就这么多啦!

    参考链接: http://www.cnblogs.com/hnfxs/p/3148483.html http://blog.csdn.net/nibiewuxuanze/article/details/48229393 https://segmentfault.com/a/1190000008219430

    本文链接:https://www.imwineki.cn/post/Beziercurve.html

    -- EOF --

    Comments

    评论加载中...

    注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。