ZRender绘制贝赛尔曲线

通过Canvas库ZRender提供的APIzrender.BezierCurve可以快速绘制贝赛尔曲线。

APIzrender.BezierCurve文档zrender.BezierCurve

起点、结束点和控制点

贝塞尔曲线的开始和结束点就是该曲线经过的两个点,贝塞尔曲线不经过控制点,但是可以通过控制点控制贝赛尔曲线起点和终点的切线方向。

贝赛尔曲线1个控制点

ZRender绘制贝赛尔曲线

  <div id="main" style="width:600px;height:600px;background:#ffffff;"></div>
  <script>
    var zr = zrender.init(document.getElementById('main'));
    var circle = new zrender.BezierCurve({
      shape: {
        x1: 20, // 起点横坐标
        y1: 400, // 起点纵坐标
        cpx1: 300, //控制点1横坐标
        cpy1: 50, //控制点1纵坐标
        x2: 580, // 结束点横坐标
        y2: 400, // 结束点纵坐标
      },
      style: {
        stroke: 'rgb(145, 128, 186)',//调节线条颜色
        lineWidth: 1,//调节线宽
      },
    });
    zr.add(circle);
  </script>

贝赛尔曲线2个控制点

ZRender绘制贝赛尔曲线

    var circle = new zrender.BezierCurve({
      shape: {
        x1: 20, // 起点横坐标
        y1: 400, // 起点纵坐标
        cpx1: 300-200, //控制点1横坐标
        cpy1: 50, //控制点1纵坐标
        cpx2: 300+200, //控制点2横坐标
        cpy2: 50, //控制点2纵坐标
        x2: 580, // 结束点横坐标
        y2: 400, // 结束点纵坐标
      },
      style: {
        stroke: 'rgb(145, 128, 186)',
        lineWidth: 1,
      },
    });
    zr.add(circle);

花括号实例

下面通过zrender.BezierCurve绘制一个花括号案例展示一下贝赛尔曲线的简单用法,体会下控制点的使用。

ZRender绘制贝赛尔曲线

  <div id="main" style="width:600px;height:600px;background:#ffffff;"></div>
  <script>
    var zr = zrender.init(document.getElementById('main'));
    //画布宽高
    var H = 600
    var W = 600
    // 起点坐标
    var start = {
      x:W/2,
      y:H/2,
    }
    //花括号上半部分结束点坐标
    var end = {
      x:W/2+100,
      y:10,
    }
    //花括号下半部分结束点坐标
    var end2 = {
      x:W/2+100,
      y:H-10,
    }
    //花括号上半部分
    var curve1 = new zrender.BezierCurve({
      shape: {
        x1: start.x,// 起点横坐标
        y1: start.y,// 起点纵坐标
        cpx1: start.x+70,//控制点1横坐标
        cpy1: start.y,//控制点1纵坐标
        cpx2: end.x-70,//控制点2横坐标
        cpy2: end.y,//控制点2纵坐标
        x2: end.x,// 结束点横坐标
        y2: end.y,// 结束点纵坐标
      },
      style: {
        stroke: 'rgb(145, 128, 186)',
        lineWidth: 1,
      },
    });
    zr.add(curve1);
    //花括号下半部分
    var curve2 = new zrender.BezierCurve({
      shape: {
        x1: start.x,// 起点横坐标
        y1: start.y,// 起点纵坐标
        cpx1: start.x+70,//控制点1横坐标
        cpy1: start.y,//控制点1纵坐标
        cpx2: end2.x-70,//控制点2横坐标
        cpy2: end2.y,//控制点2纵坐标
        x2: end2.x,// 结束点横坐标
        y2: end2.y,// 结束点纵坐标
      },
      style: {
        stroke: 'rgb(145, 128, 186)',
        lineWidth: 1,
      },
    });
    zr.add(curve2);
  </script>