1 |
function tableToCanvas (table) { |
2 |
var canvas = document.createElement ('canvas'); |
3 |
document.body.appendChild (canvas); |
4 |
var c2d = canvas.getContext ('2d'); |
5 |
|
6 |
var param = { |
7 |
columnLeft: 20, |
8 |
columnWidth: 20, |
9 |
columnSpacing: 5, |
10 |
columnGroupTop: 10, |
11 |
columnTop: 15, |
12 |
rowTop: 20, |
13 |
rowHeight: 20, |
14 |
rowSpacing: 5, |
15 |
rowGroupLeft: 10, |
16 |
rowLeft: 15, |
17 |
cellTop: 20, |
18 |
cellLeft: 20, |
19 |
cellBottom: 20, |
20 |
cellRight: 20, |
21 |
explicitColumnGroupStrokeStyle: 'black', |
22 |
explicitColumnStrokeStyle: 'black', |
23 |
impliedColumnStrokeStyle: '#C0C0C0', |
24 |
explicitHeaderRowGroupStrokeStyle: 'black', |
25 |
explicitHeaderRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)', |
26 |
explicitBodyRowGroupStrokeStyle: 'black', |
27 |
explicitBodyRowGroupFillStyle: 'rgba(0, 0, 0, 0)', |
28 |
explicitFooterRowGroupStrokeStyle: 'black', |
29 |
explicitFooterRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)', |
30 |
explicitRowStrokeStyle: 'black', |
31 |
impliedRowStrokeStyle: '#C0C0C0', |
32 |
headerCellFillStyle: 'rgba(192, 192, 192, 0.5)', |
33 |
headerCellStrokeStyle: 'black', |
34 |
dataCellFillStyle: 'rgba(0, 0, 0, 0)', |
35 |
dataCellStrokeStyle: 'black', |
36 |
overlappingCellFillStyle: 'red', |
37 |
overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)' |
38 |
}; |
39 |
|
40 |
var columnNumber = table.column.length; |
41 |
if (columnNumber < table.cell.length) columnNumber = table.cell.length; |
42 |
var rowNumber = 0; |
43 |
for (var i = 1; i < table.cell.length; i++) { |
44 |
if (table.cell[i] && rowNumber < table.cell[i].length) { |
45 |
rowNumber = table.cell[i].length; |
46 |
} |
47 |
} |
48 |
|
49 |
canvas.width = param.cellLeft |
50 |
+ (param.columnWidth + param.columnSpacing) * columnNumber |
51 |
+ param.cellRight; |
52 |
canvas.height = param.cellTop |
53 |
+ (param.rowHeight + param.rowSpacing) * rowNumber |
54 |
+ param.cellBottom; |
55 |
canvas.style.width = 'auto'; // NOTE: Opera9 has default style="" |
56 |
canvas.style.height = 'auto'; |
57 |
|
58 |
var y = param.rowTop; |
59 |
for (var i = 1; i < table.row_group.length; i++) { |
60 |
var rg = table.row_group[i]; |
61 |
c2d.beginPath (); |
62 |
if (rg.type == 'thead') { |
63 |
c2d.strokeStyle = param.explicitHeaderRowGroupStrokeStyle; |
64 |
c2d.fillStyle = param.explicitHeaderRowGroupFillStyle; |
65 |
} else if (rg.type == 'tfoot') { |
66 |
c2d.strokeStyle = param.explicitFooterRowGroupStrokeStyle; |
67 |
c2d.fillStyle = param.explicitFooterRowGroupFillStyle; |
68 |
} else { |
69 |
c2d.strokeStyle = param.explicitBodyRowGroupStrokeStyle; |
70 |
c2d.fillStyle = param.explicitBodyRowGroupFillStyle; |
71 |
} |
72 |
var dy = (param.rowHeight + param.rowSpacing) * rg.height; |
73 |
c2d.moveTo (param.rowGroupLeft, y); |
74 |
c2d.lineTo (param.rowGroupLeft, y + dy - param.rowSpacing); |
75 |
c2d.stroke (); |
76 |
c2d.closePath (); |
77 |
c2d.beginPath (); |
78 |
c2d.rect (param.rowGroupLeft, |
79 |
y, |
80 |
(param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing, |
81 |
dy - param.rowSpacing); |
82 |
c2d.fill (); |
83 |
c2d.closePath (); |
84 |
y += dy; |
85 |
i += rg.height - 1; |
86 |
} |
87 |
|
88 |
c2d.beginPath (); |
89 |
c2d.strokeStyle = param.explicitColumnGroupStrokeStyle; |
90 |
var x = param.columnLeft; |
91 |
for (var i = 1; i < table.column_group.length; i++) { |
92 |
var cg = table.column_group[i]; |
93 |
c2d.moveTo (x, param.columnGroupTop); |
94 |
x += (param.columnWidth + param.columnSpacing) * cg.width; |
95 |
c2d.lineTo (x - param.columnSpacing, param.columnGroupTop); |
96 |
i += cg.width - 1; |
97 |
} |
98 |
c2d.stroke (); |
99 |
c2d.closePath (); |
100 |
|
101 |
var x = param.columnLeft; |
102 |
for (var i = 1; i < columnNumber; i++) { |
103 |
var c = table.column[i]; |
104 |
c2d.beginPath (); |
105 |
c2d.moveTo (x, param.columnTop); |
106 |
x += param.columnWidth + param.columnSpacing; |
107 |
c2d.lineTo (x - param.columnSpacing, param.columnTop); |
108 |
if (c) { |
109 |
c2d.strokeStyle = param.explicitColumnStrokeStyle; |
110 |
} else { |
111 |
c2d.strokeStyle = param.impliedColumnStrokeStyle; |
112 |
} |
113 |
c2d.stroke (); |
114 |
c2d.closePath (); |
115 |
} |
116 |
|
117 |
var x = param.cellLeft; |
118 |
for (var i = 1; i < table.cell.length; i++) { |
119 |
var y = param.cellTop; |
120 |
if (!table.cell[i]) continue; |
121 |
for (var j = 1; j < table.cell[i].length; j++) { |
122 |
var c = table.cell[i][j]; |
123 |
if (c && ((c[0].x == i && c[0].y == j) || c.length > 1)) { |
124 |
c2d.beginPath (); |
125 |
var width = (param.columnWidth + param.columnSpacing) * c[0].width |
126 |
- param.columnSpacing; |
127 |
var height = (param.rowHeight + param.rowSpacing) * c[0].height |
128 |
- param.rowSpacing; |
129 |
if (c.length == 1) { |
130 |
c2d.rect (x, y, width, height); |
131 |
c2d.fillStyle = c[0].is_header |
132 |
? param.headerCellFillStyle : param.dataCellFillStyle; |
133 |
c2d.strokeStyle = c[0].is_header |
134 |
? param.headerCellStrokeStyle : param.dataCellStrokeStyle; |
135 |
} else { |
136 |
c2d.rect (x, y, param.columnWidth, param.rowHeight); |
137 |
c2d.fillStyle = param.overlappingCellFillStyle; |
138 |
c2d.strokeStyle = param.overlappingCellStrokeStyle; |
139 |
} |
140 |
c2d.fill (); |
141 |
c2d.stroke (); |
142 |
c2d.closePath (); |
143 |
} |
144 |
y += param.rowHeight + param.rowSpacing; |
145 |
} |
146 |
x += param.columnWidth + param.columnSpacing; |
147 |
} |
148 |
|
149 |
var y = param.rowTop; |
150 |
for (var i = 1; i < rowNumber; i++) { |
151 |
c2d.beginPath (); |
152 |
c2d.moveTo (param.rowLeft, y); |
153 |
y += param.rowHeight + param.rowSpacing; |
154 |
c2d.lineTo (param.rowLeft, y - param.rowSpacing); |
155 |
//if (true) { |
156 |
c2d.strokeStyle = param.explicitRowStrokeStyle; |
157 |
//} else { |
158 |
// c2d.strokeStyle = param.impliedRowStrokeStyle; |
159 |
//} |
160 |
c2d.stroke (); |
161 |
c2d.closePath (); |
162 |
} |
163 |
} // tableToCanvas |
164 |
|
165 |
/* |
166 |
|
167 |
Copyright 2007 Wakaba <w@suika.fam.cx> |
168 |
|
169 |
This library is free software; you can redistribute it |
170 |
and/or modify it under the same terms as Perl itself. |
171 |
|
172 |
*/ |
173 |
/* $Date: $ */ |