Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skqp / 9764cc6c109dba208592fe5f16447b8439375746 / . / experimental / Intersection / op.htm
blob: 64f7611a1e65dacb7b733bc8294c50634cdcb723 [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.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]262
263<div id="testSimplifyQuadratic19">
264 SkPath path, simple;
265 path.moveTo(0,4);
266 path.lineTo(6,4);
267 path.lineTo(3,1);
268 path.close();
269 path.moveTo(2,3);
270 path.lineTo(3,2);
271 path.lineTo(4,3);
272 path.close();
273 testSimplifyx(path);
274</div>
275
276<div id="testSimplifyQuadratic20">
277 SkPath path, simple;
278 path.moveTo(0,4);
279 path.lineTo(6,4);
280 path.lineTo(3,1);
281 path.close();
282 path.moveTo(2,3);
283 path.lineTo(4,3);
284 path.lineTo(3,2);
285 path.close();
286 testSimplifyx(path);
287</div>
288
289<div id="testSimplifyQuadratic21">
290 SkPath path, simple;
291 path.moveTo(0,4);
292 path.lineTo(8,4);
293 path.lineTo(4,0);
294 path.close();
295 path.moveTo(2,2);
296 path.lineTo(3,3);
297 path.lineTo(4,2);
298 path.close();
299 testSimplifyx(path);
300</div>
301
302<div id="testLine6">
303 SkPath path, simple;
304 path.moveTo(0,0);
305 path.lineTo(4,0);
306 path.lineTo(2,2);
307 path.close();
308 path.moveTo(2,0);
309 path.lineTo(6,0);
310 path.lineTo(4,2);
311 path.close();
312 testSimplifyx(path);
313</div>
314
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]315<div id="testLine7">
316 SkPath path, simple;
317 path.moveTo(0,0);
318 path.lineTo(4,0);
319 path.lineTo(2,2);
320 path.close();
321 path.moveTo(6,0);
322 path.lineTo(2,0);
323 path.lineTo(4,2);
324 path.close();
325 testSimplifyx(path);
326</div>
327
328<div id="testLine9">
329 SkPath path, simple;
330 path.moveTo(0,4);
331 path.lineTo(4,4);
332 path.lineTo(2,2);
333 path.close();
334 path.moveTo(6,4);
335 path.lineTo(2,4);
336 path.lineTo(4,2);
337 path.close();
338 testSimplifyx(path);
339</div>
340
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]341<div id="testLine17">
342 SkPath path, simple;
343 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
344 path.addRect(4, 12, 13, 13, (SkPath::Direction) 0);
345 testSimplifyx(path);
346</div>
347
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]348<div id="testLine28">
349 SkPath path, simple;
350 path.addRect(0, 6, 12, 12, (SkPath::Direction) 0);
351 path.addRect(0, 0, 9, 9, (SkPath::Direction) 0);
352 testSimplifyx(path);
353</div>
354
355<div id="testLine29">
356 SkPath path, simple;
357 path.addRect(0, 18, 12, 12, (SkPath::Direction) 0);
358 path.addRect(12, 12, 21, 21, (SkPath::Direction) 0);
359 testSimplifyx(path);
360</div>
361
362<div id="testLine30">
363 path.addRect(0, 0, 20, 20, (SkPath::Direction) 0);
364 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
365 path.addRect(4, 4, 13, 13, (SkPath::Direction) 0);
366</div>
367
368<div id="testLine31">
369 path.addRect(0, 0, 20, 20, (SkPath::Direction) 0);
370 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
371 path.addRect(0, 4, 9, 9, (SkPath::Direction) 0);
372</div>
373
374<div id="testLine32">
375 path.addRect(0, 0, 20, 20, (SkPath::Direction) 0);
376 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
377 path.addRect(4, 12, 13, 13, (SkPath::Direction) 0);
378</div>
379
caryclark@google.com9764cc62012-07-12 19:29:45 +0000[diff] [blame^]380<div id="testLine33">
381 path.addRect(0, 0, 20, 20, (SkPath::Direction) 0);
382 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
383 path.addRect(4, 16, 13, 13, (SkPath::Direction) 0);
384</div>
385
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]386</div>
387
388<script type="text/javascript">
389
390var testDivs = [
caryclark@google.com9764cc62012-07-12 19:29:45 +0000[diff] [blame^]391 testLine33,
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]392 testLine9,
393 testLine7,
394 testLine30,
395 testLine32,
396 testLine31,
397 testLine29,
398 testLine28,
399 testLine17,
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]400 testSimplifyQuadratic21,
401 testSimplifyQuadratic20,
402 testSimplifyQuadratic19,
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame]403 testSimplifyQuadratic18,
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]404 testSimplifyQuadratic17,
405 testSimplifyQuadratic16,
406 testSimplifyQuadratic15,
407 testSimplifyQuadratic14,
408 testSimplifyQuadratic13,
409 testSimplifyQuadratic12,
410 testSimplifyQuadratic11,
411 testSimplifyQuadratic10,
412 testSimplifyQuadratic9,
413 testSimplifyQuadratic8,
414 testSimplifyQuadratic7,
415 testSimplifyQuadratic6,
416 testSimplifyQuadratic5,
417 testSimplifyQuadratic4,
418 testSimplifyQuadratic3,
419 testSimplifyQuadratic2,
420 testSimplifyQuadratic1,
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]421];
422
423var scale, columns, rows, xStart, yStart;
424
425var ticks = 0.1;
426var at_x = 13 + 0.5;
427var at_y = 13 + 0.5;
428
429var tests = [];
430var testIndex = 0;
431
432var ctx;
433
434function parse(test) {
435 var contours = [];
436 var contourStrs = test.split("path.close();");
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]437 var pattern = /-?\d+\.*\d*/g;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]438 for (var c in contourStrs) {
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]439 var contour = contourStrs[c];
440 var verbStrs = contour.split("path");
441 var verbs = [];
442 for (var v in verbStrs) {
443 var verbStr = verbStrs[v];
444 var points = verbStr.match(pattern);
445 var pts = [];
446 for (var wd in points) {
447 var num = parseFloat(points[wd]);
448 if (isNaN(num)) continue;
449 pts.push(num);
450 }
451 if (pts.length > 0)
452 verbs.push(pts);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]453 }
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]454 if (verbs.length > 0) {
455 var lastIndex = verbs.length - 1;
456 var lastVerb = verbs[lastIndex];
457 var lastLen = lastVerb.length;
458 if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) {
459 var lastPts = [];
460 lastPts.push(verbs[0][0]);
461 lastPts.push(verbs[0][1]);
462 verbs.push(lastPts);
463 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]464 contours.push(verbs);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]465 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]466 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]467 if (contours.length > 0)
468 tests.push(contours);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]469}
470
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]471function parseRect(test) {
472 var contours = [];
473 var rectStrs = test.split("path.addRect");
474 var pattern = /-?\d+\.*\d*/g;
475 for (var r in rectStrs) {
476 var rect = rectStrs[r];
477 var sideStrs = rect.match(pattern);
478 var sides = [];
479 for (var wd in sideStrs) {
480 var num = parseFloat(sideStrs[wd]);
481 if (isNaN(num)) continue;
482 sides.push(num);
483 }
484 if (sides.length == 0)
485 continue;
486 var verbs = [];
487 var topLeft = [];
488 topLeft.push(sides[0]); topLeft.push(sides[1]);
489 var topRight = [];
490 topRight.push(sides[2]); topRight.push(sides[1]);
491 var botLeft = [];
492 botLeft.push(sides[0]); botLeft.push(sides[3]);
493 var botRight = [];
494 botRight.push(sides[2]); botRight.push(sides[3]);
495 verbs.push(topLeft);
496 if (sides[4] == 0) {
497 verbs.push(topRight);
498 verbs.push(botRight);
499 verbs.push(botLeft);
500 } else {
501 verbs.push(botLeft);
502 verbs.push(botRight);
503 verbs.push(topRight);
504 }
505 verbs.push(topLeft);
506 contours.push(verbs);
507 }
508 if (contours.length > 0)
509 tests.push(contours);
510}
511
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]512function init(test) {
513 var canvas = document.getElementById('canvas');
514 if (!canvas.getContext) return;
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]515 canvas.width = document.width;
516 canvas.height = document.height;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]517 ctx = canvas.getContext('2d');
518 var xmin = Infinity;
519 var xmax = -Infinity;
520 var ymin = Infinity;
521 var ymax = -Infinity;
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]522 for (var contours in test) {
523 var contour = test[contours];
524 for (var verbs in contour) {
525 var verb = contour[verbs];
526 var last = verb.length;
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000[diff] [blame]527 for (var idx = 0; idx < last; idx += 2) {
528 xmin = Math.min(xmin, verb[idx]);
529 xmax = Math.max(xmax, verb[idx]);
530 ymin = Math.min(ymin, verb[idx + 1]);
531 ymax = Math.max(ymax, verb[idx + 1]);
532 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]533 }
534 }
535 var subscale = 1;
536 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
537 subscale *= 10;
538 }
539 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
540 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
541 xStart = Math.floor(xmin);
542 yStart = Math.floor(ymin);
543 var hscale = ctx.canvas.width / columns / ticks;
544 var vscale = ctx.canvas.height / rows / ticks;
545 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
546}
547
548function drawPoint(px, py, xoffset, yoffset, unit) {
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]549 var label = px.toFixed(3) + ", " + py.toFixed(3);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]550 var _px = px * unit + xoffset;
551 var _py = py * unit + yoffset;
552 ctx.beginPath();
553 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
554 ctx.closePath();
555 ctx.fill();
556 ctx.fillText(label, _px + 5, _py);
557}
558
559function draw(test, _at_x, _at_y, scale) {
560 var unit = scale * ticks;
561 ctx.lineWidth = 1;
562 var i;
563 for (i = 0; i <= rows * ticks; ++i) {
564 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
565 ctx.beginPath();
566 ctx.moveTo(_at_x + 0, _at_y + i * scale);
567 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
568 ctx.stroke();
569 }
570 for (i = 0; i <= columns * ticks; ++i) {
571 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
572 ctx.beginPath();
573 ctx.moveTo(_at_x + i * scale, _at_y + 0);
574 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
575 ctx.stroke();
576 }
577
578 var xoffset = xStart * -unit + _at_x;
579 var yoffset = yStart * -unit + _at_y;
580
581 ctx.fillStyle = "rgb(40,80,60)"
582 for (i = 0; i <= columns; i += (1 / ticks))
583 {
584 num = (xoffset - _at_x) / -unit + i;
585 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
586 }
587 for (i = 0; i <= rows; i += (1 / ticks))
588 {
589 num = (yoffset - _at_x) / -unit + i;
590 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
591 }
592 ctx.strokeStyle = "red";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]593 var contours, verbs, pts;
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]594 ctx.beginPath();
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]595 for (contours in test) {
596 var contour = test[contours];
597 if (contours == 2) ctx.strokeStyle = "blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]598 var first = true;
599 for (verbs in contour) {
600 var verb = contour[verbs];
601 switch (verb.length) {
602 case 2:
603 if (first) {
604 ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
605 first = false;
606 } else
607 ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
608 break;
609 case 4:
610 ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
611 xoffset + verb[2] * unit, yoffset + verb[3] * unit);
612 break;
613 case 6:
614 ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
615 xoffset + verb[2] * unit, yoffset + verb[3] * unit,
616 xoffset + verb[4] * unit, yoffset + verb[5] * unit);
617 break;
618 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]619 }
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]620 ctx.closePath();
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]621 }
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000[diff] [blame]622 ctx.stroke();
623 ctx.fillStyle="rgba(192,192,255, 0.3)";
624 ctx.fill();
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]625
626 ctx.fillStyle="blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000[diff] [blame]627 for (contours in test) {
628 var contour = test[contours];
629 for (verbs in contour) {
630 var verb = contour[verbs];
631 for (i = 0; i < verb.length; i += 2) {
632 x = verb[i];
633 y = verb[i + 1];
634 drawPoint(x, y, xoffset, yoffset, unit);
635 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]636 }
637 }
638}
639
640var mouseX = Infinity, mouseY;
641
642function calcXY() {
643 var e = window.event;
644 var tgt = e.target || e.srcElement;
645 var left = tgt.offsetLeft;
646 var top = tgt.offsetTop;
647 var unit = scale * ticks;
648 mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
649 mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
650}
651
652function handleMouseOver() {
653 calcXY();
654 var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
655 ctx.beginPath();
656 ctx.rect(300,100,200,10);
657 ctx.fillStyle="white";
658 ctx.fill();
659 ctx.fillStyle="black";
660 ctx.fillText(num, 300, 108);
661}
662
663function handleMouseClick() {
664 calcXY();
665// drawInset();
666}
667
668function drawTop() {
669 init(tests[testIndex]);
670 redraw();
671}
672
673function redraw() {
674 ctx.beginPath();
675 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
676 ctx.fillStyle="white";
677 ctx.fill();
678 draw(tests[testIndex], at_x, at_y, scale);
679// if (insetScale != scale && mouseX != Infinity)
680// drawInset();
681}
682
683function doKeyPress(evt) {
684 var char = String.fromCharCode(evt.charCode);
685 switch (char) {
686 case 'N':
687 case 'n':
688 if (++testIndex >= tests.length)
689 testIndex = 0;
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000[diff] [blame]690 mouseX = Infinity;
691 drawTop();
692 break;
693 case 'P':
694 case 'p':
695 if (--testIndex < 0)
696 testIndex = tests.length - 1;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]697 mouseX = Infinity;
698 drawTop();
699 break;
700 case 'T':
701 case 't':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]702 break;
703 case '-':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]704 redraw();
705 break;
706 case '=':
707 case '+':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]708 redraw();
709 break;
710 }
711}
712
713function start() {
714 for (i = 0; i < testDivs.length; ++i) {
715 var str = testDivs[i].firstChild.data;
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]716 if (str.split("addRect").length > 1) {
717 parseRect(str);
718 } else {
719 parse(str);
720 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]721 }
722 drawTop();
723 window.addEventListener('keypress', doKeyPress, true);
724}
725
726</script>
727</head>
728
729<body onLoad="start();">
caryclark@google.comfa4a6e92012-07-11 17:52:32 +0000[diff] [blame]730<canvas id="canvas" width="750" height="500"
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]731 onmousemove="handleMouseOver()"
732 onclick="handleMouseClick()"
733 ></canvas >
734</body>
735</html>