效果图如下：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>01进度条案例</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
</style>
<script src="bower_components/konva/konva.js"></script>
<script src="js/zxjstage.js"></script>
</head>
<body>
<!-- 存放canvas画布的容器 ，这个必须要有 -->
<div id="container">
</div>
<script>
//第一步： 创建舞台
var stage = new Konva.Stage({
container: 'container', //设置当前舞台的容器
width: window.innerWidth,//设置舞台的宽高全屏
height: window.innerHeight
});
//第二步： 创建层，一个舞台可以有多个层
var layer = new Konva.Layer();
//第三步： 把层添加到舞台上去。
stage.add(layer);
//创建的矩形
var option={
x: 1/8 * stage.width(),//进度条x坐标
y: 1/2 * stage.height(),//进度条y坐标
width: 3/4 * stage.width(),//进度条的宽度
height: 1/12 * stage.height(),//进度条的高度
fill: 'red',//进度条内部矩形的填充的颜色
stroke: 'blue',
strokeWidth: 4
}
//将option的内容放入Progress中
var s=new ProgressBar(option);//新建
s.addToGroupOrLayer(layer);//调用js中的函数，传值
//将矩形添加到层上，由于矩形建立在js中，所以必须到js中添加
/*layer.add(innerRect);//
layer.add(outerRect);
function addToGroupOrLayer(layer){
layer.add(innerRect);
layer.add(outerRect);
}*/
s.changeValue(70);
layer.draw();
</script>
</body>
</html>
javascript
function ProgressBar(option){
this._init(option);
}
//属性： width， height ， x， y ，innerStyle， outerStyle ， cornerRadius
//行为：修改进度条的进度 changeValue( val )
// 把进度条添加到层：addToGroupOrLayer( arg );
ProgressBar.prototype={
_init:function(option){
this.width=option.width;
this.height=option.height;
this.x=option.x;
this.y=option.y;
this.fill=option.fill;
this.stroke=option.stroke;
this.strokeWidth=option.strokeWidth;//线条宽度
// this.rect=option.rect;//传递过来的矩形
var innerRect=new Konva.Rect({
x:this.x,
y:this.y,
width:0,
height:this.height,
fill:this.fill,//填充色
cornerRadius: 1/2* this.height,
id:'innerRect',
name:'zzz'
});
this.innerRect=innerRect;//填充的内部矩形
var outerRect=new Konva.Rect({
x:this.x,
y:this.y,
width:this.width,
height:this.height,
stroke:this.stroke,//框的线条颜色
cornerRadius: 1/2* this.height
});
this.outerRect=outerRect;
this.Group=new Konva.Group({
x:0,
y:0
});
this.Group.add(innerRect);//将创建的矩形添加到父盒子Group中，有利于整理当创建多个矩形时调用
this.Group.add(outerRect);
},
addToGroupOrLayer:function(layer){
layer.add(this.Group);//将父亲盒子Group添加层上去
},
changeValue: function( val ) {
//传进来的进度
if( val > 1 ) { // 1 - 100 vs 0 -1 =>0.5
val = val /100;
}
//做动画 val = .3 .7
var width2 = this.width * val; //最终进度条内部矩形的 宽度。
// 通过“id选择器”去查找内部的子元素。对应innerRect里面的ID
var innerRect = this.Group.findOne('#innerRect');
// find:返回一个数组，findOne:返回一个
//类选择器，可能会查找多个
// var innerRect = this.Group.findOne('.zzz');
//标签选择器
// var innerRect = this.Group.findOne('Rect');
// 和Jquery中的查找方式很相似
// var innerRect = this.innerRect;
// to动画系统： 让我们的物件 变换到某个状态
// 让我们的 物件从 "当前状态 到 下面设置的状态，
innerRect.to({
width: width2,
duration: .3,//当前的状态到宽度为width2的状态，持续0.3秒
easing: Konva.Easings.EasIn//动画效果
});
}
}