Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / 75589257c6ac7fc55a66502b74b8bc09c0212fea / . / experimental / Intersection / op.htm
blob: b2c91237f20649769fa99ce25f3dac3e7731a9b2 [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.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]72</div>
73
74<script type="text/javascript">
75
76var testDivs = [
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]77 test_4div,
78 test_3div,
79 test_2div,
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]80 test_1div,
81];
82
83var scale, columns, rows, xStart, yStart;
84
85var ticks = 0.1;
86var at_x = 13 + 0.5;
87var at_y = 13 + 0.5;
88
89var tests = [];
90var testIndex = 0;
91
92var ctx;
93
94function parse(test) {
95 var contours = [];
96 var contourStrs = test.split("path.close();");
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]97 var pattern = /-?\d+\.*\d*/g;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]98 for (var c in contourStrs) {
99 var points = contourStrs[c].match(pattern);
100 var pts = [];
101 for (var wd in points) {
102 var num = parseFloat(points[wd]);
103 if (isNaN(num)) continue;
104 pts.push(num );
105 }
106 contours.push(pts);
107 }
108 tests.push(contours);
109}
110
111function init(test) {
112 var canvas = document.getElementById('canvas');
113 if (!canvas.getContext) return;
114 ctx = canvas.getContext('2d');
115 var xmin = Infinity;
116 var xmax = -Infinity;
117 var ymin = Infinity;
118 var ymax = -Infinity;
119 for (pts in test) {
120 var pt = test[pts];
121 for (i = 0; i < pt.length; i += 2) {
122 xmin = Math.min(xmin, pt[i]);
123 ymin = Math.min(ymin, pt[i + 1]);
124 xmax = Math.max(xmax, pt[i]);
125 ymax = Math.max(ymax, pt[i + 1]);
126 }
127 }
128 var subscale = 1;
129 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
130 subscale *= 10;
131 }
132 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
133 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
134 xStart = Math.floor(xmin);
135 yStart = Math.floor(ymin);
136 var hscale = ctx.canvas.width / columns / ticks;
137 var vscale = ctx.canvas.height / rows / ticks;
138 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
139}
140
141function drawPoint(px, py, xoffset, yoffset, unit) {
caryclark@google.comd88e0892012-03-27 13:23:51 +0000[diff] [blame]142 var label = px.toFixed(3) + ", " + py.toFixed(3);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000[diff] [blame]143 var _px = px * unit + xoffset;
144 var _py = py * unit + yoffset;
145 ctx.beginPath();
146 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
147 ctx.closePath();
148 ctx.fill();
149 ctx.fillText(label, _px + 5, _py);
150}
151
152function draw(test, _at_x, _at_y, scale) {
153 var unit = scale * ticks;
154 ctx.lineWidth = 1;
155 var i;
156 for (i = 0; i <= rows * ticks; ++i) {
157 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
158 ctx.beginPath();
159 ctx.moveTo(_at_x + 0, _at_y + i * scale);
160 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
161 ctx.stroke();
162 }
163 for (i = 0; i <= columns * ticks; ++i) {
164 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
165 ctx.beginPath();
166 ctx.moveTo(_at_x + i * scale, _at_y + 0);
167 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
168 ctx.stroke();
169 }
170
171 var xoffset = xStart * -unit + _at_x;
172 var yoffset = yStart * -unit + _at_y;
173
174 ctx.fillStyle = "rgb(40,80,60)"
175 for (i = 0; i <= columns; i += (1 / ticks))
176 {
177 num = (xoffset - _at_x) / -unit + i;
178 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
179 }
180 for (i = 0; i <= rows; i += (1 / ticks))
181 {
182 num = (yoffset - _at_x) / -unit + i;
183 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
184 }
185 ctx.strokeStyle = "red";
186 for (pts in test) {
187 var pt = test[pts];
188 var x = pt[0];
189 var y = pt[1];
190 ctx.beginPath();
191 ctx.moveTo(xoffset + x * unit, yoffset + y * unit);
192 for (i = 2; i < pt.length; i += 2) {
193 x = pt[i];
194 y = pt[i + 1];
195 ctx.lineTo(xoffset + x * unit, yoffset + y * unit);
196 }
197 ctx.stroke();
198 }
199
200 ctx.fillStyle="blue";
201 for (pts in test) {
202 var pt = test[pts];
203 for (i = 0; i < pt.length; i += 2) {
204 x = pt[i];
205 y = pt[i + 1];
206 drawPoint(x, y, xoffset, yoffset, unit);
207 }
208 }
209}
210
211var mouseX = Infinity, mouseY;
212
213function calcXY() {
214 var e = window.event;
215 var tgt = e.target || e.srcElement;
216 var left = tgt.offsetLeft;
217 var top = tgt.offsetTop;
218 var unit = scale * ticks;
219 mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
220 mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
221}
222
223function handleMouseOver() {
224 calcXY();
225 var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
226 ctx.beginPath();
227 ctx.rect(300,100,200,10);
228 ctx.fillStyle="white";
229 ctx.fill();
230 ctx.fillStyle="black";
231 ctx.fillText(num, 300, 108);
232}
233
234function handleMouseClick() {
235 calcXY();
236// drawInset();
237}
238
239function drawTop() {
240 init(tests[testIndex]);
241 redraw();
242}
243
244function redraw() {
245 ctx.beginPath();
246 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
247 ctx.fillStyle="white";
248 ctx.fill();
249 draw(tests[testIndex], at_x, at_y, scale);
250// if (insetScale != scale && mouseX != Infinity)
251// drawInset();
252}
253
254function doKeyPress(evt) {
255 var char = String.fromCharCode(evt.charCode);
256 switch (char) {
257 case 'N':
258 case 'n':
259 if (++testIndex >= tests.length)
260 testIndex = 0;
261 // insetScale = scale;
262 mouseX = Infinity;
263 drawTop();
264 break;
265 case 'T':
266 case 't':
267 // drawTs(testIndex);
268 break;
269 case '-':
270 // if (--insetScale < 1)
271 // insetScale = 1;
272 // else
273 redraw();
274 break;
275 case '=':
276 case '+':
277 // ++insetScale;
278 redraw();
279 break;
280 }
281}
282
283function start() {
284 for (i = 0; i < testDivs.length; ++i) {
285 var str = testDivs[i].firstChild.data;
286 parse(str);
287 }
288 drawTop();
289 window.addEventListener('keypress', doKeyPress, true);
290}
291
292</script>
293</head>
294
295<body onLoad="start();">
296<canvas id="canvas" width="1500" height="1000"
297 onmousemove="handleMouseOver()"
298 onclick="handleMouseClick()"
299 ></canvas >
300</body>
301</html>