skia2/modules/pathkit/chaining.js
Kevin Lubick 1a05fceb38 [canvaskit] Expand canvas2d API
Made addPath take one more arg to allow for append/expand
(which makes emulating the HTML canvas easier).

Add Gold test for various lineTo/pathTo, etc.

Make CanvasKit.Color() choose a better value for alpha
when omitted (was 0, should be 1).

Add some parsing logic to deal with colors/font sizes.
Fonts are going to be rather complex it seems.

Moves some arc-related logic to the JS side, (although
this should preserve the behavior of CanvasKit.arc() to
behave like the Canvas implementation)

Make Examples and tests to a side-by-side comparison to
HTML canvas where applicable.

Add a Changelog for PathKit.  There was a bug (I thought), but
turns out I was wrong.  The Changelog will be for future
bug fixes.

Bug: skia:
Change-Id: I1bd603fdb518232604b098e24543e3453015b504
Reviewed-on: https://skia-review.googlesource.com/c/170446
Reviewed-by: Kevin Lubick <kjlubick@google.com>
2018-11-20 18:39:43 +00:00

188 lines
6.1 KiB
JavaScript

// Adds JS functions to allow for chaining w/o leaking by re-using 'this' path.
(function(PathKit){
// PathKit.onRuntimeInitialized is called after the WASM library has loaded.
// when onRuntimeInitialized is called, PathKit.SkPath is defined with many
// functions on it (see pathkit_wasm_bindings.cpp@EMSCRIPTEN_BINDINGS)
PathKit.onRuntimeInitialized = function() {
// All calls to 'this' need to go in externs.js so closure doesn't minify them away.
PathKit.SkPath.prototype.addPath = function() {
// Takes 1, 2, 7 or 10 args, where the first arg is always the path.
// The options for the remaining args are:
// - an SVGMatrix
// - the 6 parameters of an SVG Matrix
// - the 9 parameters of a full Matrix
var path = arguments[0];
if (arguments.length === 1) {
// Add path, unchanged. Use identity matrix
this._addPath(path, 1, 0, 0,
0, 1, 0,
0, 0, 1);
} else if (arguments.length === 2) {
// Takes SVGMatrix, which has its args in a counter-intuitive order
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Transform_functions
/**
* @type {SVGMatrix}
*/
var sm = arguments[1];
this._addPath(path, sm.a, sm.c, sm.e,
sm.b, sm.d, sm.f,
0, 0, 1);
} else if (arguments.length === 7) {
// User provided the 6 params for an SVGMatrix directly.
var a = arguments;
this._addPath(path, a[1], a[3], a[5],
a[2], a[4], a[6],
0 , 0 , 1 );
} 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(path, 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, 7, or 10 args. Got ' + arguments.length);
return null;
}
return this;
};
// ccw (counter clock wise) is optional and defaults to false.
PathKit.SkPath.prototype.arc = function(x, y, radius, startAngle, endAngle, ccw) {
this._arc(x, y, radius, startAngle, endAngle, !!ccw);
return this;
};
PathKit.SkPath.prototype.arcTo = function(x1, y1, x2, y2, radius) {
this._arcTo(x1, y1, x2, y2, radius);
return this;
};
PathKit.SkPath.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
this._cubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
return this;
};
PathKit.SkPath.prototype.close = function() {
this._close();
return this;
};
// Reminder, we have some duplicate definitions because we want to be a
// superset of Path2D and also work like the original SkPath C++ object.
PathKit.SkPath.prototype.closePath = function() {
this._close();
return this;
};
PathKit.SkPath.prototype.conicTo = function(x1, y1, x2, y2, w) {
this._conicTo(x1, y1, x2, y2, w);
return this;
};
PathKit.SkPath.prototype.cubicTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
this._cubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
return this;
};
PathKit.SkPath.prototype.dash = function(on, off, phase) {
if (this._dash(on, off, phase)) {
return this;
}
return null;
};
// ccw (counter clock wise) is optional and defaults to false.
PathKit.SkPath.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, ccw) {
this._ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, !!ccw);
return this;
};
PathKit.SkPath.prototype.lineTo = function(x, y) {
this._lineTo(x, y);
return this;
};
PathKit.SkPath.prototype.moveTo = function(x, y) {
this._moveTo(x, y);
return this;
};
PathKit.SkPath.prototype.op = function(otherPath, op) {
if (this._op(otherPath, op)) {
return this;
}
return null;
};
PathKit.SkPath.prototype.quadraticCurveTo = function(cpx, cpy, x, y) {
this._quadTo(cpx, cpy, x, y);
return this;
};
PathKit.SkPath.prototype.quadTo = function(cpx, cpy, x, y) {
this._quadTo(cpx, cpy, x, y);
return this;
};
PathKit.SkPath.prototype.rect = function(x, y, w, h) {
this._rect(x, y, w, h);
return this;
};
PathKit.SkPath.prototype.simplify = function() {
if (this._simplify()) {
return this;
}
return null;
};
PathKit.SkPath.prototype.stroke = function(opts) {
// Fill out any missing values with the default values.
/**
* See externs.js for this definition
* @type {StrokeOpts}
*/
opts = opts || {};
opts.width = opts.width || 1;
opts.miter_limit = opts.miter_limit || 4;
opts.cap = opts.cap || PathKit.StrokeCap.BUTT;
opts.join = opts.join || PathKit.StrokeJoin.MITER;
if (this._stroke(opts)) {
return this;
}
return null;
};
PathKit.SkPath.prototype.transform = function() {
// Takes 1 or 9 args
if (arguments.length === 1) {
// argument 1 should be a 9 element array (which is transformed on the C++ side
// to a SimpleMatrix)
this._transform(arguments[0]);
} 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;
};
// isComplement is optional, defaults to false
PathKit.SkPath.prototype.trim = function(startT, stopT, isComplement) {
if (this._trim(startT, stopT, !!isComplement)) {
return this;
}
return null;
};
};
}(Module)); // When this file is loaded in, the high level object is "Module";