Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / b45a1b46ee25e9b19800b028bb1ca925212ac7b4 / . / experimental / Intersection / op.htm
blob: 5173eaba27e1f658cbb56f7f92c7cca3fe985e71 [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;
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame^]237 path.moveTo(8, 8);
238 path.quadTo(10, 10, 8, -10);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]239 path.close();
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame^]240 path.moveTo(8, 8);
241 path.quadTo(12, 12, 14, 4);
242 path.close();
243 path.moveTo(8, 8);
244 path.quadTo(9, 9, 10, 8);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]245 path.close();
246 testSimplify(path, true, out, bitmap);
247 drawAsciiPaths(path, out, true);
248}
caryclark@google.com78e17132012-04-17 11:40:34 +0000[diff] [blame]249</div>
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]250
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame^]251<div id="testSimplifyQuadratic18">
252 SkPath path, out;
253 path.moveTo(8.0000000000000071, 8.0000000000000071);
254 path.quadTo(8.7289570079366854, 8.7289570079366889, 9.3914917259458743, 9.0593802763083691);
255 path.close();
256 path.moveTo(8.0000000000000142, 8.0000000000000142);
257 path.quadTo(8.1250000000000107, 8.1250000000000071, 8.2500000000000071, 8.2187500000000053);
258 path.close();
259 testSimplify(path, true, out, bitmap);
260 drawAsciiPaths(path, out, true);
261</div>
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]262</div>
263
264<script type="text/javascript">
265
266var testDivs = [
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame^]267 testSimplifyQuadratic18,
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]268 testSimplifyQuadratic17,
269 testSimplifyQuadratic16,
270 testSimplifyQuadratic15,
271 testSimplifyQuadratic14,
272 testSimplifyQuadratic13,
273 testSimplifyQuadratic12,
274 testSimplifyQuadratic11,
275 testSimplifyQuadratic10,
276 testSimplifyQuadratic9,
277 testSimplifyQuadratic8,
278 testSimplifyQuadratic7,
279 testSimplifyQuadratic6,
280 testSimplifyQuadratic5,
281 testSimplifyQuadratic4,
282 testSimplifyQuadratic3,
283 testSimplifyQuadratic2,
284 testSimplifyQuadratic1,
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]285];
286
287var scale, columns, rows, xStart, yStart;
288
289var ticks = 0.1;
290var at_x = 13 + 0.5;
291var at_y = 13 + 0.5;
292
293var tests = [];
294var testIndex = 0;
295
296var ctx;
297
298function parse(test) {
299 var contours = [];
300 var contourStrs = test.split("path.close();");
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]301 var pattern = /-?\d+\.*\d*/g;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]302 for (var c in contourStrs) {
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]303 var contour = contourStrs[c];
304 var verbStrs = contour.split("path");
305 var verbs = [];
306 for (var v in verbStrs) {
307 var verbStr = verbStrs[v];
308 var points = verbStr.match(pattern);
309 var pts = [];
310 for (var wd in points) {
311 var num = parseFloat(points[wd]);
312 if (isNaN(num)) continue;
313 pts.push(num);
314 }
315 if (pts.length > 0)
316 verbs.push(pts);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]317 }
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]318 if (verbs.length > 0) {
319 var lastIndex = verbs.length - 1;
320 var lastVerb = verbs[lastIndex];
321 var lastLen = lastVerb.length;
322 if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) {
323 var lastPts = [];
324 lastPts.push(verbs[0][0]);
325 lastPts.push(verbs[0][1]);
326 verbs.push(lastPts);
327 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]328 contours.push(verbs);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]329 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]330 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]331 if (contours.length > 0)
332 tests.push(contours);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]333}
334
335function init(test) {
336 var canvas = document.getElementById('canvas');
337 if (!canvas.getContext) return;
338 ctx = canvas.getContext('2d');
339 var xmin = Infinity;
340 var xmax = -Infinity;
341 var ymin = Infinity;
342 var ymax = -Infinity;
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]343 for (var contours in test) {
344 var contour = test[contours];
345 for (var verbs in contour) {
346 var verb = contour[verbs];
347 var last = verb.length;
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame^]348 for (var idx = 0; idx < last; idx += 2) {
349 xmin = Math.min(xmin, verb[idx]);
350 xmax = Math.max(xmax, verb[idx]);
351 ymin = Math.min(ymin, verb[idx + 1]);
352 ymax = Math.max(ymax, verb[idx + 1]);
353 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]354 }
355 }
356 var subscale = 1;
357 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
358 subscale *= 10;
359 }
360 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
361 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
362 xStart = Math.floor(xmin);
363 yStart = Math.floor(ymin);
364 var hscale = ctx.canvas.width / columns / ticks;
365 var vscale = ctx.canvas.height / rows / ticks;
366 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
367}
368
369function drawPoint(px, py, xoffset, yoffset, unit) {
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]370 var label = px.toFixed(3) + ", " + py.toFixed(3);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]371 var _px = px * unit + xoffset;
372 var _py = py * unit + yoffset;
373 ctx.beginPath();
374 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
375 ctx.closePath();
376 ctx.fill();
377 ctx.fillText(label, _px + 5, _py);
378}
379
380function draw(test, _at_x, _at_y, scale) {
381 var unit = scale * ticks;
382 ctx.lineWidth = 1;
383 var i;
384 for (i = 0; i <= rows * ticks; ++i) {
385 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
386 ctx.beginPath();
387 ctx.moveTo(_at_x + 0, _at_y + i * scale);
388 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
389 ctx.stroke();
390 }
391 for (i = 0; i <= columns * ticks; ++i) {
392 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
393 ctx.beginPath();
394 ctx.moveTo(_at_x + i * scale, _at_y + 0);
395 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
396 ctx.stroke();
397 }
398
399 var xoffset = xStart * -unit + _at_x;
400 var yoffset = yStart * -unit + _at_y;
401
402 ctx.fillStyle = "rgb(40,80,60)"
403 for (i = 0; i <= columns; i += (1 / ticks))
404 {
405 num = (xoffset - _at_x) / -unit + i;
406 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
407 }
408 for (i = 0; i <= rows; i += (1 / ticks))
409 {
410 num = (yoffset - _at_x) / -unit + i;
411 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
412 }
413 ctx.strokeStyle = "red";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]414 var contours, verbs, pts;
415 for (contours in test) {
416 var contour = test[contours];
417 if (contours == 2) ctx.strokeStyle = "blue";
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]418 ctx.beginPath();
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]419 var first = true;
420 for (verbs in contour) {
421 var verb = contour[verbs];
422 switch (verb.length) {
423 case 2:
424 if (first) {
425 ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
426 first = false;
427 } else
428 ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
429 break;
430 case 4:
431 ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
432 xoffset + verb[2] * unit, yoffset + verb[3] * unit);
433 break;
434 case 6:
435 ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
436 xoffset + verb[2] * unit, yoffset + verb[3] * unit,
437 xoffset + verb[4] * unit, yoffset + verb[5] * unit);
438 break;
439 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]440 }
441 ctx.stroke();
442 }
443
444 ctx.fillStyle="blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]445 for (contours in test) {
446 var contour = test[contours];
447 for (verbs in contour) {
448 var verb = contour[verbs];
449 for (i = 0; i < verb.length; i += 2) {
450 x = verb[i];
451 y = verb[i + 1];
452 drawPoint(x, y, xoffset, yoffset, unit);
453 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]454 }
455 }
456}
457
458var mouseX = Infinity, mouseY;
459
460function calcXY() {
461 var e = window.event;
462 var tgt = e.target || e.srcElement;
463 var left = tgt.offsetLeft;
464 var top = tgt.offsetTop;
465 var unit = scale * ticks;
466 mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
467 mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
468}
469
470function handleMouseOver() {
471 calcXY();
472 var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
473 ctx.beginPath();
474 ctx.rect(300,100,200,10);
475 ctx.fillStyle="white";
476 ctx.fill();
477 ctx.fillStyle="black";
478 ctx.fillText(num, 300, 108);
479}
480
481function handleMouseClick() {
482 calcXY();
483// drawInset();
484}
485
486function drawTop() {
487 init(tests[testIndex]);
488 redraw();
489}
490
491function redraw() {
492 ctx.beginPath();
493 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
494 ctx.fillStyle="white";
495 ctx.fill();
496 draw(tests[testIndex], at_x, at_y, scale);
497// if (insetScale != scale && mouseX != Infinity)
498// drawInset();
499}
500
501function doKeyPress(evt) {
502 var char = String.fromCharCode(evt.charCode);
503 switch (char) {
504 case 'N':
505 case 'n':
506 if (++testIndex >= tests.length)
507 testIndex = 0;
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]508 mouseX = Infinity;
509 drawTop();
510 break;
511 case 'P':
512 case 'p':
513 if (--testIndex < 0)
514 testIndex = tests.length - 1;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]515 mouseX = Infinity;
516 drawTop();
517 break;
518 case 'T':
519 case 't':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]520 break;
521 case '-':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]522 redraw();
523 break;
524 case '=':
525 case '+':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]526 redraw();
527 break;
528 }
529}
530
531function start() {
532 for (i = 0; i < testDivs.length; ++i) {
533 var str = testDivs[i].firstChild.data;
534 parse(str);
535 }
536 drawTop();
537 window.addEventListener('keypress', doKeyPress, true);
538}
539
540</script>
541</head>
542
543<body onLoad="start();">
544<canvas id="canvas" width="1500" height="1000"
545 onmousemove="handleMouseOver()"
546 onclick="handleMouseClick()"
547 ></canvas >
548</body>
549</html>