| <html> |
| <head> |
| <div style="height:0"> |
| |
| <div id="testSimplifyQuadratic1"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(1, 0, 1, 1); |
| path.close(); |
| path.moveTo(1, 0); |
| path.quadTo(0, 0, 0, 1); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic2"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(20, 0, 20, 20); |
| path.close(); |
| path.moveTo(20, 0); |
| path.quadTo(0, 0, 0, 20); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic3"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(20, 0, 20, 20); |
| path.close(); |
| path.moveTo(0, 20); |
| path.quadTo(0, 0, 20, 0); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic4"> |
| SkPath path, out; |
| path.moveTo(0, 20); |
| path.quadTo(20, 0, 40, 20); |
| path.close(); |
| path.moveTo(40, 10); |
| path.quadTo(20, 30, 0, 10); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic5"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 0); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(0, 0, 0, 1); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic6"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(1, 0); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(1, 0, 0, 1); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic7"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 1); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(1, 0, 0, 2); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic8"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 0); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(1, 0, 0, 2); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic9"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(1, 1); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(1, 0, 2, 2); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic10"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 0); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 1); |
| path.quadTo(1, 1, 1, 2); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic11"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 2); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(2, 1); |
| path.quadTo(2, 2, 3, 3); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic12"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.lineTo(0, 2); |
| path.lineTo(0, 0); |
| path.close(); |
| path.moveTo(3, 0); |
| path.quadTo(1, 1, 0, 2); |
| path.lineTo(3, 0); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic13"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 1, 0); |
| path.lineTo(1, 1); |
| path.lineTo(0, 0); |
| path.close(); |
| path.moveTo(0, 0); |
| path.quadTo(3, 0, 1, 1); |
| path.lineTo(0, 0); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic14"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(1, 1); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(0, 1, 2, 1); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic15"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 1, 3); |
| path.lineTo(3, 3); |
| path.close(); |
| path.moveTo(0, 1); |
| path.lineTo(1, 1); |
| path.quadTo(0, 3, 3, 3); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic16"> |
| SkPath path, out; |
| path.moveTo(0, 0); |
| path.quadTo(0, 0, 0, 0); |
| path.lineTo(0, 1); |
| path.close(); |
| path.moveTo(0, 0); |
| path.lineTo(0, 0); |
| path.quadTo(1, 0, 0, 1); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic17"> |
| SkPath path, out; |
| path.moveTo(8, 8); |
| path.quadTo(10, 10, 8, -10); |
| path.close(); |
| path.moveTo(8, 8); |
| path.quadTo(12, 12, 14, 4); |
| path.close(); |
| path.moveTo(8, 8); |
| path.quadTo(9, 9, 10, 8); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| } |
| </div> |
| |
| <div id="testSimplifyQuadratic18"> |
| SkPath path, out; |
| path.moveTo(8.0000000000000071, 8.0000000000000071); |
| path.quadTo(8.7289570079366854, 8.7289570079366889, 9.3914917259458743, 9.0593802763083691); |
| path.close(); |
| path.moveTo(8.0000000000000142, 8.0000000000000142); |
| path.quadTo(8.1250000000000107, 8.1250000000000071, 8.2500000000000071, 8.2187500000000053); |
| path.close(); |
| testSimplify(path, true, out, bitmap); |
| drawAsciiPaths(path, out, true); |
| </div> |
| |
| <div id="testSimplifyQuadratic19"> |
| SkPath path, simple; |
| path.moveTo(0,4); |
| path.lineTo(6,4); |
| path.lineTo(3,1); |
| path.close(); |
| path.moveTo(2,3); |
| path.lineTo(3,2); |
| path.lineTo(4,3); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testSimplifyQuadratic20"> |
| SkPath path, simple; |
| path.moveTo(0,4); |
| path.lineTo(6,4); |
| path.lineTo(3,1); |
| path.close(); |
| path.moveTo(2,3); |
| path.lineTo(4,3); |
| path.lineTo(3,2); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testSimplifyQuadratic21"> |
| SkPath path, simple; |
| path.moveTo(0,4); |
| path.lineTo(8,4); |
| path.lineTo(4,0); |
| path.close(); |
| path.moveTo(2,2); |
| path.lineTo(3,3); |
| path.lineTo(4,2); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine6"> |
| SkPath path, simple; |
| path.moveTo(0,0); |
| path.lineTo(4,0); |
| path.lineTo(2,2); |
| path.close(); |
| path.moveTo(2,0); |
| path.lineTo(6,0); |
| path.lineTo(4,2); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine7"> |
| SkPath path, simple; |
| path.moveTo(0,0); |
| path.lineTo(4,0); |
| path.lineTo(2,2); |
| path.close(); |
| path.moveTo(6,0); |
| path.lineTo(2,0); |
| path.lineTo(4,2); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine9"> |
| SkPath path, simple; |
| path.moveTo(0,4); |
| path.lineTo(4,4); |
| path.lineTo(2,2); |
| path.close(); |
| path.moveTo(6,4); |
| path.lineTo(2,4); |
| path.lineTo(4,2); |
| path.close(); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine17"> |
| SkPath path, simple; |
| path.addRect(0, 0, 12, 12, (SkPath::Direction) 0); |
| path.addRect(4, 12, 13, 13, (SkPath::Direction) 0); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine28"> |
| SkPath path, simple; |
| path.addRect(0, 6, 12, 12, (SkPath::Direction) 0); |
| path.addRect(0, 0, 9, 9, (SkPath::Direction) 0); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine29"> |
| SkPath path, simple; |
| path.addRect(0, 18, 12, 12, (SkPath::Direction) 0); |
| path.addRect(12, 12, 21, 21, (SkPath::Direction) 0); |
| testSimplifyx(path); |
| </div> |
| |
| <div id="testLine30"> |
| path.addRect(0, 0, 20, 20, (SkPath::Direction) 0); |
| path.addRect(0, 0, 12, 12, (SkPath::Direction) 0); |
| path.addRect(4, 4, 13, 13, (SkPath::Direction) 0); |
| </div> |
| |
| <div id="testLine31"> |
| path.addRect(0, 0, 20, 20, (SkPath::Direction) 0); |
| path.addRect(0, 0, 12, 12, (SkPath::Direction) 0); |
| path.addRect(0, 4, 9, 9, (SkPath::Direction) 0); |
| </div> |
| |
| <div id="testLine32"> |
| path.addRect(0, 0, 20, 20, (SkPath::Direction) 0); |
| path.addRect(0, 0, 12, 12, (SkPath::Direction) 0); |
| path.addRect(4, 12, 13, 13, (SkPath::Direction) 0); |
| </div> |
| |
| </div> |
| |
| <script type="text/javascript"> |
| |
| var testDivs = [ |
| testLine9, |
| testLine7, |
| testLine30, |
| testLine32, |
| testLine31, |
| testLine29, |
| testLine28, |
| testLine17, |
| testSimplifyQuadratic21, |
| testSimplifyQuadratic20, |
| testSimplifyQuadratic19, |
| testSimplifyQuadratic18, |
| testSimplifyQuadratic17, |
| testSimplifyQuadratic16, |
| testSimplifyQuadratic15, |
| testSimplifyQuadratic14, |
| testSimplifyQuadratic13, |
| testSimplifyQuadratic12, |
| testSimplifyQuadratic11, |
| testSimplifyQuadratic10, |
| testSimplifyQuadratic9, |
| testSimplifyQuadratic8, |
| testSimplifyQuadratic7, |
| testSimplifyQuadratic6, |
| testSimplifyQuadratic5, |
| testSimplifyQuadratic4, |
| testSimplifyQuadratic3, |
| testSimplifyQuadratic2, |
| testSimplifyQuadratic1, |
| ]; |
| |
| var scale, columns, rows, xStart, yStart; |
| |
| var ticks = 0.1; |
| var at_x = 13 + 0.5; |
| var at_y = 13 + 0.5; |
| |
| var tests = []; |
| var testIndex = 0; |
| |
| var ctx; |
| |
| function parse(test) { |
| var contours = []; |
| var contourStrs = test.split("path.close();"); |
| var pattern = /-?\d+\.*\d*/g; |
| for (var c in contourStrs) { |
| var contour = contourStrs[c]; |
| var verbStrs = contour.split("path"); |
| var verbs = []; |
| for (var v in verbStrs) { |
| var verbStr = verbStrs[v]; |
| var points = verbStr.match(pattern); |
| var pts = []; |
| for (var wd in points) { |
| var num = parseFloat(points[wd]); |
| if (isNaN(num)) continue; |
| pts.push(num); |
| } |
| if (pts.length > 0) |
| verbs.push(pts); |
| } |
| if (verbs.length > 0) { |
| var lastIndex = verbs.length - 1; |
| var lastVerb = verbs[lastIndex]; |
| var lastLen = lastVerb.length; |
| if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) { |
| var lastPts = []; |
| lastPts.push(verbs[0][0]); |
| lastPts.push(verbs[0][1]); |
| verbs.push(lastPts); |
| } |
| contours.push(verbs); |
| } |
| } |
| if (contours.length > 0) |
| tests.push(contours); |
| } |
| |
| function parseRect(test) { |
| var contours = []; |
| var rectStrs = test.split("path.addRect"); |
| var pattern = /-?\d+\.*\d*/g; |
| for (var r in rectStrs) { |
| var rect = rectStrs[r]; |
| var sideStrs = rect.match(pattern); |
| var sides = []; |
| for (var wd in sideStrs) { |
| var num = parseFloat(sideStrs[wd]); |
| if (isNaN(num)) continue; |
| sides.push(num); |
| } |
| if (sides.length == 0) |
| continue; |
| var verbs = []; |
| var topLeft = []; |
| topLeft.push(sides[0]); topLeft.push(sides[1]); |
| var topRight = []; |
| topRight.push(sides[2]); topRight.push(sides[1]); |
| var botLeft = []; |
| botLeft.push(sides[0]); botLeft.push(sides[3]); |
| var botRight = []; |
| botRight.push(sides[2]); botRight.push(sides[3]); |
| verbs.push(topLeft); |
| if (sides[4] == 0) { |
| verbs.push(topRight); |
| verbs.push(botRight); |
| verbs.push(botLeft); |
| } else { |
| verbs.push(botLeft); |
| verbs.push(botRight); |
| verbs.push(topRight); |
| } |
| verbs.push(topLeft); |
| contours.push(verbs); |
| } |
| if (contours.length > 0) |
| tests.push(contours); |
| } |
| |
| function init(test) { |
| var canvas = document.getElementById('canvas'); |
| if (!canvas.getContext) return; |
| canvas.width = document.width; |
| canvas.height = document.height; |
| ctx = canvas.getContext('2d'); |
| var xmin = Infinity; |
| var xmax = -Infinity; |
| var ymin = Infinity; |
| var ymax = -Infinity; |
| for (var contours in test) { |
| var contour = test[contours]; |
| for (var verbs in contour) { |
| var verb = contour[verbs]; |
| var last = verb.length; |
| for (var idx = 0; idx < last; idx += 2) { |
| xmin = Math.min(xmin, verb[idx]); |
| xmax = Math.max(xmax, verb[idx]); |
| ymin = Math.min(ymin, verb[idx + 1]); |
| ymax = Math.max(ymax, verb[idx + 1]); |
| } |
| } |
| } |
| var subscale = 1; |
| while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) { |
| subscale *= 10; |
| } |
| columns = Math.ceil(xmax) - Math.floor(xmin) + 1; |
| rows = Math.ceil(ymax) - Math.floor(ymin) + 1; |
| xStart = Math.floor(xmin); |
| yStart = Math.floor(ymin); |
| var hscale = ctx.canvas.width / columns / ticks; |
| var vscale = ctx.canvas.height / rows / ticks; |
| scale = Math.floor(Math.min(hscale, vscale)) * subscale; |
| } |
| |
| function drawPoint(px, py, xoffset, yoffset, unit) { |
| var label = px.toFixed(3) + ", " + py.toFixed(3); |
| var _px = px * unit + xoffset; |
| var _py = py * unit + yoffset; |
| ctx.beginPath(); |
| ctx.arc(_px, _py, 3, 0, Math.PI*2, true); |
| ctx.closePath(); |
| ctx.fill(); |
| ctx.fillText(label, _px + 5, _py); |
| } |
| |
| function draw(test, _at_x, _at_y, scale) { |
| var unit = scale * ticks; |
| ctx.lineWidth = 1; |
| var i; |
| for (i = 0; i <= rows * ticks; ++i) { |
| ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black"; |
| ctx.beginPath(); |
| ctx.moveTo(_at_x + 0, _at_y + i * scale); |
| ctx.lineTo(_at_x + unit * columns, _at_y + i * scale); |
| ctx.stroke(); |
| } |
| for (i = 0; i <= columns * ticks; ++i) { |
| ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black"; |
| ctx.beginPath(); |
| ctx.moveTo(_at_x + i * scale, _at_y + 0); |
| ctx.lineTo(_at_x + i * scale, _at_y + unit * rows); |
| ctx.stroke(); |
| } |
| |
| var xoffset = xStart * -unit + _at_x; |
| var yoffset = yStart * -unit + _at_y; |
| |
| ctx.fillStyle = "rgb(40,80,60)" |
| for (i = 0; i <= columns; i += (1 / ticks)) |
| { |
| num = (xoffset - _at_x) / -unit + i; |
| ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10); |
| } |
| for (i = 0; i <= rows; i += (1 / ticks)) |
| { |
| num = (yoffset - _at_x) / -unit + i; |
| ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0); |
| } |
| ctx.strokeStyle = "red"; |
| var contours, verbs, pts; |
| ctx.beginPath(); |
| for (contours in test) { |
| var contour = test[contours]; |
| if (contours == 2) ctx.strokeStyle = "blue"; |
| var first = true; |
| for (verbs in contour) { |
| var verb = contour[verbs]; |
| switch (verb.length) { |
| case 2: |
| if (first) { |
| ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit); |
| first = false; |
| } else |
| ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit); |
| break; |
| case 4: |
| ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit, |
| xoffset + verb[2] * unit, yoffset + verb[3] * unit); |
| break; |
| case 6: |
| ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit, |
| xoffset + verb[2] * unit, yoffset + verb[3] * unit, |
| xoffset + verb[4] * unit, yoffset + verb[5] * unit); |
| break; |
| } |
| } |
| ctx.closePath(); |
| } |
| ctx.stroke(); |
| ctx.fillStyle="rgba(192,192,255, 0.3)"; |
| ctx.fill(); |
| |
| ctx.fillStyle="blue"; |
| for (contours in test) { |
| var contour = test[contours]; |
| for (verbs in contour) { |
| var verb = contour[verbs]; |
| for (i = 0; i < verb.length; i += 2) { |
| x = verb[i]; |
| y = verb[i + 1]; |
| drawPoint(x, y, xoffset, yoffset, unit); |
| } |
| } |
| } |
| } |
| |
| var mouseX = Infinity, mouseY; |
| |
| function calcXY() { |
| var e = window.event; |
| var tgt = e.target || e.srcElement; |
| var left = tgt.offsetLeft; |
| var top = tgt.offsetTop; |
| var unit = scale * ticks; |
| mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart; |
| mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart; |
| } |
| |
| function handleMouseOver() { |
| calcXY(); |
| var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3); |
| ctx.beginPath(); |
| ctx.rect(300,100,200,10); |
| ctx.fillStyle="white"; |
| ctx.fill(); |
| ctx.fillStyle="black"; |
| ctx.fillText(num, 300, 108); |
| } |
| |
| function handleMouseClick() { |
| calcXY(); |
| // drawInset(); |
| } |
| |
| function drawTop() { |
| init(tests[testIndex]); |
| redraw(); |
| } |
| |
| function redraw() { |
| ctx.beginPath(); |
| ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height); |
| ctx.fillStyle="white"; |
| ctx.fill(); |
| draw(tests[testIndex], at_x, at_y, scale); |
| // if (insetScale != scale && mouseX != Infinity) |
| // drawInset(); |
| } |
| |
| function doKeyPress(evt) { |
| var char = String.fromCharCode(evt.charCode); |
| switch (char) { |
| case 'N': |
| case 'n': |
| if (++testIndex >= tests.length) |
| testIndex = 0; |
| mouseX = Infinity; |
| drawTop(); |
| break; |
| case 'P': |
| case 'p': |
| if (--testIndex < 0) |
| testIndex = tests.length - 1; |
| mouseX = Infinity; |
| drawTop(); |
| break; |
| case 'T': |
| case 't': |
| break; |
| case '-': |
| redraw(); |
| break; |
| case '=': |
| case '+': |
| redraw(); |
| break; |
| } |
| } |
| |
| function start() { |
| for (i = 0; i < testDivs.length; ++i) { |
| var str = testDivs[i].firstChild.data; |
| if (str.split("addRect").length > 1) { |
| parseRect(str); |
| } else { |
| parse(str); |
| } |
| } |
| drawTop(); |
| window.addEventListener('keypress', doKeyPress, true); |
| } |
| |
| </script> |
| </head> |
| |
| <body onLoad="start();"> |
| <canvas id="canvas" width="750" height="500" |
| onmousemove="handleMouseOver()" |
| onclick="handleMouseClick()" |
| ></canvas > |
| </body> |
| </html> |