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