diff options
Diffstat (limited to 'chromium/third_party/skia/experimental/Intersection/bc.htm')
-rw-r--r-- | chromium/third_party/skia/experimental/Intersection/bc.htm | 455 |
1 files changed, 455 insertions, 0 deletions
diff --git a/chromium/third_party/skia/experimental/Intersection/bc.htm b/chromium/third_party/skia/experimental/Intersection/bc.htm new file mode 100644 index 00000000000..fc9191a694d --- /dev/null +++ b/chromium/third_party/skia/experimental/Intersection/bc.htm @@ -0,0 +1,455 @@ +<!-- bezier clip visualizer --> +<html> +<head> +<div style="height:0"> + +<div id="clip1"> +(gdb) p smaller +$2 = {{ + x = 0.91292418204644155, + y = 0.41931201426549197 + }, { + x = 0.70491388044579517, + y = 0.64754305977710236 + }, { + x = 0, + y = 1 + }} +(gdb) p larger +$3 = {{ + x = 0.21875, + y = 0.765625 + }, { + x = 0.125, + y = 0.875 + }, { + x = 0, + y = 1 + }} +(gdb) p distance2y +$1 = {{ + x = 0, + y = 0.080355482722450078 + }, { + x = 0.5, + y = 0.038383741101172597 + }, { + x = 1, + y = 0 + }} +</div> + +<div id="quad21a"> +bezier_clip q1=(0,0 1,0 0,2) q2=(0.5,0.25 0.5,0.5 0,1) minT=0 maxT=1 +</div> +<div id="quad21b"> +bezier_clip q1=(0.5,0.25 0.5,0.375 0.375,0.5625) q2=(0,0 1,0 0,2) minT=0.3 maxT=0.78125 +</div> +<div id="quad21c"> +bezier_clip q1=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) q2=(0.5,0.25 0.5,0.375 0.375,0.5625) minT=0 maxT=0.926710098 +</div> +<div id="quad21d"> +bezier_clip q1=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) q2=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) minT=0.187231244 maxT=0.729263299 +</div> +<div id="quad21e"> +bezier_clip q1=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) q2=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) minT=0 maxT=1 +</div> +<div id="quad21f"> +bezier_clip q1=(0.493290691,0.311274036 0.486581381,0.343588381 0.473162762,0.379257381) q2=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) minT=0.0828748517 maxT=0.150086861 +</div> + +<div id="quad21g"> +(gdb) p smaller +$1 = {{ + x = 0.48441440743366754, + y = 0.33903196011243797 + }, { + x = 0.48750982503868118, + y = 0.35346899178071778 + }, { + x = 0.48999046908865357, + y = 0.368520797004039 + }} +(gdb) p larger +$2 = {{ + x = 0.49329069058425024, + y = 0.31127403581536672 + }, { + x = 0.48658138116850047, + y = 0.34358838107698753 + }, { + x = 0.47316276233700094, + y = 0.37925738104648321 + }} +</div> + +<div id="quad36"> +(gdb) p fQ +$2 = {{ + x = 1.8883839294261275, + y = 2.1108590606904345 + }, { + x = 1.888463903363252, + y = 2.1111576060205435 + }, { + x = 1.8885438199983176, + y = 2.1114561800016824 + }} +(gdb) p rh.fQ +$3 = {{ + x = 1.8883839294260976, + y = 2.1108590606903377 + }, { + x = 1.8886366953645748, + y = 2.1109850143489544 + }, { + x = 1.8888888888888888, + y = 2.1111111111111112 + }} +(gdb) +</div> + +<div id="quad37"> + {{x = 360.048828125, y = 229.2578125}, {x = 360.048828125, y = 224.4140625}, {x = 362.607421875, y = 221.3671875}} + {{x = 362.607421875, y = 221.3671875}, {x = 365.166015625, y = 218.3203125}, {x = 369.228515625, y = 218.3203125}} +</div> + +<div id="quad38"> +$2 = {{fX = 369.969421, fY = 137.94809}, {fX = 383.982849, fY = 121.260353}, {fX = 406.233154, fY = 121.260353}} +$4 = {{fX = 406.232788, fY = 121.260353}, {fX = 409.441956, fY = 121.260353}, {fX = 412.972046, fY = 121.795212}} +</div> + +<div id="quad39"> +{{x = 406.233154296875, y = 121.26035308837891}, {x = 406.23153587045397, y = 121.26035308837891}, {x = 406.22991748761177, y = 121.26035317666889}}, +{{x = 406.23295158013377, y = 121.26035308872596}, {x = 406.2328698329315, y = 121.26035308837889}, {x = 406.2327880859375, y = 121.26035308837891}}, +</div> + +</div> + +<script type="text/javascript"> + +var testDivs = [ + quad56, + quad39, + quad38, + quad37, + quad36, + quad21g, + quad21a, + quad21b, + quad21c, + quad21d, + quad21e, + quad21f, + clip1, +]; + +var scale, columns, rows, xStart, yStart; + +var ticks = 10; +var at_x = 13 + 0.5; +var at_y = 13 + 0.5; +var init_decimal_places = 1; // make this 3 to show more precision +var decimal_places; +var tests = []; +var testTitles = []; +var testIndex = 0; +var ctx; +var fat1 = true; +var fat2 = false; +var ctl1 = true; +var ctl2 = false; +var ctlPts1 = true; +var ctlPts2 = false; +var minScale = 1; +var subscale = 1; + +function parse(test, title) { + var curveStrs = test.split("{{"); + if (curveStrs.length == 1) + curveStrs = test.split("=("); + var pattern = /[a-z$=]?-?\d+\.*\d*/g; + var curves = []; + for (var c in curveStrs) { + var curveStr = curveStrs[c]; + var points = curveStr.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) + curves.push(pts); + } + if (curves.length >= 2) { + tests.push(curves); + testTitles.push(title); + } +} + +function init(test) { + var canvas = document.getElementById('canvas'); + if (!canvas.getContext) return; + canvas.width = window.innerWidth - at_x; + canvas.height = window.innerHeight - at_y; + ctx = canvas.getContext('2d'); + var xmin = Infinity; + var xmax = -Infinity; + var ymin = Infinity; + var ymax = -Infinity; + for (var curves in test) { + var curve = test[curves]; + var last = curve.length; + for (var idx = 0; idx < last; idx += 2) { + xmin = Math.min(xmin, curve[idx]); + xmax = Math.max(xmax, curve[idx]); + ymin = Math.min(ymin, curve[idx + 1]); + ymax = Math.max(ymax, curve[idx + 1]); + } + } + subscale = 1; + decimal_places = init_decimal_places; + if (xmax != xmin && ymax != ymin) { + while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) { + subscale *= 10; + decimal_places += 1; + // if (subscale > 100000) { + // break; + // } + } + } + columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1; + rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1; + + xStart = Math.floor(xmin * subscale) / subscale; + yStart = Math.floor(ymin * subscale) / subscale; + var hscale = ctx.canvas.width / columns / ticks; + var vscale = ctx.canvas.height / rows / ticks; + minScale = Math.floor(Math.min(hscale, vscale)); + scale = minScale * subscale; + // while (columns < 1000 && rows < 1000) { + // columns *= 2; + // rows *= 2; + // } +} + +function drawPoint(px, py, xoffset, yoffset, unit) { + var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places); + 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, title, _at_x, _at_y, scale) { + ctx.fillStyle = "rgba(0,0,0, 0.1)"; + ctx.font = "normal 50px Arial"; + ctx.fillText(title, 50, 50); + ctx.font = "normal 10px Arial"; + + 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 * minScale); + ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale); + 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 * minScale, _at_y + 0); + ctx.lineTo(_at_x + i * minScale, _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 = xStart + i / subscale; + ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10); + } + for (i = 0; i <= rows; i += (1 / ticks)) + { + num = yStart + i / subscale; + ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0); + } + + // draw curve 1 and 2 + var curves, pts; + for (curves in test) { + var curve = test[curves]; + ctx.beginPath(); + ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit); + switch (curve.length) { + case 6: + ctx.quadraticCurveTo( + xoffset + curve[2] * unit, yoffset + curve[3] * unit, + xoffset + curve[4] * unit, yoffset + curve[5] * unit); + break; + case 8: + ctx.bezierCurveTo( + xoffset + curve[2] * unit, yoffset + curve[3] * unit, + xoffset + curve[4] * unit, yoffset + curve[5] * unit, + xoffset + curve[6] * unit, yoffset + curve[7] * unit); + break; + } + if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue"; + ctx.stroke(); + ctx.strokeStyle = "rgba(0,0,0, 0.3)"; + ctx.beginPath(); + ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit); + ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit); + ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit); + if (curve.length == 8) + ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit); + ctx.stroke(); + } + // optionally draw fat lines for curve + if (fat1) + drawFat(test[0], xoffset, yoffset, unit); + if (fat2) + drawFat(test[1], xoffset, yoffset, unit); + if (ctl1) + drawCtl(test[0], xoffset, yoffset, unit); + if (ctl2) + drawCtl(test[1], xoffset, yoffset, unit); + if (ctlPts1) + drawCtlPts(test[0], xoffset, yoffset, unit); + if (ctlPts2) + drawCtlPts(test[1], xoffset, yoffset, unit); +} + +function drawCtl(curve, xoffset, yoffset, unit) { + var last = curve.length - 2; + ctx.strokeStyle = "rgba(0,0,0, 0.5)"; + ctx.beginPath(); + ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit); + ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit); + ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit); + ctx.stroke(); +} + +function drawCtlPts(curve, xoffset, yoffset, unit) { + drawPoint(curve[0], curve[1], xoffset, yoffset, unit); + drawPoint(curve[2], curve[3], xoffset, yoffset, unit); + drawPoint(curve[4], curve[5], xoffset, yoffset, unit); +} + +function drawFat(curve, xoffset, yoffset, unit) { + var last = curve.length - 2; + ctx.strokeStyle = "rgba(0,0,0, 0.5)"; + ctx.beginPath(); + ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit); + ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit); + ctx.stroke(); + // draw line parallel to end points through control points + var dx = curve[last] - curve[0]; + var dy = curve[last + 1] - curve[1]; + drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit); + if (curve.length == 8) + drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit); +} + +function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) { + var x1 = x - dx; + var y1 = y - dy; + var x2 = x + dx; + var y2 = y + dy; + ctx.beginPath(); + ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit); + ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit); + ctx.stroke(); +} + +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], testTitles[testIndex], at_x, at_y, scale); +} + +function doKeyPress(evt) { + var char = String.fromCharCode(evt.charCode); + switch (char) { + case 'c': + ctl2 ^= true; + if (ctl2 == false) + ctl1 ^= true; + drawTop(); + break; + case 'd': + ctlPts2 ^= true; + if (ctlPts2 == false) + ctlPts1 ^= true; + drawTop(); + break; + case 'f': + fat2 ^= true; + if (fat2 == false) + fat1 ^= true; + drawTop(); + break; + case 'N': + testIndex += 9; + case 'n': + if (++testIndex >= tests.length) + testIndex = 0; + mouseX = Infinity; + drawTop(); + break; + case 'P': + testIndex -= 9; + case 'p': + if (--testIndex < 0) + testIndex = tests.length - 1; + mouseX = Infinity; + drawTop(); + break; + } +} + +function handleMouseClick() { +} + +function handleMouseOver() { +} + +function start() { + for (i = 0; i < testDivs.length; ++i) { + var title = testDivs[i].id.toString(); + var str = testDivs[i].firstChild.data; + parse(str, title); + } + drawTop(); + window.addEventListener('keypress', doKeyPress, true); + window.onresize = function() { + drawTop(); + } +} + +</script> +</head> + +<body onLoad="start();"> +<canvas id="canvas" width="750" height="500" + onmousemove="handleMouseOver()" + onclick="handleMouseClick()" + ></canvas > +</body> +</html> |