1.html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 6 <title>02面向对象版本的进度条</title> 7 <style> 8 body { 9 padding: 0; 10 margin: 0; 11 background-color: #f0f0f0; 12 overflow: hidden; 13 } 14 </style> 15 <script src="konva.js"></script> 16 <script src="progressBar.js"></script> 17 </head> 18 <body> 19 <div id="container"> 20 </div> 21 <script> 22 //创建舞台 23 var stage = new Konva.Stage({ 24 container: 'container', 25 window.innerWidth,//全屏 26 height: window.innerHeight 27 }); 28 //创建层 29 var layer = new Konva.Layer(); 30 stage.add(layer); 31 //中心点坐标 32 var cenX = stage.width() / 2; 33 var cenY = stage.height() / 2; 34 var option = {//把参数设置成对象形式； 35 x: 1/8 * stage.width(), //进度条x坐标 36 y: 1/2 * stage.height(), //进度条y坐标 37 w: 3/4 * stage.width(), //进度条的宽度 38 h: 1/12 * stage.height(), //进度条的高度 39 fillStyle: 'red', //进度条内部矩形的填充的颜色 40 strokeStyle: 'blue' //进度条的外边框的颜色 41 }; 42 // 创建进度条对象实例；在new的时候调用初始化值； 43 var p = new ProgressBar( option ); 44 //把进度条放到 层中 45 p.addToGroupOrLayer( layer ); 46 //渲染层 47 layer.draw(); 48 p.changeValue( .5 ); 49 </script> 50 </body> 51 </html>
2.js代码：
1 function ProgressBar( option ) { 2 //new 构造函数执行的时候，调用 内部的初始化方法。 3 this._init( option ); 4 } 5 6 ProgressBar.prototype = { 7 //类初始化的时候：创建内部矩形， 外部矩形，然后把两个矩放到goroup里面去。 8 _init: function( option ) { 9 this.x = option.x || 0; //进度条的x坐标 10 this.y = option.y || 0; // 进度条的y坐标 11 this.w = option.w || 0; //进度条的宽度 12 this.h = option.h || 0; //进度条的高度 13 14 this.fillStyle = option.fillStyle || 'red'; 15 this.strokeStyle = option.strokeStyle || 'red'; 16 17 //定义的内部的进度条的矩形 18 var innerRect = new Konva.Rect({ 19 x: this.x, // stage.width(),获得舞台的宽度， x：设置当前矩形x坐标 20 y: this.y, 21 0, //设置矩形的宽度 22 height: this.h, //设置矩形的高度 23 fill: this.fillStyle, //设置矩形的填充的颜色 24 cornerRadius: 1/2 * this.h, //设置进度条的圆角。 25 id: 'innerRect', //设置当前矩形的ID，以便于后面进行使用ID选择器 26 name: 'ss' //设置name,方便后面用类选择器。 27 }); 28 29 this.innerRect = innerRect; 30 31 //添加一个外边框的 矩形 32 var outerRect = new Konva.Rect({ 33 x: this.x, // stage.width(),获得舞台的宽度， x：设置当前矩形x坐标 34 y: this.y, 35 this.w, //设置矩形的宽度 36 height: this.h, //设置矩形的高度形的高度 37 stroke: this.strokeStyle, // 设置了stroke那么，矩形就进行描边 38 strokeWidth: 4, // 设置边框的宽度， 39 cornerRadius: 1/2* this.h, 40 }); 41 42 //html : 43 // 创建一个组， 相当于html中的父盒子。把其他两个盒子包在里面；当给其设置坐标时，相当于进行绝对定位，这时候的子盒子是跟着父盒子进行定位的； 44 this.group = new Konva.Group({ 45 x: 0, 46 y: 0 47 }); 48 this.group.add( innerRect );//把内部的矩形放到组中 49 this.group.add( outerRect ); 50 }, 51 //此方法是将 用户传进来的需要改变的进度 运行动画 52 changeValue: function( val ) { 53 //传进来的进度 54 if( val > 1 ) { // 1 - 100 vs 0 -1 =>0.5 55 val = val /100; 56 } 57 //做动画 val = .3 .7 58 var width = this.w * val; //最终进度条内部矩形的 宽度。 59 60 // 通过id选择器去查找内部的子元素。 61 var innerRect = this.group.findOne('#innerRect'); 62 // var innerRect = this.group.findOne('Rect'); 63 64 var innerRect = this.innerRect; 65 66 // to动画系统： 让我们的物件 变换到某个状态 67 // 让我们的 物件从 当前状态 到 下面设置的状态， 68 innerRect.to({ 69 width, 70 duration: .3, 71 easing: Konva.Easings.EasIn 72 }); 73 74 }, 75 // arg： 传进来的层或者 是组， 76 //此方法是：把当前创建的进度条 添加到 层中。 77 addToGroupOrLayer: function( layer ) { 78 layer.add( this.group ); 79 } 80 }