[PathKit] Rework API to avoid extra copies unless explicitly called for.
Breaking Changes:
- All method calls that mutate a path now return the same JS path
object to allow chaining (moveTo, lineTo, trim, op, simplify, etc).
Pre-existing code likely will need to have some delete() methods
removed because the path will be deleted multiple times. See
chaining.js for this code (basically, we wrote our own binding code
since the default code wasn't quite flexible enough)
- GetCanvasFillType -> GetFillTypeString (Was in https://skia-review.googlesource.com/c/skia/+/147209)
Since Canvas and SVG use the same strings, it seemed logical to make
them share.
- stroke() now takes a single object instead of 3 params. This object
currently can have up to 4 params, cap, join, width, miter_limit.
This object can be expanded on in future versions as more configuration
options are added.
As per custom with v0 software, we bump the minor version to 0.2.X
to indicate breaking changes in a pre-release software package.
Other changes of note:
- Simple tests added for effects (see effects.specs.js) A follow up
CL will handle the Gold (correctness tests)
- Simple tests added for equals and copy constructors (from https://skia-review.googlesource.com/c/skia/+/147209)
- Added transform() to allow for arbitrary matrix transforms
- Added SimpleMatrix as a value_array, which means users can
provide a 9 element array which will be converted to SimpleMatrix
and then SkMatrix on the C++ side.
- Renamed helpers_externs.js to externs.js and expanded it greatly.
This was necessitated by the code written in chaining.js
- Fixed a few bugs in previous tests (svg gold test race condition,
uncaught exception in svg reporting)
See also https://skia-review.googlesource.com/c/skia/+/147209 which
allows .moveTo .lineTo, etc to chain on the C++ SkPath.
Bug: skia:8216
Change-Id: I7450cd8b7b5377cf15c962b02d161677b62d7e15
Reviewed-on: https://skia-review.googlesource.com/147115
Reviewed-by: Mike Reed <reed@google.com>
diff --git a/experimental/pathkit/npm-wasm/example.html b/experimental/pathkit/npm-wasm/example.html
index ec097b9..60d6981 100644
--- a/experimental/pathkit/npm-wasm/example.html
+++ b/experimental/pathkit/npm-wasm/example.html
@@ -22,7 +22,7 @@
</style>
<h2> Can output to an SVG Path, a Canvas, or a Path2D object </h2>
-<svg id=svg xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
+<svg id=svg1 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
<canvas id=canvas1></canvas>
<canvas id=canvas2></canvas>
@@ -37,6 +37,11 @@
<canvas class=big id=canvas8></canvas>
<canvas class=big id=canvas9></canvas>
<canvas class=big id=canvas10></canvas>
+<canvas class=big id=canvasTransform></canvas>
+
+<h2> Supports fill-rules of nonzero and evenodd </h2>
+<svg id=svg2 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
+<svg id=svg3 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
<script type="text/javascript" src="/node_modules/experimental-pathkit-wasm/bin/pathkit.js"></script>
@@ -45,9 +50,12 @@
PathKitInit({
locateFile: (file) => '/node_modules/experimental-pathkit-wasm/bin/'+file,
}).then((PathKit) => {
+ window.PathKit = PathKit;
OutputsExample(PathKit);
Path2DExample(PathKit);
PathEffectsExample(PathKit);
+ MatrixTransformExample(PathKit);
+ FilledSVGExample(PathKit);
});
function setCanvasSize(ctx, width, height) {
@@ -59,21 +67,23 @@
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');
let secondPath = PathKit.NewPath();
- // Acts somewhat like the Canvas API
- secondPath.moveTo(1, 1);
- secondPath.lineTo(20, 1);
- secondPath.lineTo(10, 30);
- secondPath.closePath();
+ // Acts somewhat like the Canvas API, except can be chained
+ secondPath.moveTo(1, 1)
+ .lineTo(20, 1)
+ .lineTo(10, 30)
+ .closePath();
- let combinedPath = firstPath.op(secondPath, PathKit.PathOp.INTERSECT);
- let simpleStr = combinedPath.toSVGString();
+ // Join the two paths together (mutating firstPath in the process)
+ firstPath.op(secondPath, PathKit.PathOp.INTERSECT);
+
+ let simpleStr = firstPath.toSVGString();
let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
newSVG.setAttribute('stroke', 'rgb(0,0,200)');
newSVG.setAttribute('fill', 'white');
newSVG.setAttribute('transform', 'scale(8,8)');
newSVG.setAttribute('d', simpleStr);
- document.getElementById('svg').appendChild(newSVG);
+ document.getElementById('svg1').appendChild(newSVG);
// Draw directly to Canvas
let ctx = document.getElementById('canvas1').getContext('2d');
@@ -82,11 +92,11 @@
ctx.fillStyle = 'white';
ctx.scale(8, 8);
ctx.beginPath();
- combinedPath.toCanvas(ctx);
+ firstPath.toCanvas(ctx);
ctx.stroke();
// create Path2D object and use it in a Canvas.
- let path2D = combinedPath.toPath2D();
+ let path2D = firstPath.toPath2D();
ctx = document.getElementById('canvas2').getContext('2d');
setCanvasSize(ctx, 200, 200);
ctx.canvas.width = 200
@@ -100,67 +110,66 @@
// See http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html?highlight=memory#memory-management
firstPath.delete();
secondPath.delete();
- combinedPath.delete();
}
function Path2DExample(PathKit) {
let objs = [new Path2D(), PathKit.NewPath(), new Path2D(), PathKit.NewPath()];
let canvases = [
- document.getElementById('canvas3').getContext('2d'),
- document.getElementById('canvas4').getContext('2d')
+ document.getElementById('canvas3').getContext('2d'),
+ document.getElementById('canvas4').getContext('2d')
];
for (i = 0; i <= 1; i++) {
- let path = objs[i];
+ let path = objs[i];
- path.moveTo(20, 5);
- path.lineTo(30, 20);
- path.lineTo(40, 10);
- path.lineTo(50, 20);
- path.lineTo(60, 0);
- path.lineTo(20, 5);
+ path.moveTo(20, 5);
+ path.lineTo(30, 20);
+ path.lineTo(40, 10);
+ path.lineTo(50, 20);
+ path.lineTo(60, 0);
+ path.lineTo(20, 5);
- path.moveTo(20, 80);
- path.bezierCurveTo(90, 10, 160, 150, 190, 10);
+ path.moveTo(20, 80);
+ path.bezierCurveTo(90, 10, 160, 150, 190, 10);
- path.moveTo(36, 148);
- path.quadraticCurveTo(66, 188, 120, 136);
- path.lineTo(36, 148);
+ path.moveTo(36, 148);
+ path.quadraticCurveTo(66, 188, 120, 136);
+ path.lineTo(36, 148);
- path.rect(5, 170, 20, 20);
+ path.rect(5, 170, 20, 20);
- path.moveTo(150, 180);
- path.arcTo(150, 100, 50, 200, 20);
- path.lineTo(160, 160);
+ path.moveTo(150, 180);
+ path.arcTo(150, 100, 50, 200, 20);
+ path.lineTo(160, 160);
- path.moveTo(20, 120);
- path.arc(20, 120, 18, 0, 1.75 * Math.PI);
- path.lineTo(20, 120);
+ path.moveTo(20, 120);
+ path.arc(20, 120, 18, 0, 1.75 * Math.PI);
+ path.lineTo(20, 120);
- let secondPath = objs[i+2];
- secondPath.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI, false);
+ let secondPath = objs[i+2];
+ secondPath.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI, false);
- path.addPath(secondPath);
+ path.addPath(secondPath);
- let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
- m.a = 1; m.b = 0;
- m.c = 0; m.d = 1;
- m.e = 0; m.f = 20.5;
+ let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+ m.a = 1; m.b = 0;
+ m.c = 0; m.d = 1;
+ m.e = 0; m.f = 20.5;
- path.addPath(secondPath, m);
- // With PathKit, one can also just provide the 6 params as floats, to avoid
- // the overhead of making an SVGMatrix
- // path.addPath(secondPath, 1, 0, 0, 1, 0, 20.5);
+ path.addPath(secondPath, m);
+ // With PathKit, one can also just provide the 6 params as floats, to avoid
+ // the overhead of making an SVGMatrix
+ // path.addPath(secondPath, 1, 0, 0, 1, 0, 20.5);
- canvasCtx = canvases[i];
- canvasCtx.fillStyle = 'blue';
- setCanvasSize(canvasCtx, 300, 300);
- canvasCtx.scale(1.5, 1.5);
- if (path.toPath2D) {
- canvasCtx.stroke(path.toPath2D());
- } else {
- canvasCtx.stroke(path);
- }
+ canvasCtx = canvases[i];
+ canvasCtx.fillStyle = 'blue';
+ setCanvasSize(canvasCtx, 300, 300);
+ canvasCtx.scale(1.5, 1.5);
+ if (path.toPath2D) {
+ canvasCtx.stroke(path.toPath2D());
+ } else {
+ canvasCtx.stroke(path);
+ }
}
@@ -172,68 +181,141 @@
let R = 115.2, C = 128.0;
path.moveTo(C + R + 22, C);
for (let i = 1; i < 8; i++) {
- let a = 2.6927937 * i;
- path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a));
+ let a = 2.6927937 * i;
+ path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a));
}
path.closePath();
return path;
}
function PathEffectsExample(PathKit) {
- let transforms = [
- // no-op
- (path) => path,
- // dash
- (path) => path.dash(10, 3, 0),
- // trim (takes optional 3rd param for returning the trimmed part
- // or the complement)
- (path) => path.trim(0.25, 0.8, false),
- // simplify
- (path) => path.simplify(),
- // stroke
- (path) => path.stroke(15, PathKit.StrokeJoin.BEVEL, PathKit.StrokeCap.BUTT),
- // "offset effect", that is, making a border around the shape.
- (path) => {
- let temp = path.stroke(10, PathKit.StrokeJoin.ROUND, PathKit.StrokeCap.SQUARE);
- let ret = temp.op(path, PathKit.PathOp.DIFFERENCE);
- temp.delete();
- return ret;
- }
+ let effects = [
+ // no-op
+ (path) => path,
+ // dash
+ (path) => path.dash(10, 3, 0),
+ // trim (takes optional 3rd param for returning the trimmed part
+ // or the complement)
+ (path) => path.trim(0.25, 0.8, false),
+ // simplify
+ (path) => path.simplify(),
+ // stroke
+ (path) => path.stroke({
+ width: 15,
+ join: PathKit.StrokeJoin.BEVEL,
+ cap: PathKit.StrokeCap.BUTT,
+ miter_limit: 1,
+ }),
+ // "offset effect", that is, making a border around the shape.
+ (path) => {
+ let orig = path.copy();
+ path.stroke({
+ width: 10,
+ join: PathKit.StrokeJoin.ROUND,
+ cap: PathKit.StrokeCap.SQUARE,
+ })
+ .op(orig, PathKit.PathOp.DIFFERENCE);
+ orig.delete();
+ }
];
let names = ["(plain)", "Dash", "Trim", "Simplify", "Stroke", "Offset"];
- for (let i = 0; i < transforms.length; i++) {
- let path = PathKit.NewPath();
- drawStar(path);
+ for (let i = 0; i < effects.length; i++) {
+ let path = PathKit.NewPath();
+ drawStar(path);
- let transformedPath = transforms[i](path);
+ // The transforms apply directly to the path.
+ effects[i](path);
- let ctx = document.getElementById(`canvas${i+5}`).getContext('2d');
- setCanvasSize(ctx, 300, 300);
- ctx.strokeStyle = '#3c597a';
- ctx.fillStyle = '#3c597a';
- if (i === 4 || i === 5) {
- ctx.fill(transformedPath.toPath2D(), transformedPath.getCanvasFillType());
- if (i === 5) {
- ctx.fillStyle = "#51d9bb";
- ctx.fill(path.toPath2D());
- }
- } else {
- ctx.stroke(transformedPath.toPath2D());
- }
+ let ctx = document.getElementById(`canvas${i+5}`).getContext('2d');
+ setCanvasSize(ctx, 300, 300);
+ ctx.strokeStyle = '#3c597a';
+ ctx.fillStyle = '#3c597a';
+ if (i === 4 || i === 5) {
+ ctx.fill(path.toPath2D(), path.getFillTypeString());
+ } else {
+ ctx.stroke(path.toPath2D());
+ }
- ctx.font = '42px monospace';
+ ctx.font = '42px monospace';
- let x = 150-ctx.measureText(names[i]).width/2;
- ctx.strokeText(names[i], x, 290);
+ let x = 150-ctx.measureText(names[i]).width/2;
+ ctx.strokeText(names[i], x, 290);
- if (i) {
- transformedPath.delete();
- }
- path.delete();
+ path.delete();
}
+ }
+ function MatrixTransformExample(PathKit) {
+ // Creates an animated star that twists and moves.
+ let ctx = document.getElementById('canvasTransform').getContext('2d');
+ setCanvasSize(ctx, 300, 300);
+ ctx.strokeStyle = '#3c597a';
+
+ let path = drawStar(PathKit.NewPath());
+ // TODO(kjlubick): Perhaps expose some matrix helper functions to allow
+ // clients to build their own matrices like this?
+ // These matrices represent a 2 degree rotation and a 1% scale factor.
+ let scaleUp = [1.0094, -0.0352, 3.1041,
+ 0.0352, 1.0094, -6.4885,
+ 0 , 0 , 1];
+
+ let scaleDown = [ 0.9895, 0.0346, -2.8473,
+ -0.0346, 0.9895, 6.5276,
+ 0 , 0 , 1];
+
+ let i = 0;
+ function frame(){
+ i++;
+ if (Math.round(i/100) % 2) {
+ path.transform(scaleDown);
+ } else {
+ path.transform(scaleUp);
+ }
+
+ ctx.clearRect(0, 0, 300, 300);
+ ctx.stroke(path.toPath2D());
+
+ ctx.font = '42px monospace';
+ let x = 150-ctx.measureText('Transform').width/2;
+ ctx.strokeText('Transform', x, 290);
+
+ window.requestAnimationFrame(frame);
+ }
+ window.requestAnimationFrame(frame);
+ }
+
+ function FilledSVGExample(PathKit) {
+ let innerRect = PathKit.NewPath();
+ innerRect.rect(80, 100, 40, 40);
+
+ let outerRect = PathKit.NewPath();
+ outerRect.rect(50, 10, 100, 100)
+ .op(innerRect, PathKit.PathOp.XOR);
+
+ let str = outerRect.toSVGString();
+
+ let diffSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ diffSVG.setAttribute('stroke', 'red');
+ diffSVG.setAttribute('fill', 'black');
+ // force fill-rule to nonzero to demonstrate difference
+ diffSVG.setAttribute('fill-rule', 'nonzero');
+ diffSVG.setAttribute('d', str);
+ document.getElementById('svg2').appendChild(diffSVG);
+
+ let unionSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ unionSVG.setAttribute('stroke', 'red');
+ unionSVG.setAttribute('fill', 'black');
+ // ask what the path thinks fill-rule should be ('evenodd')
+ // SVG and Canvas both use the same keys ('nonzero' and 'evenodd') and both
+ // default to 'nonzero', so one call supports both.
+ unionSVG.setAttribute('fill-rule', outerRect.getFillTypeString());
+ unionSVG.setAttribute('d', str);
+ document.getElementById('svg3').appendChild(unionSVG);
+
+ outerRect.delete();
+ innerRect.delete();
}
</script>