前端开发是一门艺术

Canvas Konva框架库

2017-06-06  本文已影响1951人  飞鱼_JS

konva概念

基本操作

var stage = new Konva.Stage({
            container:"box",
            width:1000,
            height:600
        });
var layer = new Konva.Layer();
        stage.add(layer);
...........
layer.draw();  //绘制层

基本图形

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);
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);
var wedge = new Konva.Wedge({
            x:500,
            y:500,
            radius:100,
            fill:"yellow",
            stroke:"green",
            angle:60,
            rotation:90
        })
        layer.add(wedge);
var text = new Konva.Text({
            x:700,
            y:30,
            text:"小萍萍\n您好",
            fontSize:60,
            fontFamily:"MicrosoftYaHei",
            fill:"green",
            stroke:"red"
        })
        layer.add(text);
var line = new Konva.Line({
            points:[10,10,500,10,500,200],
            stroke:"green",
            strokeWidth:3,
            dash:[10,5],
            closed:true
        });

        layer.add(line);
  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();

动画

//持续转动 动画
        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();
//持续转动 动画
        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()<width){
                progressValue.width(progressValue.width()+10)
            }else{
                animation.stop()
            }
        },layer)
        animation.start()
上一篇 下一篇

猜你喜欢

热点阅读