一次二次三次bezier曲线的计算方式及demo演示

前言

假如大家有看过最新的css3动画特性,相比对cube-bezier这个动画设置有印象,假如又有看过svg的path,那么想必对bezier曲线这个路径如何设置也会感兴趣。至于bezier的理论,本人在博客搬运了几篇,这篇文章主要用JavaScript脚本来计算bezier的各个位置,演示出来。

代码

<%--

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>bezier曲线计算方式。title>
  <script src="/static/lib/jquery-1.11.0.min.js">script>
  <script src="/static/lib/jquery-migrate-1.2.1.js">script>
head>
<body>
<h3>一维贝塞尔曲线演示。h3>

<div>请在400X400的范围内div>
<div>请指定:起点:<input maxlength="4" value="0" id="linear_start_x">, <input maxlength="4" value="0" id="linear_start_y">  终点:<input maxlength="4" value="0" id="linear_end_x">,<input maxlength="4" value="0" id="linear_end_y"> div>
<div><input type="button" value="开始演示路径填充" id="btn_linear">div>
<div id="linear_debug">div>
<div>
  <canvas width="400" height="400" id="canvas_linear">canvas>
div>

<h3>二次贝塞尔曲线演示。h3>

<div>请在400X400的范围内div>
<div>请指定:起点:<input maxlength="4" value="0" id="sqrt_start_x">, <input maxlength="4" value="0" id="sqrt_start_y">  终点:<input maxlength="4" value="0" id="sqrt_end_x">,<input maxlength="4" value="0" id="sqrt_end_y"> div>
<div>控制点1:<input maxlength="4" value="0" id="sqrt_crt1_x">, <input maxlength="4" value="0" id="sqrt_crt1_y">div>
<div><input type="button" value="开始演示路径填充" id="btn_sqrt">div>
<div id="sqrt_debug">div>
<div>
  <canvas width="400" height="400" id="canvas_sqrt">canvas>
div>


<h3>三次贝塞尔曲线演示。h3>

<div>请在400X400的范围内div>
<div>请指定:起点:<input maxlength="4" value="0" id="cube_start_x">, <input maxlength="4" value="0" id="cube_start_y">  终点:<input maxlength="4" value="0" id="cube_end_x">,<input maxlength="4" value="0" id="cube_end_y"> div>
<div>控制点1:<input maxlength="4" value="0" id="cube_crt1_x">, <input maxlength="4" value="0" id="cube_crt1_y">div>
<div>控制点2:<input maxlength="4" value="0" id="cube_crt2_x">, <input maxlength="4" value="0" id="cube_crt2_y">div>
<div><input type="button" value="开始演示路径填充" id="btn_cube">div>
<div id="cube_debug">div>
<div>
  <canvas width="400" height="400" id="canvas_cube">canvas>
div>

<script type="text/javascript">
  //--线性bezier 曲线求值,根据t值来求值,t取值为[0,1],可以认为是0就在起点,1就在终点,是过程的百分比位置。
  var LinearBezier=function(point_start,point_end){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=point_start;
    p_end=point_end;
    //--计算t为某个值得时候的点。
    //--计算公式。
    /**
     *
     * [1 t]| 1   0| |P0|
     *      |-1   1| |P1|
     *
     * */
    this.getPoint=function(t){
      var _m_1_1=1-t;
      var _m_1_2= t;  //1*0+1*1+_t*0+_t*1;
      var _t_1_1= (1-t)*p_start.x+t*p_end.x; //0+(_t+1)*p_start.x+(_t+1)*p_end.x;
      var _t_1_2=(1-t)*p_start.y+t*p_end.y;   //0+(_t+1)*p_start.y+(_t+1)*p_end.y;
      var _res_point={
        x:_t_1_1
        ,y:_t_1_2
      };
      return _res_point;
    };
  };



  //--二次方bezier
  var SquareBezier=function(start_point,crt_point,end_point){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=start_point;
    p_end=end_point;
    var p_crt1=crt_point;
    /**
     * 计算公式:
     *            | 1  0  0|  |P0|
     * [1 t t*t ] |-2  2  0|  |P1|
     *            |1  -2  1|  |P2|
     * **/
    this.getPoint=function(t){
      var _matrix1=[1,t,t*t];
      var _matrix2=[
        [1,0,0]
        ,[-2,2,0]
        ,[1,-2,1]
      ];
      var _matrix3=[
            [p_start.x,p_start.y]
            ,[p_crt1.x,p_crt1.y]
            ,[p_end.x,p_end.y]
      ];
      var _matrix_tmp=[
        _matrix1[0]*_matrix2[0][0]+_matrix1[1]*_matrix2[1][0]+_matrix1[2]*_matrix2[2][0]
        ,_matrix1[0]*_matrix2[0][1]+_matrix1[1]*_matrix2[1][1]+_matrix1[2]*_matrix2[2][1]
        ,_matrix1[0]*_matrix2[0][2]+_matrix1[1]*_matrix2[1][2]+_matrix1[2]*_matrix2[2][2]
      ];
      var _matrix_final=[
              _matrix_tmp[0]*_matrix3[0][0]+_matrix_tmp[1]*_matrix3[1][0]+_matrix_tmp[2]*_matrix3[2][0]
              ,_matrix_tmp[0]*_matrix3[0][1]+_matrix_tmp[1]*_matrix3[1][1]+_matrix_tmp[2]*_matrix3[2][1]
      ];

      var _res_point={
        x:_matrix_final[0]
        ,y:_matrix_final[1]
      };
      return _res_point;
    };

  };//

  var CubeBezier=function(point_start,point1,point2,point_end){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=point_start;
    p_end=point_end;
    var p_crt1=point1;
    var p_crt2=point2;
    /**
     * 计算公式:
     *                  | 1  0  0   0|  |P0|
     * [1 t t*t  t*t*t] |-3  3  0   0|  |P1|
     *                  |3  -6  3   0|  |P2|
     *                  |-1  3  -3  1|  |p3|
     *
     * **/
    this.getPoint=function(t){
      var _matrix1=[1,t,t*t,t*t*t];
      var _matrix2=[
        [1,0,0,0]
        ,[-3,3,0,0]
        ,[3,-6,3,0]
        ,[-1,3,-3,1]
      ];

      var _matrix3=[
        [p_start.x,p_start.y]
        ,[p_crt1.x,p_crt1.y]
        ,[p_crt2.x,p_crt2.y]
        ,[p_end.x,p_end.y]
      ];
      var _matrix_tmp=[
        _matrix1[0]*_matrix2[0][0]+_matrix1[1]*_matrix2[1][0]+_matrix1[2]*_matrix2[2][0]+_matrix1[3]*_matrix2[3][0]
        ,_matrix1[0]*_matrix2[0][1]+_matrix1[1]*_matrix2[1][1]+_matrix1[2]*_matrix2[2][1]+_matrix1[3]*_matrix2[3][1]
        ,_matrix1[0]*_matrix2[0][2]+_matrix1[1]*_matrix2[1][2]+_matrix1[2]*_matrix2[2][2]+_matrix1[3]*_matrix2[3][2]
        ,_matrix1[0]*_matrix2[0][3]+_matrix1[1]*_matrix2[1][3]+_matrix1[2]*_matrix2[2][3]+_matrix1[3]*_matrix2[3][3]
      ];

      var _matrix_final=[
        _matrix_tmp[0]*_matrix3[0][0]+_matrix_tmp[1]*_matrix3[1][0]+_matrix_tmp[2]*_matrix3[2][0]+_matrix_tmp[3]*_matrix3[3][0]
        ,_matrix_tmp[0]*_matrix3[0][1]+_matrix_tmp[1]*_matrix3[1][1]+_matrix_tmp[2]*_matrix3[2][1]+_matrix_tmp[3]*_matrix3[3][1]
      ];

      var _res_point={
        x:_matrix_final[0]
        ,y:_matrix_final[1]
      };
      return _res_point;
    };


  };//
script>
<script type="text/javascript">
  function DrawPoint(x,y,_context){
    var cans=_context;
    var cxt=_context;
    cxt.beginPath();
    cxt.arc(x,y,1,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    return;
    //cans.moveTo(x,y);//第一个起点
    cans.lineTo(x,y);//第二个点
    //cans.lineTo(220,60);//第三个点(以第二个点为起点)
    cans.lineWidth=1;
    cans.strokeStyle = 'red';
    cans.stroke();
  }
script>
<script type="text/javascript">
  //--演示程序。线性贝塞尔
  var linear_start_x=$("#linear_start_x");
  var linear_start_y=$("#linear_start_y");
  var linear_end_x=$("#linear_end_x");
  var linear_end_y=$("#linear_end_y");
  var canvas_linear=document.getElementById("canvas_linear");
  var context_linear=canvas_linear.getContext("2d");
  var btn_linear=$("#btn_linear");
  var linear_showing=false;
  var linear_debug=$("#linear_debug");

  btn_linear.click(function(){
    if(linear_showing==true){
      linear_debug.text("程序正在进行演示,请稍后再进行操作。");
      return;
    }
    linear_showing=true;
    context_linear.clearRect(0,0,canvas_linear.width,canvas_linear.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(linear_start_x.val())
      ,y:parseInt(linear_start_y.val())
    };
    var _end_point={
      x:linear_end_x.val()
      ,y:linear_end_y.val()

    };
    DrawPoint(_start_point.x,_start_point.y,context_linear);

    DrawPoint(_end_point.x,_end_point.y,context_linear);

    var _bezier=new LinearBezier(_start_point,_end_point);
    function linearDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_linear);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);

        console.log("演示结束");
        linear_showing=false;
        return;
      }
      linearDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
script>

<script type="text/javascript">
  //--演示程序。二维贝塞尔
  var sqrt_start_x=$("#sqrt_start_x");
  var sqrt_start_y=$("#sqrt_start_y");
  var sqrt_end_x=$("#sqrt_end_x");
  var sqrt_end_y=$("#sqrt_end_y");
  var sqrt_crt1_x=$("#sqrt_crt1_x");
  var sqrt_crt1_y=$("#sqrt_crt1_y");
  var canvas_sqrt=document.getElementById("canvas_sqrt");
  var context_sqrt=canvas_sqrt.getContext("2d");
  var btn_sqrt=$("#btn_sqrt");
  var sqrt_showing=false;
  var sqrt_debug=$("#sqrt_debug");

  btn_sqrt.click(function(){
    if(sqrt_showing==true){
      sqrt_debug.text("程序正在进行演示,请稍后再进行操作。");
      return;
    }
    sqrt_showing=true;
    context_sqrt.clearRect(0,0,canvas_sqrt.width,canvas_sqrt.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(sqrt_start_x.val())
      ,y:parseInt(sqrt_start_y.val())
    };
    var _end_point={
      x:parseInt(sqrt_end_x.val())
      ,y:parseInt(sqrt_end_y.val())

    };
    var _crt_point1={
      x:parseInt(sqrt_crt1_x.val())
      ,y:parseInt(sqrt_crt1_y.val())
    };
    DrawPoint(_start_point.x,_start_point.y,context_sqrt);

    DrawPoint(_end_point.x,_end_point.y,context_sqrt);
    DrawPoint(_crt_point1.x,_crt_point1.y,context_sqrt);

    var _bezier=new SquareBezier(_start_point,_crt_point1,_end_point);
    function sqrtDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_sqrt);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);
        console.log("演示结束");
        sqrt_showing=false;
        return;
      }
      sqrtDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
script>

<script type="text/javascript">
  //--演示程序。三次贝塞尔
  var cube_start_x=$("#cube_start_x");
  var cube_start_y=$("#cube_start_y");
  var cube_end_x=$("#cube_end_x");
  var cube_end_y=$("#cube_end_y");
  var cube_crt1_x=$("#cube_crt1_x");
  var cube_crt1_y=$("#cube_crt1_y");
  var cube_crt2_x=$("#cube_crt2_x");
  var cube_crt2_y=$("#cube_crt2_y");
  var canvas_cube=document.getElementById("canvas_cube");
  var context_cube=canvas_cube.getContext("2d");
  var btn_cube=$("#btn_cube");
  var cube_showing=false;
  var cube_debug=$("#cube_debug");

  btn_cube.click(function(){
    if(cube_showing==true){
      cube_debug.text("程序正在进行演示,请稍后再进行操作。");
      return;
    }
    cube_showing=true;
    context_cube.clearRect(0,0,canvas_cube.width,canvas_cube.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(cube_start_x.val())
      ,y:parseInt(cube_start_y.val())
    };
    var _end_point={
      x:parseInt(cube_end_x.val())
      ,y:parseInt(cube_end_y.val())

    };
    var _crt_point1={
      x:parseInt(cube_crt1_x.val())
      ,y:parseInt(cube_crt1_y.val())
    };
    var _crt_point2={
      x:parseInt(cube_crt2_x.val())
      ,y:parseInt(cube_crt2_y.val())
    };
    DrawPoint(_start_point.x,_start_point.y,context_cube);

    DrawPoint(_end_point.x,_end_point.y,context_cube);
    DrawPoint(_crt_point1.x,_crt_point1.y,context_cube);

    DrawPoint(_crt_point2.x,_crt_point2.y,context_cube);

    var _bezier=new CubeBezier(_start_point,_crt_point1,_crt_point2,_end_point);
    function cubeDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_cube);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);
        console.log("演示结束");
        cube_showing=false;
        return;
      }
      cubeDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
script>
body>
html>

演示

线性演示

二次演示

三次演示

完毕。后续文章将介绍一些使用bezier曲线的地方。

你可能感兴趣的:(前端,贝塞尔曲线)