Canvas Konva框架库

• 第三方的canvas库

• konvaJS https://konvajs.github.io/ 通用
• echart http://echarts.baidu.com/ 图表
• 白鹭时代 https://www.egret.com/ 游戏
• treeJS https://threejs.org/ 3d库

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

konva概念

• 舞台 stage
• 层 layer
• 组 group
• 图形

基本操作

• 创建舞台

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

• 创建层

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

基本图形

• 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();

//进度条案例

    var stage=new Konva.Stage({
            container:"box",
            width:window.innerWidth,
            height:window.innerHeight
        })
        var layer=new Konva.Layer()
        stage.add(layer)
        var width=800;
        var progressValue=new Konva.Rect({
            x:200,
            y:200,
            width:0,
            height:50,
            fill:"#abcdef"
        })
        layer.add(progressValue)
        var progressLine=new Konva.Rect({
            x:200,
            y:200,
            width:width,
            height:50,
            stroke:"#369",
            strokeWidth:4,
            cornerRadius:5
        })
        layer.add(progressLine)
        layer.draw()
        var animation=new Konva.Animation(function(){
            if(progressValue.width()