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