Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skqp / be5091c1fbce0e04ea86e55df341e6665a28c04c / . / modules / pathkit / npm-asmjs / example.html
blob: 395caa0af7ad58197c13747888db188e7ef436e9 [file] [log] [blame]
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]1<!DOCTYPE html>
2<title>PathKit (Skia + asm.js)</title>
3<meta charset="utf-8" />
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7<style>
8 svg, canvas {
9 border: 1px dashed #AAA;
10 }
11
12 canvas {
13 width: 200px;
14 height: 200px;
15 }
16
17 canvas.big {
18 width: 300px;
19 height: 300px;
20 }
21
22</style>
23
24<h2> Can output to an SVG Path, a Canvas, or a Path2D object </h2>
25<svg id=svg1 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
26<canvas id=canvas1></canvas>
27<canvas id=canvas2></canvas>
28
29<h2> Interact with NewPath() just like a Path2D Object </h2>
30<canvas class=big id=canvas3></canvas>
31<canvas class=big id=canvas4></canvas>
32
33<h2> Has various Path Effects </h2>
34<canvas class=big id=canvas5></canvas>
35<canvas class=big id=canvas6></canvas>
36<canvas class=big id=canvas7></canvas>
37<canvas class=big id=canvas8></canvas>
38<canvas class=big id=canvas9></canvas>
39<canvas class=big id=canvas10></canvas>
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]40<canvas class=big id=canvas11></canvas>
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]41<canvas class=big id=canvasTransform></canvas>
42
43<h2> Supports fill-rules of nonzero and evenodd </h2>
44<svg id=svg2 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
45<svg id=svg3 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
46
Kevin Lubickbe5091c2018-08-31 10:45:18 -0400[diff] [blame^]47<script type="text/javascript" src="/node_modules/pathkit-asmjs/bin/pathkit.js"></script>
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]48
49<script type="text/javascript" charset="utf-8">
50
51 PathKitInit({
Kevin Lubickbe5091c2018-08-31 10:45:18 -0400[diff] [blame^]52 locateFile: (file) => '/node_modules/pathkit-asmjs/bin/'+file,
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]53 }).then((PathKit) => {
54 window.PathKit = PathKit;
55 OutputsExample(PathKit);
56 Path2DExample(PathKit);
57 PathEffectsExample(PathKit);
58 MatrixTransformExample(PathKit);
59 FilledSVGExample(PathKit);
60 });
61
62 function setCanvasSize(ctx, width, height) {
63 ctx.canvas.width = width;
64 ctx.canvas.height = height;
65 }
66
67 function OutputsExample(PathKit) {
68 let firstPath = PathKit.FromSVGString('M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z');
69
70 let secondPath = PathKit.NewPath();
71 // Acts somewhat like the Canvas API, except can be chained
72 secondPath.moveTo(1, 1)
73 .lineTo(20, 1)
74 .lineTo(10, 30)
75 .closePath();
76
77 // Join the two paths together (mutating firstPath in the process)
78 firstPath.op(secondPath, PathKit.PathOp.INTERSECT);
79
80 let simpleStr = firstPath.toSVGString();
81
82 let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
83 newSVG.setAttribute('stroke', 'rgb(0,0,200)');
84 newSVG.setAttribute('fill', 'white');
85 newSVG.setAttribute('transform', 'scale(8,8)');
86 newSVG.setAttribute('d', simpleStr);
87 document.getElementById('svg1').appendChild(newSVG);
88
89 // Draw directly to Canvas
90 let ctx = document.getElementById('canvas1').getContext('2d');
91 setCanvasSize(ctx, 200, 200);
92 ctx.strokeStyle = 'green';
93 ctx.fillStyle = 'white';
94 ctx.scale(8, 8);
95 ctx.beginPath();
96 firstPath.toCanvas(ctx);
97 ctx.stroke();
98
99 // create Path2D object and use it in a Canvas.
100 let path2D = firstPath.toPath2D();
101 ctx = document.getElementById('canvas2').getContext('2d');
102 setCanvasSize(ctx, 200, 200);
103 ctx.canvas.width = 200
104 ctx.scale(8, 8);
105 ctx.fillStyle = 'purple';
106 ctx.strokeStyle = 'orange';
107 ctx.fill(path2D);
108 ctx.stroke(path2D);
109
110 // clean up memory and call destructors in the c++ code (if any).
111 // See http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html?highlight=memory#memory-management
112 firstPath.delete();
113 secondPath.delete();
114 }
115
116 function Path2DExample(PathKit) {
117 let objs = [new Path2D(), PathKit.NewPath(), new Path2D(), PathKit.NewPath()];
118 let canvases = [
119 document.getElementById('canvas3').getContext('2d'),
120 document.getElementById('canvas4').getContext('2d')
121 ];
122
123 for (i = 0; i <= 1; i++) {
124 let path = objs[i];
125
126 path.moveTo(20, 5);
127 path.lineTo(30, 20);
128 path.lineTo(40, 10);
129 path.lineTo(50, 20);
130 path.lineTo(60, 0);
131 path.lineTo(20, 5);
132
133 path.moveTo(20, 80);
134 path.bezierCurveTo(90, 10, 160, 150, 190, 10);
135
136 path.moveTo(36, 148);
137 path.quadraticCurveTo(66, 188, 120, 136);
138 path.lineTo(36, 148);
139
140 path.rect(5, 170, 20, 20);
141
142 path.moveTo(150, 180);
143 path.arcTo(150, 100, 50, 200, 20);
144 path.lineTo(160, 160);
145
146 path.moveTo(20, 120);
147 path.arc(20, 120, 18, 0, 1.75 * Math.PI);
148 path.lineTo(20, 120);
149
150 let secondPath = objs[i+2];
151 secondPath.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI, false);
152
153 path.addPath(secondPath);
154
155 let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
156 m.a = 1; m.b = 0;
157 m.c = 0; m.d = 1;
158 m.e = 0; m.f = 20.5;
159
160 path.addPath(secondPath, m);
161 // With PathKit, one can also just provide the 6 params as floats, to avoid
162 // the overhead of making an SVGMatrix
163 // path.addPath(secondPath, 1, 0, 0, 1, 0, 20.5);
164
165 canvasCtx = canvases[i];
166 canvasCtx.fillStyle = 'blue';
167 setCanvasSize(canvasCtx, 300, 300);
168 canvasCtx.scale(1.5, 1.5);
169 if (path.toPath2D) {
170 canvasCtx.stroke(path.toPath2D());
171 } else {
172 canvasCtx.stroke(path);
173 }
174 }
175
176
177 objs[1].delete();
178 }
179
180 // see https://fiddle.skia.org/c/@discrete_path
181 function drawStar(path) {
182 let R = 115.2, C = 128.0;
183 path.moveTo(C + R + 22, C);
184 for (let i = 1; i < 8; i++) {
185 let a = 2.6927937 * i;
186 path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a));
187 }
188 path.closePath();
189 return path;
190 }
191
192 function PathEffectsExample(PathKit) {
193 let effects = [
194 // no-op
195 (path) => path,
196 // dash
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]197 (path, counter) => path.dash(10, 3, counter/5),
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]198 // trim (takes optional 3rd param for returning the trimmed part
199 // or the complement)
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]200 (path, counter) => path.trim((counter/100) % 1, 0.8, false),
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]201 // simplify
202 (path) => path.simplify(),
203 // stroke
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]204 (path, counter) => path.stroke({
205 width: 10 * (Math.sin(counter/30) + 1),
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]206 join: PathKit.StrokeJoin.BEVEL,
207 cap: PathKit.StrokeCap.BUTT,
208 miter_limit: 1,
209 }),
210 // "offset effect", that is, making a border around the shape.
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]211 (path, counter) => {
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]212 let orig = path.copy();
213 path.stroke({
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]214 width: 10 + (counter / 4) % 50,
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]215 join: PathKit.StrokeJoin.ROUND,
216 cap: PathKit.StrokeCap.SQUARE,
217 })
218 .op(orig, PathKit.PathOp.DIFFERENCE);
219 orig.delete();
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]220 },
221 (path, counter) => {
222 let simplified = path.simplify().copy();
223 path.stroke({
224 width: 2 + (counter / 2) % 100,
225 join: PathKit.StrokeJoin.BEVEL,
226 cap: PathKit.StrokeCap.BUTT,
227 })
228 .op(simplified, PathKit.PathOp.REVERSE_DIFFERENCE);
229 simplified.delete();
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]230 }
231 ];
232
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]233 let names = ["(plain)", "Dash", "Trim", "Simplify", "Stroke", "Grow", "Shrink"];
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]234
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]235 let counter = 0;
236 function frame() {
237 counter++;
238 for (let i = 0; i < effects.length; i++) {
239 let path = PathKit.NewPath();
240 drawStar(path);
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]241
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]242 // The transforms apply directly to the path.
243 effects[i](path, counter);
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]244
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]245 let ctx = document.getElementById(`canvas${i+5}`).getContext('2d');
246 setCanvasSize(ctx, 300, 300);
247 ctx.strokeStyle = '#3c597a';
248 ctx.fillStyle = '#3c597a';
249 if (i >=4 ) {
250 ctx.fill(path.toPath2D(), path.getFillTypeString());
251 } else {
252 ctx.stroke(path.toPath2D());
253 }
254
255 ctx.font = '42px monospace';
256
257 let x = 150-ctx.measureText(names[i]).width/2;
258 ctx.strokeText(names[i], x, 290);
259
260 path.delete();
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]261 }
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]262 window.requestAnimationFrame(frame);
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]263 }
Kevin Lubickd9936482018-08-24 10:44:16 -0400[diff] [blame]264 window.requestAnimationFrame(frame);
Kevin Lubickf14a3c02018-08-22 09:35:32 -0400[diff] [blame]265 }
266
267 function MatrixTransformExample(PathKit) {
268 // Creates an animated star that twists and moves.
269 let ctx = document.getElementById('canvasTransform').getContext('2d');
270 setCanvasSize(ctx, 300, 300);
271 ctx.strokeStyle = '#3c597a';
272
273 let path = drawStar(PathKit.NewPath());
274 // TODO(kjlubick): Perhaps expose some matrix helper functions to allow
275 // clients to build their own matrices like this?
276 // These matrices represent a 2 degree rotation and a 1% scale factor.
277 let scaleUp = [1.0094, -0.0352, 3.1041,
278 0.0352, 1.0094, -6.4885,
279 0 , 0 , 1];
280
281 let scaleDown = [ 0.9895, 0.0346, -2.8473,
282 -0.0346, 0.9895, 6.5276,
283 0 , 0 , 1];
284
285 let i = 0;
286 function frame(){
287 i++;
288 if (Math.round(i/100) % 2) {
289 path.transform(scaleDown);
290 } else {
291 path.transform(scaleUp);
292 }
293
294 ctx.clearRect(0, 0, 300, 300);
295 ctx.stroke(path.toPath2D());
296
297 ctx.font = '42px monospace';
298 let x = 150-ctx.measureText('Transform').width/2;
299 ctx.strokeText('Transform', x, 290);
300
301 window.requestAnimationFrame(frame);
302 }
303 window.requestAnimationFrame(frame);
304 }
305
306 function FilledSVGExample(PathKit) {
307 let innerRect = PathKit.NewPath();
308 innerRect.rect(80, 100, 40, 40);
309
310 let outerRect = PathKit.NewPath();
311 outerRect.rect(50, 10, 100, 100)
312 .op(innerRect, PathKit.PathOp.XOR);
313
314 let str = outerRect.toSVGString();
315
316 let diffSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
317 diffSVG.setAttribute('stroke', 'red');
318 diffSVG.setAttribute('fill', 'black');
319 // force fill-rule to nonzero to demonstrate difference
320 diffSVG.setAttribute('fill-rule', 'nonzero');
321 diffSVG.setAttribute('d', str);
322 document.getElementById('svg2').appendChild(diffSVG);
323
324 let unionSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
325 unionSVG.setAttribute('stroke', 'red');
326 unionSVG.setAttribute('fill', 'black');
327 // ask what the path thinks fill-rule should be ('evenodd')
328 // SVG and Canvas both use the same keys ('nonzero' and 'evenodd') and both
329 // default to 'nonzero', so one call supports both.
330 unionSVG.setAttribute('fill-rule', outerRect.getFillTypeString());
331 unionSVG.setAttribute('d', str);
332 document.getElementById('svg3').appendChild(unionSVG);
333
334 outerRect.delete();
335 innerRect.delete();
336 }
337
338</script>