开始

Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果

konva概念

• 画布 stage
• 层 layer
• 组 group
• 图形

基本操作

• 创建画布

var stage = new Konva.Stage({
          container:"box",
          width:600,
          height:600
      });

• 创建层

var layer = new Konva.Layer();
      stage.add(layer);
...........
layer.draw();  //绘制层

• 绘制 layer.draw()

基本图形

这里跟canvas很相似，会canvas的朋友在这里学习起来几乎是零学习成本。

• Konva.Rect() 矩形

var rect = new Konva.Rect({
          x:100,
          y:100,
          width:200,
          height:100,
          fill:"red",
          stroke:"green",
          strokeWidth:10,
          cornerRadius:5,
          //rotation:45
          draggable:true
      })
      layer.add(rect);

• Konva.Circle() 圆形

var circle = new Konva.Circle({
          x:300,
          y:300,
          radius:100,
          stroke:"orange",
          strokeWidth:4,
          fill:"green",
          draggable:true,
          dash:[10,5,20,5]
      })
      layer.add(circle);

• Konva.Wedge() 扇形

var wedge = new Konva.Wedge({
         x:500,
         y:500,
         radius:100,
         fill:"yellow",
         stroke:"green",
         angle:60,
         rotation:90
     })
     layer.add(wedge);

• Konva.Ellipse() 椭圆
• Konva.Text() 文字

var text = new Konva.Text({
          x:700,
          y:30,
          text:"小萍萍\n您好",
          fontSize:60,
          fontFamily:"MicrosoftYaHei",
          fill:"green",
          stroke:"red"
      })
      layer.add(text);

• Konva.Image() 图片
• Konva.Line() 划线

var line = new Konva.Line({
          points:[10,10,500,10,500,200],
          stroke:"green",
          strokeWidth:3,
          dash:[10,5],
          closed:true
      });

      layer.add(line);

• Konva.star() 星星

var star = new Konva.Star({
          x:600,
          y:400,
          innerRadius:50,
          outerRadius:100,
          numPoints:12,
          fill:"red"
      });
      layer.add(star);

• 绘制曲线

      var line2 = new Konva.Line({
          points:[20,200,500,200,400,400],
          stroke:"blue",
          strokeWidth:5,
          tension:-2

      })
      layer.add(line2);

事件

类似于jquery

var rect = new Konva.Rect({
            x:100,
            y:100,
            width:200,
            height:200,
            fill:"red",
            stroke:"green",
            strokeWidth:5,
            cornerRadius:5,        
        })
        layer.add(rect);

        rect.on("mouseenter", function(){
            this.rotation(45);
            layer.draw();
        }).on("mouseleave", function(){
            this.rotation(0);
            layer.draw();
        })
        layer.draw();

动画

• tween对象 指定动画持续时间 指定变化的样式 tween.play()

//持续转动 动画
      var star = new Konva.Star({
          numPoints:10,
          x:500,
          y:200,
          innerRadius:50,
          outerRadius:100,
          fill:"red"
      })
      layer.add(star);
      var tween1 = new Konva.Tween({
          node:star,
          duration:1,
          rotation:360,
          onFinish:function(){
              tween1.reset();
              tween1.play();
          }
      });
      tween1.play();

• 简写 图形.to()

  var rect2 = new Konva.Rect({
      x:400,
      y:400,
      width:100,
      height:50,
      stroke:"green",
      fill:"red"
  })
  layer.add(rect2);
  rect2.to({
      duration:1,
      width:200,
      height:100
  })

• Animation对象

//持续转动 动画
      var star = new Konva.Star({
          numPoints:5,
          x:500,
          y:200,
          innerRadius:50,
          outerRadius:100,
          fill:"red"
      })
      layer.add(star);    
      //Animation对象
      var animate = new Konva.Animation(function(frame){
          //console.log(frame);
          star.rotate(10);
      }, layer);
      animate.start();