[PathKit] Add various path effects
API Changes (nothing should be breaking):
- Exposes conic, although all output formats (SVG, Canvas) need conics
to be approximated with quads. Tests have been added to verify this
happens.
- Add .dash(), .trim(), .stroke() and examples for them.
- Expose Stroke enums (StrokeJoin, StrokeCap)
Adds tests for the cubic part and clean up a few spacing things.
There are some changes to the C++ code to simplify the build -
otherwise, I need to appease the linker and add add in a bunch
of files that may or may not get optimized out. Best make them
not even be compiled, just to make sure.
Bug: skia:8216
Change-Id: I1da3aaab1891f14a5b3dc01bb6523b4fd9a87b04
Reviewed-on: https://skia-review.googlesource.com/146650
Reviewed-by: Florin Malita <fmalita@chromium.org>
diff --git a/experimental/pathkit/tests/path2d.spec.js b/experimental/pathkit/tests/path2d.spec.js
index 6e1cf95..303bf87 100644
--- a/experimental/pathkit/tests/path2d.spec.js
+++ b/experimental/pathkit/tests/path2d.spec.js
@@ -10,12 +10,12 @@
// Note, don't try to print the PathKit object - it can cause Karma/Jasmine to lock up.
var PathKit = null;
- const LoadPathKit = new Promise(function(resolve, reject){
+ const LoadPathKit = new Promise(function(resolve, reject) {
if (PathKit) {
resolve();
} else {
PathKitInit({
- locateFile: (file) => '/base/npm-wasm/bin/test/'+file,
+ locateFile: (file) => '/pathkit/'+file,
}).then((_PathKit) => {
PathKit = _PathKit;
resolve();
@@ -23,7 +23,7 @@
}
});
- it('can do everything in the Path2D API w/o crashing', function(done){
+ it('can do everything in the Path2D API w/o crashing', function(done) {
LoadPathKit.then(() => {
// This is taken from example.html
let path = PathKit.NewPath();
@@ -79,4 +79,29 @@
});
});
-});
\ No newline at end of file
+ it('approximates arcs (conics) with quads', function(done) {
+ LoadPathKit.then(() => {
+ let path = PathKit.NewPath();
+ path.moveTo(20, 120);
+ path.arc(20, 120, 18, 0, 1.75 * Math.PI);
+ path.lineTo(20, 120);
+
+ let canvas = document.createElement('canvas');
+ container.appendChild(canvas);
+ let canvasCtx = canvas.getContext('2d');
+
+ spyOn(canvasCtx, 'quadraticCurveTo');
+
+ canvasCtx.beginPath();
+ path.toCanvas(canvasCtx);
+ canvasCtx.stroke();
+ // No need to check the whole path, as that's more what the
+ // gold correctness tests are for (can account for changes we make
+ // to the approximation algorithms).
+ expect(canvasCtx.quadraticCurveTo).toHaveBeenCalled();
+ path.delete();
+ done();
+ });
+ });
+
+});