Konva.js图形绘制教程-CSDN博客

一、Canvas第三方类库

1、常见的第三方类库

konva.js

  <style>
          body{
              margin:0;
          }
      </style>
  </head>
  <body>
      <div id="box"></div>
      <script src="../konva/konva.min.js"></script>
      <script>
          //创建舞台
          var stage=new Konva.Stage({
              container:"#box",
              width:window.innerWidth,
              height:window.innerHeight
          });
          //创建层
          var layer=new Konva.Layer({

          });
          stage.add(layer);
          //创建图形
          var star=new Konva.Star({
              x:stage.getWidth()/2,
              y:stage.getHeight()/2,
              innerRadius:80,
              outerRadius:200,
              fill:"Red"
          });
          layer.add(star);
          //绘制层
          layer.draw();
      </script>

chart.js 图表插件
eccharts 图表插件（百度）
tree.js(3d webgl 库)

二、第三方类库Konva

1、Konva的结构
舞台(stage)-->层(layer)-->图形

Statge -->Layer -->分组（-->分组-->）-->图形

                Stage
                  |
           +------+------+
           |             |
         Layer         Layer
           |             |
     +-----+-----+     Shape
     |           |
   Group       Group
     |           |
     +       +---+---+
     |       |       |
  Shape   Group    Shape
             |
             +
             |
           Shape

2、Konva绘制图形

Konva.Rect

  <script>
          //创建舞台
          var stage=new Konva.Stage({
              container:"#box",
              width:window.innerWidth,
              height:window.innerHeight
          });
          //创建层
          var layer=new Konva.Layer({
              x:100,
              y:100
          });
          stage.add(layer);
          //创建一个组
          var group=new Konva.Group({
              x:100,
              y:100
          });
          layer.add(group);
          //创建矩形
          var rect=new Konva.Rect({
              x:0,
              y:0,
              width:100,
              height:100,
              stroke:"red"
          });
          group.add(rect);
          layer.draw();
  </script>

Konva.Circle

  //绘制圆形
  var circle=new Konva.Circle({
      x:stage.getWidth()/2,
      y:stage.getHeight()/2,
      radius:100,
      stroke:"red",
      fill:"green"
  });
  layer.add(circle);

Konva.Wedge

  //绘制扇形
  var wedge=new Konva.Wedge({
      x:200,
      y:400,
      radius:100,
      fill:"yellow",
      stroke:"orange",
      angle:90,
      rotation:-10
  });
  layer.add(wedge);

Konva.Line

  //绘制线条
  var line1=new Konva.Line({
      points:[700,100,900,200,800,400],
      stroke:"skyblue",
      strokeWidth:4,
      lineCap:"round",
      lineJoin:"round",
      closed:true,
      tension:true//曲线
  });
  layer.add(line1);

Konva.Star
Konva.Image

3、事件

点击正方形改变圆角最后变成圆

    <div id="box"></div>
    <script src="../konva/konva.min.js"></script>
    <script>
        //创建舞台
        var stage=new Konva.Stage({
            container:"#box",
            width:window.innerWidth,
            height:window.innerHeight
        });
        var layer=new Konva.Layer({

        });
        stage.add(layer);

        var rect=new Konva.Rect({
            x:stage.getWidth()/2,
            y:stage.getHeight()/2,
            width:200,
            height:200,
            stroke:"#000",
            strokeWidth:5,
            fill:"yellow",
            offset:{
                x:100,
                y:100
            }
        });
        layer.add(rect);
        layer.draw();

        rect.on("click",function(ev){
            rect.cornerRadius(rect.cornerRadius()+5);
            rect.scale({
                x:1.5,
                y:1.5
            })
            layer.draw();

        })
        
    </script>

4、绘制

创建一个矩形： Konva.Rect(option);

    //Konva使用的基本案例
    //第一步：创建舞台
    var stage = new Konva.Stage({
        container: 'container',     //需要存放舞台的Dom容器
        width: window.innerWidth,   //设置全屏
        height: window.innerHeight
    });

    //第二步：创建层
    var layer = new Konva.Layer();  //创建一个层
    stage.add(layer);               //把层添加到舞台

    //第三步： 创建矩形
    var rect = new Konva.Rect({     //创建一个矩形
        x: 100,                     //矩形的x坐标，相对其父容器的坐标
        y: 100,                      
        width: 100,                 //矩形的宽度
        height: 100,                //矩形高度
        fill: 'gold',               //矩形填充的颜色
        stroke: 'navy',             //矩形描边的颜色
        strokeWidth: 4,             //填充宽度
        opactity: .2,               //矩形的透明度
        scale: 1.2,                 //矩形的缩放 1：原来大小
        rotation: 30,               //旋转的角度，是deg不是弧度。
        cornerRadius: 10,           //圆角的大小（像素） 
        id: 'rect1',                //id属性，类似dom的id属性
        name: 'rect',
        draggable: true             //是否可以进行拖拽
    });

    //创建一个组
    var group = new Konva.Group({
        x: 40,      
        y: 40,
    });
    group.add( rect );  //把矩形添加到组中

    //第四步： 把形状放到层中
    layer.add( group ); //把组添加到层中
    layer.draw();       //绘制层到舞台上

5、动画

01、Konva.Tween

    <div id="box"></div>
    <script src="../konva/konva.min.js"></script>
    <script>
        //创建舞台
        var stage=new Konva.Stage({
            container:"#box",
            width:window.innerWidth,
            height:window.innerHeight
        });

        var layer=new Konva.Layer({

        });
        stage.add(layer);

        //绘制五星
        var star=new Konva.Star({
            x:stage.getWidth()/2,
            y:stage.getHeight()/2,
            innerRadius:100,
            outerRadius:200,
            fill:"orange",
            stroke:"red",
            strokeWidth:6,
            numPoints:6
        });
        layer.add(star);
        layer.draw();

        var tween=new Konva.Tween({
            node:star,
            duration:2,
            rotation:360,
            easing:Konva.Easings.Linear,
            // yoyo:true
            onFinish:function(){
                tween.reset();
                tween.play();
            }
        });
        tween.play();
        star.on("mouseenter",function(){
            tween.pause();
        }).on("mouseleave",function(){
            tween.play();
        })
    </script>

1、tween的控制方法
tween.play(), //播放动画
tween.pause(), //暂停动画
tween.reverse(), //动画逆播放
tween.reset(), //重置动画
tween.finish(), //立即结束动画
seek：英文：寻找英 [siːk] 美 [sik]
2、tween的缓动控制选项
Konva.Easings.Linear //线性
Konva.Easings.EaseIn //缓动，先慢后快
Konva.Easings.EaseOut //先快后慢
Konva.Easings.EaseInOut //两头慢，中间快
Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
Konva.Easings.BackEaseOut
Konva.Easings.BackEaseInOut
Konva.Easings.ElasticEaseIn //橡皮筋英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
Konva.Easings.ElasticEaseOut
Konva.Easings.ElasticEaseInOut
Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回英 [baʊns] 美 [baʊns]
Konva.Easings.BounceEaseOut
Konva.Easings.BounceEaseInOut
Konva.Easings.StrongEaseIn //强力
Konva.Easings.StrongEaseOut
Konva.Easings.StrongEaseInOut

02、Konva.to

to就是对tween的封装，比较简单好用

  heart.to({
      scaleX:.5,
      scaleY:.5,
      duration:2,
      yoyo:true
  });

转载于:https://www.cnblogs.com/DCL1314/p/7875410.html

Canvas开发库封装

一、Canvas第三方类库

1、常见的第三方类库

二、第三方类库Konva

1、Konva的结构

2、Konva绘制图形

3、事件

点击正方形改变圆角最后变成圆

4、绘制

创建一个矩形： Konva.Rect(option);

5、动画

01、Konva.Tween

02、Konva.to