skia2/modules/pathkit/npm-wasm
Kevin Lubick 217056c048 [CanvasKit] Implement some basic Canvas/Surface things.
drawText is having issues in a release build.  Skottie sometimes
asserts in debug mode. This possibly has something to do with
memory alignment - like https://skia-review.googlesource.com/c/skia/+/155980
helped fix.

Patchset 9 shows off integrating Skia drawing to
an HTML canvas using Ganesh.

To see it locally, set up https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
and then set $EMSDK to be that directory.  Then run

   make clean
   make local-example

and navigate to http://localhost:8000/skia-wasm/example.html

Patchset 20 shows off Skottie animating directly to a Canvas.

Docs-Preview: https://skia.org/?cl=153882
Bug: skia:
Change-Id: I2ad2f4ffac00925ee901982ccbaeb7aa63b1ea23
Reviewed-on: https://skia-review.googlesource.com/153882
Reviewed-by: Mike Reed <reed@google.com>
Commit-Queue: Kevin Lubick <kjlubick@google.com>
2018-09-21 12:03:55 +00:00
..
CODE_OF_CONDUCT.md [PathKit] Move from experimental to modules 2018-08-31 14:18:16 +00:00
CONTRIBUTING.md [PathKit] Move from experimental to modules 2018-08-31 14:18:16 +00:00
example.html [CanvasKit] Implement some basic Canvas/Surface things. 2018-09-21 12:03:55 +00:00
LICENSE [PathKit] Move from experimental to modules 2018-08-31 14:18:16 +00:00
package.json [PathKit] Add cubicYFromX 2018-09-07 18:01:40 +00:00
README.md [PathKit] Remove experimental- from package names 2018-08-31 15:11:04 +00:00

A WASM version of Skia's PathOps toolkit.

To use the library, run npm install pathkit-wasm and then simply include it:

<script src="/node_modules/pathkit-wasm/bin/pathkit.js"></script>
PathKitInit({
    locateFile: (file) => '/node_modules/pathkit-wasm/bin/'+file,
}).then((PathKit) => {
    // Code goes here using PathKit
});

PathKit comes in two parts, a JS loader and the actual WASM code. The JS loader creates a global PathKitInit that can be called to load the WASM code. The locateFile function is used to tell the JS loader where to find the .wasm file. By default, it will look for /pathkit.wasm, so if this is not the case, use locateFile to configure this properly. The PathKit object returned through the .then() callback is fully loaded and ready to use.

See the API page and example.html for details on how to use the library.

Using PathKit and WebPack

WebPack's support for WASM is still somewhat experimental, but PathKit can be used with a few configuration changes.

In the JS code, use require():

const PathKitInit = require('pathkit-wasm/bin/pathkit.js')
PathKitInit().then((PathKit) => {
    // Code goes here using PathKit
})

Since WebPack does not expose the entire /node_modules/ directory, but instead packages only the needed pieces, we have to copy pathkit.wasm into the build directory. One such solution is to use CopyWebpackPlugin. For example, add the following plugin:

config.plugins.push(
    new CopyWebpackPlugin([
        { from: 'node_modules/pathkit-wasm/bin/pathkit.wasm' }
    ])
);

If webpack gives an error similar to:

ERROR in ./node_modules/pathkit-wasm/bin/pathkit.js
Module not found: Error: Can't resolve 'fs' in '...'

Then, add the following configuration change to the node section of the config:

config.node = {
    fs: 'empty'
};