zoukankan      html  css  js  c++  java
  • 贝塞尔曲线

    贝塞尔曲线是一个由确定点来生成曲线路径的方程,最初由法国工程师皮埃尔·贝塞尔用来作汽车的主体设计,该方程还可以用来生成动画的插值公式。

    贝塞尔曲线方程如下:

     

    其中:
    n是阶数,一阶的时候是线性方程,阶数=确定点的个数-1;
    i是表示所有点的序列索引,即P0,P1,P2……;
    P表示点的坐标(x,y);
    t表示时间自变量,并且介于0,1之间,可以等于0和1;

    通过该方程,我们可以写出求某个时刻的点坐标函数:
      

    function bezier(points,t){
       
    var i,
            n
    =points.length-1,
            x
    =0,
            y
    =0;
                
       
    function fn(p,n,i,t){
           
    return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);
        }
            
       
    for(i=0;i<n+1;i++){
            x
    +=fn(points[i][0],n,i,t);
            y
    +=fn(points[i][1],n,i,t);
        }
                    
       
    return [x,y];
    }


    其中参数points为所有的点,t为时刻,
    arrangement是求排列组合的函数,可以在完整代码中看到。

    这样我们可以在拥有多个点的序列后,再通过t的变化,就可以求出所有点组合成的贝塞尔曲线图形了:
       

    for (i = 0; i < 1; i += 0.001) {
        drawPoint.apply(
    this, bezier(points,i));
    }


    完整代码及演示(需要在支持canvas的浏览器中运行):

     更多贝塞尔曲线的相关知识请参考wikipedia 贝塞尔曲线

  • 相关阅读:
    当今世界最为经典的十大算法投票进行时
    HDU_1203 I NEED A OFFER!
    POJ_2352 Stars(树状数组)
    HDU_1231 最大连续子序列
    POJ_3264 Balanced Lineup(线段树练手题)
    【转】休息几分种,学几个bash快捷键
    HDU_1013 Digital Roots
    HDU_1381 Crazy Search
    POJ_2528 Mayor's posters(线段树+离散化)
    zoj_1610 Count tht Color
  • 原文地址:https://www.cnblogs.com/Random/p/2060301.html
Copyright © 2011-2022 走看看