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 };