• 贝塞尔曲线


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

    贝塞尔曲线方程如下:

     

    其中:
    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 贝塞尔曲线

  • 相关阅读:
    C++常用工具收集
    Ubuntu禁用触摸板
    Vim简本
    JS原型链模式和继承模式
    JS原型链模式
    JS中的单例模式/工厂模式/构造函数模式(并非完全意义上的设计模式)
    JS中一道关于this和闭包的题
    JS中的this关键字
    JS闭包
    JS作用域和作用域链
  • 原文地址:https://www.cnblogs.com/Random/p/2060301.html
Copyright © 2020-2023  润新知