利用konva框架用面向对象的方式制造进度条

konva是一个canvas的框架,里面有些用法和jQuery十分相似,功能也十分强大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script src="js/konva.min.js"></script>
<script>
    /****************面向对象的封装***************/
    function Bar(option) {
        this._init(option);
    }

    Bar.prototype = {
        _init: function (option) {
            this.x = option.x;
            this.y = option.y;
            this.width = option.width;
            this.height = option.height;
            this.fillcolor = option.fillcolor;
            this.stroke = option.strokeStyle;
            this.strokeWidth = option.strokeWidth;
            this.corner = option.corner;
        },
        render: function (layer) {
            var group = new Konva.Group({
                x:0,
                y:0
            });
            layer.add(group);
            var outRect = new Konva.Rect({
                x:innerWidth/8,
                y:innerHeight/2,
                width:innerWidth*3/4,
                height:innerHeight/20,
                stroke:this.stroke,
                strokeWidth:this.strokeWidth,
                cornerRadius:this.corner
            });
            group.add(outRect);
            var inRect = new Konva.Rect({
                x:innerWidth/8,
                y:innerHeight/2,
                width:innerWidth*3/4,
                height:innerHeight/20,
                fill:this.fillcolor,
                cornerRadius:this.corner,
                id:"inRect"
            });
            group.add(inRect);
            group.draw();
        },
        move: function () {
            stage.find("#inRect").to({
                width:this.width/3,
                yoyo:true
            })
        }
    };

    /****************应用操作***************/
    var stage = new Konva.Stage({
        width:innerWidth,
        height:innerHeight,
        container:"box"
    });

    var layer = new Konva.Layer({});

    stage.add(layer);

    var bar = new Bar({
        x:stage.width()/8,
        y:stage.height()/2,
        width:stage.width()*3/4,
        height:stage.height()/10,
        strokeStyle:"#ccc",
        strokeWidth:6,
        fillcolor:"red",
        corner:6
    });

    bar.render(layer);
    bar.move();
    stage.draw();
</script>
</body>
</html>
利用konva框架用面向对象的方式制造进度条

推荐阅读更多精彩内容
