work in progress
git-svn-id: http://skia.googlecode.com/svn/trunk@3471 2bbb7eff-a529-9590-31e7-b0007b416f81
diff --git a/experimental/Intersection/op.htm b/experimental/Intersection/op.htm
new file mode 100644
index 0000000..dcfb654
--- /dev/null
+++ b/experimental/Intersection/op.htm
@@ -0,0 +1,244 @@
+<html>
+<head>
+<div style="height:0">
+<div id="test_1div">
+path.moveTo(213.673737, 413.292938);
+path.lineTo(225.200134, 343.616821);
+path.lineTo(236.726532, 273.940704);
+path.lineTo(219.386414, 231.373322);
+path.lineTo(213.673737, 413.292938);
+path.close();
+path.moveTo(43.485352, 308.984497);
+path.lineTo(122.610657, 305.950134);
+path.lineTo(201.735962, 302.915802);
+path.lineTo(280.861267, 299.881470);
+path.lineTo(43.485352, 308.984497);
+path.close();
+</div>
+</div>
+
+<script type="text/javascript">
+
+var testDivs = [
+ test_1div,
+];
+
+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 points = contourStrs[c].match(pattern);
+ var pts = [];
+ for (var wd in points) {
+ var num = parseFloat(points[wd]);
+ if (isNaN(num)) continue;
+ pts.push(num );
+ }
+ contours.push(pts);
+ }
+ tests.push(contours);
+}
+
+function init(test) {
+ var canvas = document.getElementById('canvas');
+ if (!canvas.getContext) return;
+ ctx = canvas.getContext('2d');
+ var xmin = Infinity;
+ var xmax = -Infinity;
+ var ymin = Infinity;
+ var ymax = -Infinity;
+ for (pts in test) {
+ var pt = test[pts];
+ for (i = 0; i < pt.length; i += 2) {
+ xmin = Math.min(xmin, pt[i]);
+ ymin = Math.min(ymin, pt[i + 1]);
+ xmax = Math.max(xmax, pt[i]);
+ ymax = Math.max(ymax, pt[i + 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 + "=" + px.toFixed(3) + ", " + py + "=" + 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";
+ for (pts in test) {
+ var pt = test[pts];
+ var x = pt[0];
+ var y = pt[1];
+ ctx.beginPath();
+ ctx.moveTo(xoffset + x * unit, yoffset + y * unit);
+ for (i = 2; i < pt.length; i += 2) {
+ x = pt[i];
+ y = pt[i + 1];
+ ctx.lineTo(xoffset + x * unit, yoffset + y * unit);
+ }
+ ctx.stroke();
+ }
+
+ ctx.fillStyle="blue";
+ for (pts in test) {
+ var pt = test[pts];
+ for (i = 0; i < pt.length; i += 2) {
+ x = pt[i];
+ y = pt[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;
+ // insetScale = scale;
+ mouseX = Infinity;
+ drawTop();
+ break;
+ case 'T':
+ case 't':
+ // drawTs(testIndex);
+ break;
+ case '-':
+ // if (--insetScale < 1)
+ // insetScale = 1;
+ // else
+ redraw();
+ break;
+ case '=':
+ case '+':
+ // ++insetScale;
+ redraw();
+ break;
+ }
+}
+
+function start() {
+ for (i = 0; i < testDivs.length; ++i) {
+ var str = testDivs[i].firstChild.data;
+ parse(str);
+ }
+ drawTop();
+ window.addEventListener('keypress', doKeyPress, true);
+}
+
+</script>
+</head>
+
+<body onLoad="start();">
+<canvas id="canvas" width="1500" height="1000"
+ onmousemove="handleMouseOver()"
+ onclick="handleMouseClick()"
+ ></canvas >
+</body>
+</html>