利用面向对象思想封装Konva动态进度条

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         width: 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             width: 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             width: 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: 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 }

 

posted @ 2017-11-29 11:37  前端极客  阅读(414)  评论(0)  编辑  收藏  举报