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