1 var TimeLine = function (_id) {
2 this.id = _id;
3 this._top = 40;
4 this.vHeight = 40;
5 this.global_top = 40;
6 this.line_height = 4;
7 this.radius = 6;
8 this.startPosition = 6;
9 this.text_top = 40;
10 this.text_margin = 20;
11 this.text_left = [6, 15];
12 this.canvas = null;
13 this.totalWidth = 0;
14 this.totalHeight = 0;
15 this.context = null;
16 this.stepPosition = 100;
17 this.font = "bold 35px sans-serif";
18 this.Init();
19 };
20
21 TimeLine.prototype = {
22 Init: function () {
23 this.canvas = document.getElementById(this.id);
24 if (this.canvas == null) {
25 return false;
26 }
27
28 this.totalWidth = this.canvas.clientWidth * 0.95;
29 this.totalHeight = this.canvas.clientHeight;
30 this.stepPosition = 0.1 * this.totalWidth;
31 this.global_top = 0.1 * this.totalHeight;
32 this.vHeight = 0.1 * this.totalHeight;
33 this.text_margin = 0.06 * this.totalHeight;
34 this.radius = 0.01 * this.totalHeight;
35 this.text_left = [0.01 * this.totalHeight, 0.01 * this.totalWidth];
36 this.startPosition = 0.02 * this.totalWidth;
37
38 this.context = this.canvas.getContext("2d");
39 //每次重绘前清空
40 this.context.clearRect(0, 0, this.totalWidth, this.totalHeight);
41 },
42
43 /**
44 *strDate:时间
45 *strContent：显示文本
46 *direction：走势，0水平，1垂直，-1结束
47 *status：状态，1，2已完成，0未完成
48 */
49 AddEvent: function (strDate, strContent, direction, status) {
50 if (this.canvas == null) {
51 return false;
52 }
53 var okColor = 'green', onColor = 'gray';
54 var passColor = "rgba(0,255,0,0.5)", waitColor = "rgba(99,99,99,0.5)";
55 var passStrokeColor = "green", waitStrokeColor = "rgba(99,99,99,0.5)";
56 if (direction == 0) {
57 this.stepPosition = strContent.length * 6;
58 if (this.stepPosition < 0.20 * this.totalWidth) this.stepPosition = 0.20 * this.totalWidth;
59 //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
60 this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
61 this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition, this.line_height);
62
63 //设置新图形（红色圆形）
64 this.context.beginPath();
65 this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
66 this.context.arc(this.startPosition + this.line_height / 2, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
67 this.context.fill();
68 this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
69 this.context.font = this.font;
70 //this.text_top=this.global_top+this.line_height+this.text_margin;
71 this.text_top = this.text_margin;
72 //context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
73 //context.strokeText(strContent,this.startPosition+text_left[0],this.text_top);
74 this.context.fillText(strContent, this.startPosition + this.text_left[0], this.text_top);
75 this.context.fillText(strDate, this.startPosition + this.text_left[0], this.global_top + this.text_top + 10);
76 this.startPosition += this.stepPosition;
77 }
78 else if (direction == 1) {
79 stepPosition = 50;
80 //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
81 this.context.fillStyle = ((status == 1) ? passColor : waitColor);
82 this.context.fillRect(this.startPosition, this.vHeight + this.radius + this.line_height / 2, this.line_height, this.stepPosition * 0.2);
83 this.vHeight += this.stepPosition * 0.2;
84 this._top += +this.stepPosition * 0.2;
85 //设置新图形（红色圆形）
86 this.context.beginPath();
87 this.context.fillStyle = ((status == 1) ? okColor : onColor);
88 this.context.arc(this.startPosition + this.line_height / 2, this.vHeight + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
89 this.context.fill();
90 this.context.fillStyle = ((status == 1) ? okColor : onColor);
91 this.context.font = this.font;
92 this.text_top = this._top + this.line_height / 2;
93 //this.context.strokeStyle = ((status==1)?passStrokeColor:waitStrokeColor);
94 //this.context.strokeText(strDate+' '+strContent,this.startPosition+text_left[1],this.text_top);
95 this.context.fillText(strDate + ' ' + strContent, this.startPosition + this.text_left[1], this.vHeight + 10);
96 //this.context.fillText(strContent,this.startPosition+this.text_left[1],this.text_top+this.text_margin);
97 }
98 else if (direction == -1) {
99 //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
100 this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
101 this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition * 0.7, this.line_height);
102 //设置新图形（红色圆形）
103 this.context.beginPath();
104 this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
105 this.context.arc(this.startPosition + this.line_height / 2 + this.stepPosition * 0.7 + this.radius, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
106 this.context.fill();
107 this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
108 this.context.font = this.font;
109 this.text_top = this.text_margin;
110 //context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
111 //context.strokeText(strContent,this.startPosition+this.text_left[0]+this.stepPosition*2.5,this.text_top);
112 this.context.fillText(strContent, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.text_top);
113 this.context.fillText(strDate, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.global_top + this.text_margin + 10);
114 }
115 }
116 };
浙公网安备 33010602011771号