贝塞尔曲线的计算方式与js计算

这篇文章可能偏一点,用到了一些线性代数的知识,但是在网上发现有人在问这方面的问题用js如何实现,于是这里就顺带讨论一下贝塞尔曲线以及我的一个实现方式.我的实现只提供数据接口,只有用什么方式来展现这些数据,可以自己定义,这里我提供了两个实现,

        一个是用div画图,在任何浏览器下都可以运行:

http://html-js.com/mj/version1.0.3/test/Bezier_html.html

一个是canvas实现,只能在支持canvas的浏览器中执行:

http://html-js.com/mj/version1.0.3/test/Bezier.html

如果只是想在程序中画出普通的贝塞尔曲线,请使用程序绘图api,很简单,例如html5 canvas中的arc方法,本文只做研究用.

       希望本文可以对正在查找此方面资料的人有所帮助,如果觉得没啥用的可以直接飘走了,因为这个的确没啥大用,目前来说. 


1.什么是三维贝塞尔曲线?和前端开发有什么鸟关系?

看一段官方的解释:贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上，研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”~也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名~是为贝塞尔曲线。

关键就是用四个点来定义一条曲线.就像你在上面的demo中看到的一样.由ABCD四个点定义了这条曲线的形状.

那我们平常会在什么地方接触到贝塞尔曲线呢?首先,最常见的就是画图工具中的钢笔工具,初学钢笔工具的人可能觉得用起来不是很顺手,但是这的确是一种产生平滑曲线的很有效的方法.

对于前端开发来说,如果你有关注过css3的动画的滑动效果,你会发现这样一个缓动的效果:

1. transition-timing-function
   
2. Values: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)

复制代码

最后的cubic-bezier的意思就是三维贝塞尔曲线,参数中定义的分别是两个控制点的位置(起始点和结束点是已知的).然后我们就可以让效果任意变化了.这里我们通过三维贝塞尔创造出了平滑的曲线,然后生成了平滑的动画.在很多框架和库中都提供了动画的缓动效果,不过这些效果和css3的效果比起来就要逊色很多了,他们的效果都是预定义的,没有通过用户自定义来实现贝塞尔平滑的,有的程序提供了自定义,但是因为不是贝塞尔方法,定义的效果不是很平滑.

2.贝塞尔的计算方法贝塞尔曲线是个很复杂的数学模型,对于我们这些学过一点点线性代数甚至没有学过线性代数的人来说,他的原理实在是太深奥了,如果感兴趣,可以去看看这篇文章,他讲述了如何用c++来实现贝塞尔曲线,但是这篇文章中也没有将太多原理,而只是在最后给出了一个计算公式,我们需要的就是这个公式:

哦,这个公式我看了半天没看懂这些参数到底指的是什么.下面其实还有一个公式,我用的是这个:

这个公式看起来很清楚,p0,p1,p2,p3分别代表四个点,其中p0和p3是起始点,p1,p2是控制点.t参数表示一个时间参数.最后输出的结果p(t)则是一个在某个时刻计算出来的点的坐标.注意,这里的t是平滑的时间变动,并不代表坐标轴上的任何意义,是和空间相互独立的.p0,p1,p2,p3以及最后得出的结果都是一个二维的点的坐标.在我的框架中有一个对象,叫做Vector,它表示所有二维的值,例如坐标,速度,加速度,力的大小等等,它有两个值,分别是x和y.

好吧,这是一个矩阵计算,如果你不知道如何计算矩阵,可以去买一本<<线性代数>>看看,其实很简单,如果不想看,可以看我的矩阵类是如何实现的,这个矩阵计算的类叫做:Matrix:

1. var matrix=function(config){
   
2.         this._init(config)
   
3.     }
   
4.     matrix.prototype={
   
5.         _init:function(config){
   
6.             if(config&&config.data)
   
7.                 this.data=config.data;
   
8.         },
   
9.         /**
   
10.          * 矩阵相乘
    
11.          * @param {matrix} m 被乘的矩阵
    
12.          */
    
13.         mul:function(m){
    
14.             var r=[],s=this.data,m=m.data,
    
15.             p=s[0].length //每次运算相加的次数
    
16.             if(m.length!=s[0].length) {
    
17.                 T.trace("矩阵不能相乘")
    
18.             }
    
19.             for(var i =0;i
20.                 r[i]=[]
    
21.                 for(var n=0;n
22.                     r[i][n]=0;
    
23.                     for(var l=0;l
24.                         r[i][n]+=s[i][l]*m[l][n];
    
25.                     }
    
26.                 }
    
27.             }
    
28.             this.data=r;
    
29.             return this;
    
30.         },
    
31.         set:function(data){
    
32.             this.data=data;
    
33.         },
    
34.         get:function(){
    
35.             return this.data
    
36.         },
    
37.         toString:function(){
    
38.             return this.data.to_s()
    
39.         }
    
40.     }

复制代码

3.让我们定义一个表示三维贝塞尔的对象.

首先,我们根据上面的矩阵公式,定义一个三维贝塞尔的对象:叫做:cubicBezier,这个对象的作用就是,你传入四个用Vector表示位置的点(两个起始点和终止点,两个控制点).然后传入一个t的大小,它就会返回一个计算后的点给引擎:

1. var cubicBezier=function(config){
   
2.        this._init(config)
   
3.    }
   
4.    cubicBezier.prototype={
   
5.        _init:function(config){
   
6.            var p=this.points=config.points;
   
7.            this.m1=new MJ.Matrix();
   
8.            this.m2=new MJ.Matrix({
   
9.                data:[
   
10.                [1,0,0,0],
    
11.                [-3,3,0,0],
    
12.                [3,-6,3,0],
    
13.                [-1,3,-3,1]
    
14.                ]
    
15.            });
    
16.            this.m3=new MJ.Matrix({
    
17.                data:[
    
18.                p.p0.toArray(),
    
19.                p.p1.toArray(),
    
20.                p.p2.toArray(),
    
21.                p.p3.toArray()
    
22.                ]
    
23.            })
    
24.            this.m=null
    
25.        },
    
26.        /**
    
27.         * 获取某个时间点计算出来的坐标值,时间线不由此类控制
    
28.         */
    
29.        get:function(t){
    
30.            this.m1.set([
    
31.                [1,t*t,t*t*t,t*t*t*t]
    
32.                ]);
    
33.            this.m=this.m1.mul(this.m2).mul(this.m3)
    
34.            return new MJ.Vector(this.m.get()[0][0],this.m.get()[0][1]);
    
35.        }
    
36.    }

复制代码

4.好了,开始玩吧!万事具备了,可以开始玩了…

现在我们有了一个 cubicBezier对象,你只需要给他四个点和一个时间参数,它就可以返回一个计算结果给你.那我们就定义四个点,然后让t从0开始不断变大,没变大一次的时候,我们就把四个点和t传给cubicBezier,然后得到一个返回的点的坐标,我们就用js把这个坐标画上一个东西或者最后把这些点连线起来,这就是我上面的demo做的事情:

1. var points={
   
2.             p0:new $.Vector(0,0),
   
3.             p1:new $.Vector(100,620),
   
4.             p2:new $.Vector(1000,33),
   
5.             p3:new $.Vector(800,600)
   
6.         }
   
7.         var cb=new $.CubicBezier({
   
8.             points:points
   
9.         });
   
10.         var p;
    
11.         var inter=setInterval(function(){
    
12.             t+=0.01;
    
13.             if(t>1){
    
14.                 end()
    
15.             }
    
16.             p=cb.get(t)
    
17.           //根据p的坐标画点
    
18.         },10)

复制代码

希望对正在查找这方面资料的人有帮助,不清楚的可以直接咨询我的qq:676588498或者email:[email protected].
转载请注明出处:http://www.html-js.com/?p=1031