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

  • 相关阅读:
    在 idea 下搭建的第一个MyBatis项目及增删改查用法
    解决idea中Tomcat服务器日志乱码及控制台输出乱码
    idea 设置自动生成方法的快捷键 类似于main() 方法
    windows下Tomcat根据日期生成日志catalina.out
    springmvc <from:from>标签的使用
    Spring+Quartz集群环境搭建
    Quartz整合Spring
    Quartz 基本编码
    java中 线程池和 callable 创建线程的使用
    SpringSecurity权限管理框架--基于springBoot实现授权功能
  • 原文地址:https://www.cnblogs.com/Random/p/2060301.html
Copyright © 2011-2022 走看看