| Kevin Lubick | e1b36fe | 2018-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 | |
| 17 | </style> |
| 18 | |
| 19 | <svg id=svg xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg> |
| 20 | |
| 21 | <canvas id="canvas1"></canvas> |
| 22 | |
| 23 | <canvas id="canvas2"></canvas> |
| 24 | |
| 25 | <script type="text/javascript" src="/node_modules/experimental-pathkit-wasm/bin/pathkit.js"></script> |
| 26 | |
| 27 | <script type="text/javascript" charset="utf-8"> |
| 28 | |
| 29 | PathKitInit({ |
| 30 | locateFile: (file) => '/node_modules/experimental-pathkit-wasm/bin/'+file, |
| 31 | }).then((PathKit) => { |
| 32 | |
| 33 | 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'); |
| 34 | |
| 35 | let secondPath = PathKit.NewPath(); |
| 36 | // Acts somewhat like the Canvas API |
| 37 | secondPath.moveTo(1, 1); |
| 38 | secondPath.lineTo(20, 1); |
| 39 | secondPath.lineTo(10, 30); |
| 40 | secondPath.close(); |
| 41 | |
| 42 | let combinedPath = PathKit.ApplyPathOp(firstPath, secondPath, PathKit.PathOp.INTERSECT); |
| 43 | let simpleStr = PathKit.ToSVGString(combinedPath); |
| 44 | |
| 45 | let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
| 46 | newSVG.setAttribute('stroke', 'rgb(0,0,200)'); |
| 47 | newSVG.setAttribute('fill', 'white'); |
| 48 | newSVG.setAttribute('transform', 'scale(5,5)'); |
| 49 | newSVG.setAttribute('d', simpleStr); |
| 50 | document.getElementById('svg').appendChild(newSVG); |
| 51 | |
| 52 | // Draw directly to Canvas |
| 53 | let ctx = document.getElementById('canvas1').getContext('2d'); |
| 54 | ctx.strokeStyle = 'green'; |
| 55 | ctx.fillStyle = 'white'; |
| 56 | ctx.scale(8, 4); |
| 57 | ctx.beginPath(); |
| 58 | PathKit.ToCanvas(combinedPath, ctx); |
| 59 | ctx.stroke(); |
| 60 | |
| 61 | // create Path2D object and use it in a Canvas. |
| 62 | let path2D = PathKit.ToPath2D(combinedPath); |
| 63 | ctx = document.getElementById('canvas2').getContext('2d'); |
| 64 | ctx.scale(8, 4); |
| 65 | ctx.fillStyle = 'purple'; |
| 66 | ctx.strokeStyle = 'orange'; |
| 67 | ctx.fill(path2D); |
| 68 | ctx.stroke(path2D); |
| 69 | |
| 70 | // clean up WASM memory |
| 71 | // See http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html?highlight=memory#memory-management |
| 72 | firstPath.delete(); |
| 73 | secondPath.delete(); |
| 74 | combinedPath.delete(); |
| 75 | }); |
| 76 | |
| 77 | </script> |