aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/js/RrdGfxCanvas.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/RrdGfxCanvas.js')
-rw-r--r--js/RrdGfxCanvas.js254
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 */
27var RrdGfxCanvas = function(canvasId)
28{
29 this.canvas = document.getElementById(canvasId);
30 this.ctx = this.canvas.getContext('2d');
31};
32
33RrdGfxCanvas.prototype.size = function (width, height)
34{
35 this.canvas.width = width;
36 this.canvas.height = height;
37};
38
39RrdGfxCanvas.prototype.set_dash = function (dashes, n, offset)
40{
41
42};
43
44RrdGfxCanvas.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
68RrdGfxCanvas.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
129RrdGfxCanvas.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
149RrdGfxCanvas.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
164RrdGfxCanvas.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
171RrdGfxCanvas.prototype.close_path = function ()
172{
173 this.ctx.closePath();
174 this.ctx.fill();
175};
176
177RrdGfxCanvas.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
187RrdGfxCanvas.prototype.stroke_end = function ()
188{
189 this.ctx.stroke();
190 this.ctx.restore();
191};
192
193RrdGfxCanvas.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
200RrdGfxCanvas.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
207RrdGfxCanvas.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
246RrdGfxCanvas.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
generated by cgit v1.1 at 2025-12-18 00:36:58 +0000