skia2/experimental/canvaskit/interface.js
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

148 lines
4.9 KiB
JavaScript

// Adds JS functions to augment the CanvasKit interface.
// For example, if there is a wrapper around the C++ call or logic to allow
// chaining, it should go here.
(function(CanvasKit){
// CanvasKit.onRuntimeInitialized is called after the WASM library has loaded.
// Anything that modifies an exposed class (e.g. SkPath) should be set
// after onRuntimeInitialized, otherwise, it can happen outside of that scope.
CanvasKit.onRuntimeInitialized = function() {
// All calls to 'this' need to go in externs.js so closure doesn't minify them away.
CanvasKit.SkPath.prototype.addPath = function() {
// Takes 1, 2, or 10 args, where the first arg is always the path.
// The options for the remaining args are:
// - an array of 9 parameters
// - the 9 parameters of a full Matrix
if (arguments.length === 1) {
// Add path, unchanged. Use identify matrix
this._addPath(arguments[0], 1, 0, 0,
0, 1, 0,
0, 0, 1);
} else if (arguments.length === 2) {
// User provided the 9 params of a full matrix as an array.
var sm = arguments[1];
this._addPath(arguments[0], a[1], a[2], a[3],
a[4], a[5], a[6],
a[7], a[8], a[9]);
} else if (arguments.length === 10) {
// User provided the 9 params of a (full) matrix directly.
// These are in the same order as what Skia expects.
var a = arguments;
this._addPath(arguments[0], a[1], a[2], a[3],
a[4], a[5], a[6],
a[7], a[8], a[9]);
} else {
console.err('addPath expected to take 1, 2, or 10 args. Got ' + arguments.length);
return null;
}
return this;
};
CanvasKit.SkPath.prototype.arcTo = function(x1, y1, x2, y2, radius) {
this._arcTo(x1, y1, x2, y2, radius);
return this;
};
CanvasKit.SkPath.prototype.close = function() {
this._close();
return this;
};
CanvasKit.SkPath.prototype.conicTo = function(x1, y1, x2, y2, w) {
this._conicTo(x1, y1, x2, y2, w);
return this;
};
CanvasKit.SkPath.prototype.cubicTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
this._cubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
return this;
};
CanvasKit.SkPath.prototype.lineTo = function(x, y) {
this._lineTo(x, y);
return this;
};
CanvasKit.SkPath.prototype.moveTo = function(x, y) {
this._moveTo(x, y);
return this;
};
CanvasKit.SkPath.prototype.op = function(otherPath, op) {
if (this._op(otherPath, op)) {
return this;
}
return null;
};
CanvasKit.SkPath.prototype.quadTo = function(cpx, cpy, x, y) {
this._quadTo(cpx, cpy, x, y);
return this;
};
CanvasKit.SkPath.prototype.simplify = function() {
if (this._simplify()) {
return this;
}
return null;
};
CanvasKit.SkPath.prototype.transform = function() {
// Takes 1 or 9 args
if (arguments.length === 1) {
// argument 1 should be a 9 element array.
var a = arguments[0];
this._transform(a[0], a[1], a[2],
a[3], a[4], a[5],
a[6], a[7], a[8]);
} else if (arguments.length === 9) {
// these arguments are the 9 members of the matrix
var a = arguments;
this._transform(a[0], a[1], a[2],
a[3], a[4], a[5],
a[6], a[7], a[8]);
} else {
console.err('transform expected to take 1 or 9 arguments. Got ' + arguments.length);
return null;
}
return this;
};
}
CanvasKit.getWebGLSurface = function(htmlID) {
var canvas = document.getElementById(htmlID);
if (!canvas) {
throw 'Canvas with id ' + htmlID + ' was not found';
}
// Maybe better to use clientWidth/height. See:
// https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
return this._getWebGLSurface(htmlID, canvas.width, canvas.height);
}
// Likely only used for tests.
CanvasKit.LTRBRect = function(l, t, r, b) {
return {
fLeft: l,
fTop: t,
fRight: r,
fBottom: b,
};
}
CanvasKit.MakeSkDashPathEffect = function(intervals, phase) {
if (!phase) {
phase = 0;
}
if (!intervals.length || intervals.length % 2 === 1) {
throw 'Intervals array must have even length';
}
if (!(intervals instanceof Float32Array)) {
intervals = Float32Array.from(intervals);
}
var BYTES_PER_ELEMENT = 4; // Float32Array always has 4 bytes per element
var ptr = CanvasKit._malloc(intervals.length * BYTES_PER_ELEMENT);
CanvasKit.HEAPF32.set(intervals, ptr / BYTES_PER_ELEMENT);
return CanvasKit._MakeSkDashPathEffect(ptr, intervals.length, phase);
}
}(Module)); // When this file is loaded in, the high level object is "Module";