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