Parent Directory
| 
Revision Log
++ ChangeLog 27 May 2007 10:00:30 -0000 * excanvas.js: New (from <http://sourceforge.net/project/showfiles.php?group_id=163391&package_id=184688&release_id=505959>). * table.cgi: Remove |$table->{caption}->{element}| for table with caption processed correctly. Support for WinIE via ExplorerCanvas; note that it does not draw path with fill and stroke correctly (stroke is hidden?). 2007-05-27 Wakaba <wakaba@suika.fam.cx>
| 1 | wakaba | 1.1 | function tableToCanvas (table) { |
| 2 | var canvas = document.createElement ('canvas'); | ||
| 3 | document.body.appendChild (canvas); | ||
| 4 | wakaba | 1.2 | if (window.G_vmlCanvasManager) { |
| 5 | canvas = G_vmlCanvasManager.initElement (canvas); | ||
| 6 | } | ||
| 7 | wakaba | 1.1 | 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 | wakaba | 1.2 | 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 | wakaba | 1.1 | 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 |