Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skqp / 78e17130f396d8b2157116c2504e357192f87ed1 / . / experimental / Intersection / op.htm
blob: 4f12c91e79bca4e3e94ba09a3bf64d8360807584 [file] [log] [blame]
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]1<html>
2<head>
3<div style="height:0">
4<div id="test_1div">
5path.moveTo(213.673737, 413.292938);
6path.lineTo(225.200134, 343.616821);
7path.lineTo(236.726532, 273.940704);
8path.lineTo(219.386414, 231.373322);
9path.lineTo(213.673737, 413.292938);
10path.close();
11path.moveTo(43.485352, 308.984497);
12path.lineTo(122.610657, 305.950134);
13path.lineTo(201.735962, 302.915802);
14path.lineTo(280.861267, 299.881470);
15path.lineTo(43.485352, 308.984497);
16path.close();
17</div>
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]18<div id="test_2div">
19path.moveTo(-177.878387, 265.368988);
20path.lineTo(-254.415771, 303.709961);
21path.lineTo(-317.465363, 271.325562);
22path.lineTo(-374.520386, 207.507660);
23path.lineTo(-177.878387, 265.368988);
24path.close();
25path.moveTo(-63.582489, -3.679123);
26path.lineTo(-134.496841, 26.434566);
27path.lineTo(-205.411209, 56.548256);
28path.lineTo(-276.325562, 86.661942);
29path.lineTo(-63.582489, -3.679123);
30path.close();
31path.moveTo(-57.078423, 162.633453);
32path.lineTo(-95.963928, 106.261139);
33path.lineTo(-134.849457, 49.888824);
34path.lineTo(-173.734955, -6.483480);
35path.lineTo(-57.078423, 162.633453);
36path.close();
37</div>
38<div id="test_3div">
39path.moveTo(98.666489, -94.295059);
40path.lineTo(156.584320, -61.939133);
41path.lineTo(174.672974, -12.343765);
42path.lineTo(158.622345, 52.028267);
43path.lineTo(98.666489, -94.295059);
44path.close();
45path.moveTo(-133.225616, -48.622055);
46path.lineTo(-73.855499, -10.375397);
47path.lineTo(-14.485367, 27.871277);
48path.lineTo(44.884750, 66.117935);
49path.lineTo(-133.225616, -48.622055);
50path.close();
51path.moveTo( 9.030045, -163.413132);
52path.lineTo(-19.605331, -89.588760);
53path.lineTo(-48.240707, -15.764404);
54path.lineTo(-76.876053, 58.059944);
55path.lineTo( 9.030045, -163.413132);
56path.close();
57</div>
58<div id="test_4div">
caryclark@google.coma5764232012-03-28 16:20:21 +0000[diff] [blame]59path.moveTo(340.41568, -170.97171);
60path.lineTo(418.846893, -142.428329);
61path.lineTo(497.278107, -113.884933);
62path.lineTo(449.18222, -45.6723022);
63path.lineTo(340.41568, -170.97171);
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]64path.close();
caryclark@google.coma5764232012-03-28 16:20:21 +0000[diff] [blame]65path.moveTo(326.610535, 34.0393639);
66path.lineTo(371.334595, -14.9620667);
67path.lineTo(416.058624, -63.9634857);
68path.lineTo(460.782654, -112.96492);
69path.lineTo(326.610535, 34.0393639);
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]70path.close();
71</div>
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]72<div id="test_5div">
73original:
74path.moveTo(0, 0);
75path.quadTo(20, 0, 20, 20);
76path.lineTo(0, 0);
77path.close();
78path.moveTo(0, 20);
79path.quadTo(0, 0, 20, 0);
80path.lineTo(0, 20);
81path.close();
82simplified:
83path.moveTo(0, 0);
84path.lineTo(5, 5);
85path.quadTo(0, 10, 0, 20);
86path.lineTo(20, 20);
87path.quadTo(20, 10, 15, 5);
88path.lineTo(20, 0);
89path.quadTo(14.1421356, 0, 10, 1.71572876);
90path.quadTo(5.85786438, 0, 0, 0);
91path.close();
92</div>
93<div id="test_6div">
94original:
95path.moveTo(0, 20);
96path.quadTo(20, 0, 40, 20);
97path.lineTo(0, 20);
98path.close();
99path.moveTo(40, 10);
100path.quadTo(20, 30, 0, 10);
101path.lineTo(40, 10);
102path.close();
103simplified:
104path.moveTo(0, 10);
105path.quadTo(2.92893219, 12.9289322, 5.85786438, 15);
106path.quadTo(2.92893219, 17.0710678, 0, 20);
107path.lineTo(40, 20);
108path.quadTo(37.0710678, 17.0710678, 34.1421356, 15);
109path.quadTo(37.0710678, 12.9289322, 40, 10);
110path.lineTo(0, 10);
111path.close();
112</div>
caryclark@google.com78e17132012-04-17 11:40:34 +0000[diff] [blame^]113<div id="test_7div">
114 path.moveTo(0, 0);
115 path.quadTo(0, 0, 0, 0);
116 path.lineTo(0, 0);
117 path.close();
118 path.moveTo(0, 0);
119 path.lineTo(0, 1);
120 path.quadTo(1, 1, 1, 2);
121 path.lineTo(0, 0);
122 path.close();
123</div>
124
125<div id="test_8div">
126original:
127path.moveTo(0, 0);
128path.lineTo(3, 1);
129path.lineTo(0, 0);
130path.close();
131path.moveTo(1, 0);
132path.lineTo(0, 1);
133path.quadTo(2, 1, 3, 3);
134path.lineTo(1, 0);
135path.close();
136simplified:
137path.moveTo(1, 0);
138path.lineTo(0, 1);
139path.quadTo(1.42857146, 1, 2.34693885, 2.02040815);
140path.lineTo(1.28571427, 0.428571433);
141path.lineTo(1, 0);
142path.close();
143path.moveTo(2.34693885, 2.02040815);
144path.quadTo(2.71428561, 2.42857146, 3, 3);
145path.lineTo(2.34693885, 2.02040815);
146path.close();
147</div>
148
149<div id="test_9div">
150 path.moveTo(0, 0);
151 path.quadTo(0, 0, 0, 0);
152 path.lineTo(0, 2);
153 path.lineTo(0, 0);
154 path.close();
155 path.moveTo(0, 0);
156 path.lineTo(2, 1);
157 path.quadTo(2, 2, 3, 3);
158 path.lineTo(0, 0);
159 path.close();
160</div>
161
162<div id="test_10div">
163original:
164path.moveTo(0, 0);
165path.lineTo(0, 2);
166path.lineTo(0, 0);
167path.close();
168path.moveTo(3, 0);
169path.quadTo(1, 1, 0, 2);
170path.lineTo(3, 0);
171path.close();
172simplified:
173path.moveTo(0, 0);
174path.lineTo(0, 2);
175path.quadTo(1, 1, 3, 0);
176path.lineTo(0, 0);
177path.close();
178</div>
179
180<div id="test_11div">
181original:
182path.moveTo(0, 0);
183path.quadTo(0, 0, 1, 0);
184path.lineTo(1, 1);
185path.lineTo(0, 0);
186path.close();
187path.moveTo(0, 0);
188path.quadTo(3, 0, 1, 1);
189path.lineTo(0, 0);
190path.close();
191simplified:
192path.moveTo(0, 0);
193path.lineTo(1, 1);
194path.lineTo(1, 0);
195path.lineTo(0, 0);
196</div>
197
198<div id="test_12div">
199 path.moveTo(0, 0);
200 path.quadTo(0, 0, 0, 0);
201 path.lineTo(1, 1);
202 path.lineTo(0, 0);
203 path.close();
204 path.moveTo(0, 0);
205 path.lineTo(0, 0);
206 path.quadTo(0, 1, 2, 1);
207 path.lineTo(0, 0);
208 path.close();
209</div>
210
211<div id="test_13div">
212original:
213path.moveTo(0, 0);
214path.quadTo(0, 0, 1, 3);
215path.lineTo(3, 3);
216path.lineTo(0, 0);
217path.close();
218path.moveTo(0, 1);
219path.lineTo(1, 1);
220path.quadTo(0, 3, 3, 3);
221path.lineTo(0, 1);
222path.close();
223simplified:
224path.moveTo(0, 0);
225path.lineTo(0.333333343, 1);
226path.lineTo(0, 1);
227path.lineTo(0.428571433, 1.28571427);
228path.lineTo(0.333333343, 1);
229path.lineTo(1, 1);
230path.lineTo(0, 0);
231path.close();
232path.moveTo(1, 1);
233path.quadTo(0.857142866, 1.28571427, 0.795918345, 1.53061223);
234path.lineTo(0.428571433, 1.28571427);
235path.lineTo(1, 3);
236path.lineTo(3, 3);
237path.lineTo(0.795918345, 1.53061223);
238path.quadTo(0.428571433, 3, 3, 3);
239path.lineTo(1, 1);
240path.close();
241</div>
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]242
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]243</div>
244
245<script type="text/javascript">
246
247var testDivs = [
caryclark@google.com78e17132012-04-17 11:40:34 +0000[diff] [blame^]248 test_13div,
249 test_12div,
250 test_11div,
251 test_10div,
252 test_9div,
253 test_8div,
254 test_7div,
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]255 test_6div,
caryclark@google.com78e17132012-04-17 11:40:34 +0000[diff] [blame^]256 test_5div,
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]257 test_4div,
258 test_3div,
259 test_2div,
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]260 test_1div,
261];
262
263var scale, columns, rows, xStart, yStart;
264
265var ticks = 0.1;
266var at_x = 13 + 0.5;
267var at_y = 13 + 0.5;
268
269var tests = [];
270var testIndex = 0;
271
272var ctx;
273
274function parse(test) {
275 var contours = [];
276 var contourStrs = test.split("path.close();");
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]277 var pattern = /-?\d+\.*\d*/g;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]278 for (var c in contourStrs) {
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]279 var contour = contourStrs[c];
280 var verbStrs = contour.split("path");
281 var verbs = [];
282 for (var v in verbStrs) {
283 var verbStr = verbStrs[v];
284 var points = verbStr.match(pattern);
285 var pts = [];
286 for (var wd in points) {
287 var num = parseFloat(points[wd]);
288 if (isNaN(num)) continue;
289 pts.push(num);
290 }
291 if (pts.length > 0)
292 verbs.push(pts);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]293 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]294 if (verbs.length > 0)
295 contours.push(verbs);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]296 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]297 if (contours.length > 0)
298 tests.push(contours);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]299}
300
301function init(test) {
302 var canvas = document.getElementById('canvas');
303 if (!canvas.getContext) return;
304 ctx = canvas.getContext('2d');
305 var xmin = Infinity;
306 var xmax = -Infinity;
307 var ymin = Infinity;
308 var ymax = -Infinity;
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]309 for (var contours in test) {
310 var contour = test[contours];
311 for (var verbs in contour) {
312 var verb = contour[verbs];
313 var last = verb.length;
314 xmin = Math.min(xmin, verb[0]);
315 ymin = Math.min(ymin, verb[1]);
316 xmax = Math.max(xmax, verb[last - 2]);
317 ymax = Math.max(ymax, verb[last - 1]);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]318 }
319 }
320 var subscale = 1;
321 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
322 subscale *= 10;
323 }
324 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
325 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
326 xStart = Math.floor(xmin);
327 yStart = Math.floor(ymin);
328 var hscale = ctx.canvas.width / columns / ticks;
329 var vscale = ctx.canvas.height / rows / ticks;
330 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
331}
332
333function drawPoint(px, py, xoffset, yoffset, unit) {
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]334 var label = px.toFixed(3) + ", " + py.toFixed(3);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]335 var _px = px * unit + xoffset;
336 var _py = py * unit + yoffset;
337 ctx.beginPath();
338 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
339 ctx.closePath();
340 ctx.fill();
341 ctx.fillText(label, _px + 5, _py);
342}
343
344function draw(test, _at_x, _at_y, scale) {
345 var unit = scale * ticks;
346 ctx.lineWidth = 1;
347 var i;
348 for (i = 0; i <= rows * ticks; ++i) {
349 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
350 ctx.beginPath();
351 ctx.moveTo(_at_x + 0, _at_y + i * scale);
352 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
353 ctx.stroke();
354 }
355 for (i = 0; i <= columns * ticks; ++i) {
356 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
357 ctx.beginPath();
358 ctx.moveTo(_at_x + i * scale, _at_y + 0);
359 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
360 ctx.stroke();
361 }
362
363 var xoffset = xStart * -unit + _at_x;
364 var yoffset = yStart * -unit + _at_y;
365
366 ctx.fillStyle = "rgb(40,80,60)"
367 for (i = 0; i <= columns; i += (1 / ticks))
368 {
369 num = (xoffset - _at_x) / -unit + i;
370 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
371 }
372 for (i = 0; i <= rows; i += (1 / ticks))
373 {
374 num = (yoffset - _at_x) / -unit + i;
375 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
376 }
377 ctx.strokeStyle = "red";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]378 var contours, verbs, pts;
379 for (contours in test) {
380 var contour = test[contours];
381 if (contours == 2) ctx.strokeStyle = "blue";
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]382 ctx.beginPath();
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]383 var first = true;
384 for (verbs in contour) {
385 var verb = contour[verbs];
386 switch (verb.length) {
387 case 2:
388 if (first) {
389 ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
390 first = false;
391 } else
392 ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
393 break;
394 case 4:
395 ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
396 xoffset + verb[2] * unit, yoffset + verb[3] * unit);
397 break;
398 case 6:
399 ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
400 xoffset + verb[2] * unit, yoffset + verb[3] * unit,
401 xoffset + verb[4] * unit, yoffset + verb[5] * unit);
402 break;
403 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]404 }
405 ctx.stroke();
406 }
407
408 ctx.fillStyle="blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]409 for (contours in test) {
410 var contour = test[contours];
411 for (verbs in contour) {
412 var verb = contour[verbs];
413 for (i = 0; i < verb.length; i += 2) {
414 x = verb[i];
415 y = verb[i + 1];
416 drawPoint(x, y, xoffset, yoffset, unit);
417 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]418 }
419 }
420}
421
422var mouseX = Infinity, mouseY;
423
424function calcXY() {
425 var e = window.event;
426 var tgt = e.target || e.srcElement;
427 var left = tgt.offsetLeft;
428 var top = tgt.offsetTop;
429 var unit = scale * ticks;
430 mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
431 mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
432}
433
434function handleMouseOver() {
435 calcXY();
436 var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
437 ctx.beginPath();
438 ctx.rect(300,100,200,10);
439 ctx.fillStyle="white";
440 ctx.fill();
441 ctx.fillStyle="black";
442 ctx.fillText(num, 300, 108);
443}
444
445function handleMouseClick() {
446 calcXY();
447// drawInset();
448}
449
450function drawTop() {
451 init(tests[testIndex]);
452 redraw();
453}
454
455function redraw() {
456 ctx.beginPath();
457 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
458 ctx.fillStyle="white";
459 ctx.fill();
460 draw(tests[testIndex], at_x, at_y, scale);
461// if (insetScale != scale && mouseX != Infinity)
462// drawInset();
463}
464
465function doKeyPress(evt) {
466 var char = String.fromCharCode(evt.charCode);
467 switch (char) {
468 case 'N':
469 case 'n':
470 if (++testIndex >= tests.length)
471 testIndex = 0;
472 // insetScale = scale;
473 mouseX = Infinity;
474 drawTop();
475 break;
476 case 'T':
477 case 't':
478 // drawTs(testIndex);
479 break;
480 case '-':
481 // if (--insetScale < 1)
482 // insetScale = 1;
483 // else
484 redraw();
485 break;
486 case '=':
487 case '+':
488 // ++insetScale;
489 redraw();
490 break;
491 }
492}
493
494function start() {
495 for (i = 0; i < testDivs.length; ++i) {
496 var str = testDivs[i].firstChild.data;
497 parse(str);
498 }
499 drawTop();
500 window.addEventListener('keypress', doKeyPress, true);
501}
502
503</script>
504</head>
505
506<body onLoad="start();">
507<canvas id="canvas" width="1500" height="1000"
508 onmousemove="handleMouseOver()"
509 onclick="handleMouseClick()"
510 ></canvas >
511</body>
512</html>