diff options
Diffstat (limited to '')
-rw-r--r-- | js/RrdGfxCanvas.js | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/js/RrdGfxCanvas.js b/js/RrdGfxCanvas.js new file mode 100644 index 0000000..070b806 --- /dev/null +++ b/js/RrdGfxCanvas.js | |||
@@ -0,0 +1,254 @@ | |||
1 | /** | ||
2 | * | ||
3 | * This program is free software; you can redistribute it and/or modify it | ||
4 | * under the terms of the GNU General Public License as published by the Free | ||
5 | * Software Foundation; either version 2 of the License, or (at your option) | ||
6 | * any later version. | ||
7 | * | ||
8 | * This program is distributed in the hope that it will be useful, but WITHOUT | ||
9 | * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or | ||
10 | * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for | ||
11 | * more details. | ||
12 | |||
13 | * You should have received a copy of the GNU General Public License along | ||
14 | * with this program; if not, write to the Free Software Foundation, Inc., | ||
15 | * 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA | ||
16 | |||
17 | * | ||
18 | * Manuel Sanmartin <manuel.luis at gmail.com> | ||
19 | **/ | ||
20 | |||
21 | "use strict"; | ||
22 | |||
23 | /** | ||
24 | * RrdGfxCanvas | ||
25 | * @constructor | ||
26 | */ | ||
27 | var RrdGfxCanvas = function(canvasId) | ||
28 | { | ||
29 | this.canvas = document.getElementById(canvasId); | ||
30 | this.ctx = this.canvas.getContext('2d'); | ||
31 | }; | ||
32 | |||
33 | RrdGfxCanvas.prototype.size = function (width, height) | ||
34 | { | ||
35 | this.canvas.width = width; | ||
36 | this.canvas.height = height; | ||
37 | }; | ||
38 | |||
39 | RrdGfxCanvas.prototype.set_dash = function (dashes, n, offset) | ||
40 | { | ||
41 | |||
42 | }; | ||
43 | |||
44 | RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color) | ||
45 | { | ||
46 | X0 = Math.round(X0); | ||
47 | Y0 = Math.round(Y0); | ||
48 | X1 = Math.round(X1); | ||
49 | Y1 = Math.round(Y1); | ||
50 | |||
51 | if (Y0 === Y1) { | ||
52 | Y0 += 0.5; | ||
53 | Y1 += 0.5; | ||
54 | } else if (X0 === X1) { | ||
55 | X0 += 0.5; | ||
56 | X1 += 0.5; | ||
57 | } | ||
58 | this.ctx.save(); | ||
59 | this.ctx.lineWidth = width; | ||
60 | this.ctx.strokeStyle = color | ||
61 | this.ctx.beginPath(); | ||
62 | this.ctx.moveTo(X0, Y0); | ||
63 | this.ctx.lineTo(X1, Y1); | ||
64 | this.ctx.stroke(); | ||
65 | this.ctx.restore(); | ||
66 | }; | ||
67 | |||
68 | RrdGfxCanvas.prototype.dashed_line = function (X0, Y0, X1, Y1, width, color, dash_on, dash_off) | ||
69 | { | ||
70 | X0 = Math.round(X0); | ||
71 | Y0 = Math.round(Y0); | ||
72 | X1 = Math.round(X1); | ||
73 | Y1 = Math.round(Y1); | ||
74 | |||
75 | this.ctx.save(); | ||
76 | this.ctx.lineWidth = width; | ||
77 | this.ctx.strokeStyle = color; | ||
78 | |||
79 | this.ctx.beginPath(); | ||
80 | if (Y0 === Y1) { | ||
81 | Y0 += 0.5; | ||
82 | Y1 += 0.5; | ||
83 | if (X0 > X1) { | ||
84 | var swap = X0; | ||
85 | X0 = X1; | ||
86 | X1 = swap; | ||
87 | } | ||
88 | this.ctx.moveTo(X0, Y0); | ||
89 | var n=0; | ||
90 | while(X0<=X1) { | ||
91 | if (n%2 === 1) { | ||
92 | X0 += dash_on; | ||
93 | this.ctx.lineTo(X0, Y0); | ||
94 | } else { | ||
95 | X0 += dash_off; | ||
96 | this.ctx.moveTo(X0, Y0); | ||
97 | } | ||
98 | n++; | ||
99 | } | ||
100 | } else if (X0 === X1) { | ||
101 | X0 += 0.5; | ||
102 | X1 += 0.5; | ||
103 | if (Y0 > Y1) { | ||
104 | var swap = Y0; | ||
105 | Y0 = Y1; | ||
106 | Y1 = swap; | ||
107 | } | ||
108 | this.ctx.moveTo(X0, Y0); | ||
109 | var n=0; | ||
110 | while(Y0<=Y1) { | ||
111 | if (n%2 === 1) { | ||
112 | Y0 += dash_on; | ||
113 | this.ctx.lineTo(X0, Y0); | ||
114 | } else { | ||
115 | Y0 += dash_off; | ||
116 | this.ctx.moveTo(X0, Y0); | ||
117 | } | ||
118 | n++; | ||
119 | } | ||
120 | |||
121 | } else { | ||
122 | this.ctx.moveTo(X0, Y0); | ||
123 | this.ctx.lineTo(X1, Y1); | ||
124 | } | ||
125 | this.ctx.stroke(); | ||
126 | this.ctx.restore(); | ||
127 | }; | ||
128 | |||
129 | RrdGfxCanvas.prototype.rectangle = function (X0, Y0, X1, Y1, width, style) | ||
130 | { | ||
131 | X0 = Math.round(X0)+0.5; | ||
132 | X1 = Math.round(X1)+0.5; | ||
133 | Y0 = Math.round(Y0)+0.5; | ||
134 | Y1 = Math.round(Y1)+0.5; | ||
135 | |||
136 | this.ctx.save(); | ||
137 | this.ctx.beginPath(); | ||
138 | this.ctx.lineWidth = width; | ||
139 | this.ctx.moveTo(X0, Y0); | ||
140 | this.ctx.lineTo(X1, Y0); | ||
141 | this.ctx.lineTo(X1, Y1); | ||
142 | this.ctx.lineTo(X0, Y1); | ||
143 | this.ctx.closePath(); | ||
144 | this.ctx.strokeStyle = style; | ||
145 | this.ctx.stroke(); | ||
146 | this.ctx.restore(); | ||
147 | }; | ||
148 | |||
149 | RrdGfxCanvas.prototype.new_area = function (X0, Y0, X1, Y1, X2, Y2, color) | ||
150 | { | ||
151 | X0 = Math.round(X0)+0.5; | ||
152 | Y0 = Math.round(Y0)+0.5; | ||
153 | X1 = Math.round(X1)+0.5; | ||
154 | Y1 = Math.round(Y1)+0.5; | ||
155 | X2 = Math.round(X2)+0.5; | ||
156 | Y2 = Math.round(Y2)+0.5; | ||
157 | this.ctx.fillStyle = color; | ||
158 | this.ctx.beginPath(); | ||
159 | this.ctx.moveTo(X0, Y0); | ||
160 | this.ctx.lineTo(X1, Y1); | ||
161 | this.ctx.lineTo(X2, Y2); | ||
162 | }; | ||
163 | |||
164 | RrdGfxCanvas.prototype.add_point = function (x, y) | ||
165 | { | ||
166 | x = Math.round(x)+0.5; | ||
167 | y = Math.round(y)+0.5; | ||
168 | this.ctx.lineTo(x, y); | ||
169 | }; | ||
170 | |||
171 | RrdGfxCanvas.prototype.close_path = function () | ||
172 | { | ||
173 | this.ctx.closePath(); | ||
174 | this.ctx.fill(); | ||
175 | }; | ||
176 | |||
177 | RrdGfxCanvas.prototype.stroke_begin = function (width, style) | ||
178 | { | ||
179 | this.ctx.save(); | ||
180 | this.ctx.beginPath(); | ||
181 | this.ctx.lineWidth = width; | ||
182 | this.ctx.strokeStyle = style; | ||
183 | this.ctx.lineCap = 'round'; | ||
184 | this.ctx.round = 'round'; | ||
185 | }; | ||
186 | |||
187 | RrdGfxCanvas.prototype.stroke_end = function () | ||
188 | { | ||
189 | this.ctx.stroke(); | ||
190 | this.ctx.restore(); | ||
191 | }; | ||
192 | |||
193 | RrdGfxCanvas.prototype.moveTo = function (x,y) | ||
194 | { | ||
195 | x = Math.round(x)+0.5; | ||
196 | y = Math.round(y)+0.5; | ||
197 | this.ctx.moveTo(x, y); | ||
198 | }; | ||
199 | |||
200 | RrdGfxCanvas.prototype.lineTo = function (x,y) | ||
201 | { | ||
202 | x = Math.round(x)+0.5; | ||
203 | y = Math.round(y)+0.5; | ||
204 | this.ctx.lineTo(x, y) | ||
205 | }; | ||
206 | |||
207 | RrdGfxCanvas.prototype.text = function (x, y, color, font, tabwidth, angle, h_align, v_align, text) | ||
208 | { | ||
209 | x = Math.round(x); | ||
210 | y = Math.round(y); | ||
211 | |||
212 | this.ctx.save(); | ||
213 | this.ctx.font = font.size+'px '+"'"+font.font+"'"; | ||
214 | |||
215 | switch (h_align) { | ||
216 | case RrdGraph.GFX_H_LEFT: | ||
217 | this.ctx.textAlign = 'left'; | ||
218 | break; | ||
219 | case RrdGraph.GFX_H_RIGHT: | ||
220 | this.ctx.textAlign = 'right'; | ||
221 | break; | ||
222 | case RrdGraph.GFX_H_CENTER: | ||
223 | this.ctx.textAlign = 'center'; | ||
224 | break; | ||
225 | } | ||
226 | |||
227 | switch (v_align) { | ||
228 | case RrdGraph.GFX_V_TOP: | ||
229 | this.ctx.textBaseline = 'top'; | ||
230 | break; | ||
231 | case RrdGraph.GFX_V_BOTTOM: | ||
232 | this.ctx.textBaseline = 'bottom'; | ||
233 | break; | ||
234 | case RrdGraph.GFX_V_CENTER: | ||
235 | this.ctx.textBaseline = 'middle'; | ||
236 | break; | ||
237 | } | ||
238 | |||
239 | this.ctx.fillStyle = color; | ||
240 | this.ctx.translate(x,y); | ||
241 | this.ctx.rotate(-angle*Math.PI/180.0); | ||
242 | this.ctx.fillText(text, 0, 0); | ||
243 | this.ctx.restore(); | ||
244 | }; | ||
245 | |||
246 | RrdGfxCanvas.prototype.get_text_width = function(start, font, tabwidth, text) | ||
247 | { | ||
248 | this.ctx.save(); | ||
249 | this.ctx.font = font.size+"px "+font.font; | ||
250 | var width = this.ctx.measureText(text); | ||
251 | this.ctx.restore(); | ||
252 | return width.width; | ||
253 | }; | ||
254 | |||