| caryclark@google.com | 752b60e | 2012-03-22 21:11:17 +0000 | [diff] [blame^] | 1 | <html> |
| 2 | <head> |
| 3 | <div style="height:0"> |
| 4 | <div id="test_1div"> |
| 5 | path.moveTo(213.673737, 413.292938); |
| 6 | path.lineTo(225.200134, 343.616821); |
| 7 | path.lineTo(236.726532, 273.940704); |
| 8 | path.lineTo(219.386414, 231.373322); |
| 9 | path.lineTo(213.673737, 413.292938); |
| 10 | path.close(); |
| 11 | path.moveTo(43.485352, 308.984497); |
| 12 | path.lineTo(122.610657, 305.950134); |
| 13 | path.lineTo(201.735962, 302.915802); |
| 14 | path.lineTo(280.861267, 299.881470); |
| 15 | path.lineTo(43.485352, 308.984497); |
| 16 | path.close(); |
| 17 | </div> |
| 18 | </div> |
| 19 | |
| 20 | <script type="text/javascript"> |
| 21 | |
| 22 | var testDivs = [ |
| 23 | test_1div, |
| 24 | ]; |
| 25 | |
| 26 | var scale, columns, rows, xStart, yStart; |
| 27 | |
| 28 | var ticks = 0.1; |
| 29 | var at_x = 13 + 0.5; |
| 30 | var at_y = 13 + 0.5; |
| 31 | |
| 32 | var tests = []; |
| 33 | var testIndex = 0; |
| 34 | |
| 35 | var ctx; |
| 36 | |
| 37 | function parse(test) { |
| 38 | var contours = []; |
| 39 | var contourStrs = test.split("path.close();"); |
| 40 | var pattern = /\d+\.*\d*/g; |
| 41 | for (var c in contourStrs) { |
| 42 | var points = contourStrs[c].match(pattern); |
| 43 | var pts = []; |
| 44 | for (var wd in points) { |
| 45 | var num = parseFloat(points[wd]); |
| 46 | if (isNaN(num)) continue; |
| 47 | pts.push(num ); |
| 48 | } |
| 49 | contours.push(pts); |
| 50 | } |
| 51 | tests.push(contours); |
| 52 | } |
| 53 | |
| 54 | function init(test) { |
| 55 | var canvas = document.getElementById('canvas'); |
| 56 | if (!canvas.getContext) return; |
| 57 | ctx = canvas.getContext('2d'); |
| 58 | var xmin = Infinity; |
| 59 | var xmax = -Infinity; |
| 60 | var ymin = Infinity; |
| 61 | var ymax = -Infinity; |
| 62 | for (pts in test) { |
| 63 | var pt = test[pts]; |
| 64 | for (i = 0; i < pt.length; i += 2) { |
| 65 | xmin = Math.min(xmin, pt[i]); |
| 66 | ymin = Math.min(ymin, pt[i + 1]); |
| 67 | xmax = Math.max(xmax, pt[i]); |
| 68 | ymax = Math.max(ymax, pt[i + 1]); |
| 69 | } |
| 70 | } |
| 71 | var subscale = 1; |
| 72 | while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) { |
| 73 | subscale *= 10; |
| 74 | } |
| 75 | columns = Math.ceil(xmax) - Math.floor(xmin) + 1; |
| 76 | rows = Math.ceil(ymax) - Math.floor(ymin) + 1; |
| 77 | xStart = Math.floor(xmin); |
| 78 | yStart = Math.floor(ymin); |
| 79 | var hscale = ctx.canvas.width / columns / ticks; |
| 80 | var vscale = ctx.canvas.height / rows / ticks; |
| 81 | scale = Math.floor(Math.min(hscale, vscale)) * subscale; |
| 82 | } |
| 83 | |
| 84 | function drawPoint(px, py, xoffset, yoffset, unit) { |
| 85 | var label = px + "=" + px.toFixed(3) + ", " + py + "=" + py.toFixed(3); |
| 86 | var _px = px * unit + xoffset; |
| 87 | var _py = py * unit + yoffset; |
| 88 | ctx.beginPath(); |
| 89 | ctx.arc(_px, _py, 3, 0, Math.PI*2, true); |
| 90 | ctx.closePath(); |
| 91 | ctx.fill(); |
| 92 | ctx.fillText(label, _px + 5, _py); |
| 93 | } |
| 94 | |
| 95 | function draw(test, _at_x, _at_y, scale) { |
| 96 | var unit = scale * ticks; |
| 97 | ctx.lineWidth = 1; |
| 98 | var i; |
| 99 | for (i = 0; i <= rows * ticks; ++i) { |
| 100 | ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black"; |
| 101 | ctx.beginPath(); |
| 102 | ctx.moveTo(_at_x + 0, _at_y + i * scale); |
| 103 | ctx.lineTo(_at_x + unit * columns, _at_y + i * scale); |
| 104 | ctx.stroke(); |
| 105 | } |
| 106 | for (i = 0; i <= columns * ticks; ++i) { |
| 107 | ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black"; |
| 108 | ctx.beginPath(); |
| 109 | ctx.moveTo(_at_x + i * scale, _at_y + 0); |
| 110 | ctx.lineTo(_at_x + i * scale, _at_y + unit * rows); |
| 111 | ctx.stroke(); |
| 112 | } |
| 113 | |
| 114 | var xoffset = xStart * -unit + _at_x; |
| 115 | var yoffset = yStart * -unit + _at_y; |
| 116 | |
| 117 | ctx.fillStyle = "rgb(40,80,60)" |
| 118 | for (i = 0; i <= columns; i += (1 / ticks)) |
| 119 | { |
| 120 | num = (xoffset - _at_x) / -unit + i; |
| 121 | ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10); |
| 122 | } |
| 123 | for (i = 0; i <= rows; i += (1 / ticks)) |
| 124 | { |
| 125 | num = (yoffset - _at_x) / -unit + i; |
| 126 | ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0); |
| 127 | } |
| 128 | ctx.strokeStyle = "red"; |
| 129 | for (pts in test) { |
| 130 | var pt = test[pts]; |
| 131 | var x = pt[0]; |
| 132 | var y = pt[1]; |
| 133 | ctx.beginPath(); |
| 134 | ctx.moveTo(xoffset + x * unit, yoffset + y * unit); |
| 135 | for (i = 2; i < pt.length; i += 2) { |
| 136 | x = pt[i]; |
| 137 | y = pt[i + 1]; |
| 138 | ctx.lineTo(xoffset + x * unit, yoffset + y * unit); |
| 139 | } |
| 140 | ctx.stroke(); |
| 141 | } |
| 142 | |
| 143 | ctx.fillStyle="blue"; |
| 144 | for (pts in test) { |
| 145 | var pt = test[pts]; |
| 146 | for (i = 0; i < pt.length; i += 2) { |
| 147 | x = pt[i]; |
| 148 | y = pt[i + 1]; |
| 149 | drawPoint(x, y, xoffset, yoffset, unit); |
| 150 | } |
| 151 | } |
| 152 | } |
| 153 | |
| 154 | var mouseX = Infinity, mouseY; |
| 155 | |
| 156 | function calcXY() { |
| 157 | var e = window.event; |
| 158 | var tgt = e.target || e.srcElement; |
| 159 | var left = tgt.offsetLeft; |
| 160 | var top = tgt.offsetTop; |
| 161 | var unit = scale * ticks; |
| 162 | mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart; |
| 163 | mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart; |
| 164 | } |
| 165 | |
| 166 | function handleMouseOver() { |
| 167 | calcXY(); |
| 168 | var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3); |
| 169 | ctx.beginPath(); |
| 170 | ctx.rect(300,100,200,10); |
| 171 | ctx.fillStyle="white"; |
| 172 | ctx.fill(); |
| 173 | ctx.fillStyle="black"; |
| 174 | ctx.fillText(num, 300, 108); |
| 175 | } |
| 176 | |
| 177 | function handleMouseClick() { |
| 178 | calcXY(); |
| 179 | // drawInset(); |
| 180 | } |
| 181 | |
| 182 | function drawTop() { |
| 183 | init(tests[testIndex]); |
| 184 | redraw(); |
| 185 | } |
| 186 | |
| 187 | function redraw() { |
| 188 | ctx.beginPath(); |
| 189 | ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height); |
| 190 | ctx.fillStyle="white"; |
| 191 | ctx.fill(); |
| 192 | draw(tests[testIndex], at_x, at_y, scale); |
| 193 | // if (insetScale != scale && mouseX != Infinity) |
| 194 | // drawInset(); |
| 195 | } |
| 196 | |
| 197 | function doKeyPress(evt) { |
| 198 | var char = String.fromCharCode(evt.charCode); |
| 199 | switch (char) { |
| 200 | case 'N': |
| 201 | case 'n': |
| 202 | if (++testIndex >= tests.length) |
| 203 | testIndex = 0; |
| 204 | // insetScale = scale; |
| 205 | mouseX = Infinity; |
| 206 | drawTop(); |
| 207 | break; |
| 208 | case 'T': |
| 209 | case 't': |
| 210 | // drawTs(testIndex); |
| 211 | break; |
| 212 | case '-': |
| 213 | // if (--insetScale < 1) |
| 214 | // insetScale = 1; |
| 215 | // else |
| 216 | redraw(); |
| 217 | break; |
| 218 | case '=': |
| 219 | case '+': |
| 220 | // ++insetScale; |
| 221 | redraw(); |
| 222 | break; |
| 223 | } |
| 224 | } |
| 225 | |
| 226 | function start() { |
| 227 | for (i = 0; i < testDivs.length; ++i) { |
| 228 | var str = testDivs[i].firstChild.data; |
| 229 | parse(str); |
| 230 | } |
| 231 | drawTop(); |
| 232 | window.addEventListener('keypress', doKeyPress, true); |
| 233 | } |
| 234 | |
| 235 | </script> |
| 236 | </head> |
| 237 | |
| 238 | <body onLoad="start();"> |
| 239 | <canvas id="canvas" width="1500" height="1000" |
| 240 | onmousemove="handleMouseOver()" |
| 241 | onclick="handleMouseClick()" |
| 242 | ></canvas > |
| 243 | </body> |
| 244 | </html> |