1.html**：
1doctype 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
>
8body
14style
>
15<
script
src="konva.js"
>
script
>
16<
script
src="progressbar.js"
>
script
>
17head
>
18<
body
>
19<
div
id="container"
>
20div
>
21<
script
>
22//
建立舞台
23var
stage
=new
konva.stage();
28//
建立層29
varlayer
=new
konva.layer();
30stage.add(layer);
31//
中心點座標
32var
cenx
=stage.width() /2
;33varceny
=stage.height() /2
;34varoption =;
42//
建立進度條物件例項；在new的時候呼叫初始化值；
43varp =
newprogressbar( option );
44//
把進度條放到 層中
45p.addtogrouporlayer( layer );
46//
渲染層47
layer.draw();
48p.changevalue( .5);
49script
>
50body
>
51html
>
2.js**：
1function progressbar( option ) 56
progressbar.prototype = );
2829
this.innerrect = innerrect;
3031
//新增乙個外邊框的 矩形
32var outerrect = new konva.rect();
4142
//html :
43// 建立乙個組， 相當於html中的父盒子。把其他兩個盒子包在裡面；當給其設定座標時，相當於進行絕對定位，這時候的子盒子是跟著父盒子進行定位的；
44this.group = new konva.group();
48this.group.add( innerrect );//把內部的矩形放到組中
49this.group.add( outerrect );
50},
51//此方法是將 使用者傳進來的需要改變的進度 執行動畫
52changevalue: function( val )
57//做動畫 val = .3 .7
58var width = this.w * val; //最終進度條內部矩形的 寬度。
5960
// 通過id選擇器去查詢內部的子元素。
61var innerrect = this.group.findone('#innerrect');
62// var innerrect = this.group.findone('rect');
6364
var innerrect = this.innerrect;
6566
// to動畫系統： 讓我們的物件 變換到某個狀態
67// 讓我們的 物件從 當前狀態 到 下面設定的狀態，
68innerrect.to();
7374
},75
// arg： 傳進來的層或者 是組，
76//此方法是：把當前建立的進度條 新增到 層中。
77addtogrouporlayer: function( layer )
80 }
物件導向思想，匿名物件，封裝
概念 基於面向過程，將過程進行物件的封裝。特點 物件導向是一種更符合思考習慣的思想 從過程的執行者，轉換成物件的指揮者 將複雜問題簡單化 類 用於描述事物 物件 類中事物具體的個體 概念 沒有名字的物件，是物件的簡化定義方式 匿名物件可以作為實際引數進行傳遞 如果物件對方法只進行一次呼叫，可以簡化為...
物件導向封裝外掛程式思想 jquery
寫了很多年的js 對於封裝成乙個通用的外掛程式 用過很多種方法 現在來一一來記錄下 所謂積累便是進步 每天一點點 每天就是一大步 廢話不多說我來看下 1.常用的jq 申明表示式 進行封裝的物件 看起來是不是很清晰 又不汙染變數 var a function var pml extend true,l...
go物件導向思想 封裝 繼承 多型
go 如何實現的封裝 繼承 和多型 封裝 go中是通過結構體的方法去模擬類 package objects 通過結構體的方式去模擬類 type user struct 根據方法的首字母的大小寫去判斷是否外部訪問 func user user getbike string 繼承 我們編寫乙個使用者資訊...