Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / 641bf8745db12b4ab16a4fe1ce43aeb3a0ba1546 / . / experimental / pathkit / npm-wasm / example.html
blob: c1fa8272b4755c10ad7c1ad38f5a8023c88845cc [file] [log] [blame]
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]1<!DOCTYPE html>
2<title>PathKit (Skia + WASM)</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
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]17 canvas.big {
18 width: 300px;
19 height: 300px;
20 }
21
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]22</style>
23
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]24<h2> Can output to an SVG Path, a Canvas, or a Path2D object </h2>
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]25<svg id=svg xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]26<canvas id=canvas1></canvas>
27<canvas id=canvas2></canvas>
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]28
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]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>
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]32
33<script type="text/javascript" src="/node_modules/experimental-pathkit-wasm/bin/pathkit.js"></script>
34
35<script type="text/javascript" charset="utf-8">
36
37 PathKitInit({
38 locateFile: (file) => '/node_modules/experimental-pathkit-wasm/bin/'+file,
39 }).then((PathKit) => {
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]40 OutputsExample(PathKit);
41 Path2DExample(PathKit);
42 });
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]43
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]44 function setCanvasSize(ctx, width, height) {
45 ctx.canvas.width = width;
46 ctx.canvas.height = height;
47 }
48
49 function OutputsExample(PathKit) {
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]50 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');
51
52 let secondPath = PathKit.NewPath();
53 // Acts somewhat like the Canvas API
54 secondPath.moveTo(1, 1);
55 secondPath.lineTo(20, 1);
56 secondPath.lineTo(10, 30);
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]57 secondPath.closePath();
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]58
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]59 let combinedPath = firstPath.op(secondPath, PathKit.PathOp.INTERSECT);
60 let simpleStr = combinedPath.toSVGString();
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]61
62 let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
63 newSVG.setAttribute('stroke', 'rgb(0,0,200)');
64 newSVG.setAttribute('fill', 'white');
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]65 newSVG.setAttribute('transform', 'scale(8,8)');
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]66 newSVG.setAttribute('d', simpleStr);
67 document.getElementById('svg').appendChild(newSVG);
68
69 // Draw directly to Canvas
70 let ctx = document.getElementById('canvas1').getContext('2d');
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]71 setCanvasSize(ctx, 200, 200);
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]72 ctx.strokeStyle = 'green';
73 ctx.fillStyle = 'white';
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]74 ctx.scale(8, 8);
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]75 ctx.beginPath();
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]76 combinedPath.toCanvas(ctx);
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]77 ctx.stroke();
78
79 // create Path2D object and use it in a Canvas.
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]80 let path2D = combinedPath.toPath2D();
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]81 ctx = document.getElementById('canvas2').getContext('2d');
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]82 setCanvasSize(ctx, 200, 200);
83 ctx.canvas.width = 200
84 ctx.scale(8, 8);
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]85 ctx.fillStyle = 'purple';
86 ctx.strokeStyle = 'orange';
87 ctx.fill(path2D);
88 ctx.stroke(path2D);
89
90 // clean up WASM memory
91 // See http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html?highlight=memory#memory-management
92 firstPath.delete();
93 secondPath.delete();
94 combinedPath.delete();
Kevin Lubick641bf872018-08-06 14:49:39 -0400[diff] [blame^]95 }
96
97 function Path2DExample(PathKit) {
98 let objs = [new Path2D(), PathKit.NewPath(), new Path2D(), PathKit.NewPath()];
99 let canvases = [
100 document.getElementById('canvas3').getContext('2d'),
101 document.getElementById('canvas4').getContext('2d')
102 ];
103
104 for (i = 0; i <= 1; i++) {
105 let path = objs[i];
106
107 path.moveTo(20, 5);
108 path.lineTo(30, 20);
109 path.lineTo(40, 10);
110 path.lineTo(50, 20);
111 path.lineTo(60, 0);
112 path.lineTo(20, 5);
113
114 path.moveTo(20, 80);
115 path.bezierCurveTo(90, 10, 160, 150, 190, 10);
116
117 path.moveTo(36, 148);
118 path.quadraticCurveTo(66, 188, 120, 136);
119 path.lineTo(36, 148);
120
121 path.rect(5, 170, 20, 20);
122
123 path.moveTo(150, 180);
124 path.arcTo(150, 100, 50, 200, 20);
125 path.lineTo(160, 160);
126
127 path.moveTo(20, 120);
128 path.arc(20, 120, 18, 0, 1.75 * Math.PI);
129 path.lineTo(20, 120);
130
131 let secondPath = objs[i+2];
132 secondPath.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI, false);
133
134 path.addPath(secondPath);
135
136 let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
137 m.a = 1; m.b = 0;
138 m.c = 0; m.d = 1;
139 m.e = 0; m.f = 20.5;
140
141 path.addPath(secondPath, m);
142 // With PathKit, one can also just provide the 6 params as floats, to avoid
143 // the overhead of making an SVGMatrix
144 // path.addPath(secondPath, 1, 0, 0, 1, 0, 20.5);
145
146 canvasCtx = canvases[i];
147 canvasCtx.fillStyle = 'blue';
148 setCanvasSize(canvasCtx, 300, 300);
149 canvasCtx.scale(1.5, 1.5);
150 if (path.toPath2D) {
151 canvasCtx.stroke(path.toPath2D());
152 } else {
153 canvasCtx.stroke(path);
154 }
155 }
156
157
158 objs[1].delete();
159 }
Kevin Lubicke1b36fe2018-08-02 11:30:33 -0400[diff] [blame]160
161</script>