2018-08-02 15:30:33 +00:00
|
|
|
<!DOCTYPE html>
|
2018-09-20 21:39:31 +00:00
|
|
|
<title>PathKit (Skia's Geometry + WASM)</title>
|
2018-08-02 15:30:33 +00:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
svg, canvas {
|
|
|
|
|
border: 1px dashed #AAA;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
canvas.big {
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-02 15:30:33 +00:00
|
|
|
</style>
|
|
|
|
|
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
<h2> Can output to an SVG Path, a Canvas, or a Path2D object </h2>
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
<svg id=svg1 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
<canvas id=canvas1></canvas>
|
|
|
|
|
<canvas id=canvas2></canvas>
|
2018-08-02 15:30:33 +00:00
|
|
|
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
<h2> Interact with NewPath() just like a Path2D Object </h2>
|
|
|
|
|
<canvas class=big id=canvas3></canvas>
|
|
|
|
|
<canvas class=big id=canvas4></canvas>
|
2018-08-02 15:30:33 +00:00
|
|
|
|
2018-08-10 19:53:16 +00:00
|
|
|
<h2> Has various Path Effects </h2>
|
|
|
|
|
<canvas class=big id=canvas5></canvas>
|
|
|
|
|
<canvas class=big id=canvas6></canvas>
|
|
|
|
|
<canvas class=big id=canvas7></canvas>
|
|
|
|
|
<canvas class=big id=canvas8></canvas>
|
|
|
|
|
<canvas class=big id=canvas9></canvas>
|
|
|
|
|
<canvas class=big id=canvas10></canvas>
|
2018-08-24 14:44:16 +00:00
|
|
|
<canvas class=big id=canvas11></canvas>
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
<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>
|
2018-08-10 19:53:16 +00:00
|
|
|
|
2018-09-07 18:00:41 +00:00
|
|
|
<h2> Solves Cubics for Y given X </h2>
|
|
|
|
|
<canvas class=big id=cubics></canvas>
|
|
|
|
|
|
2018-08-31 14:45:18 +00:00
|
|
|
<script type="text/javascript" src="/node_modules/pathkit-wasm/bin/pathkit.js"></script>
|
2018-08-02 15:30:33 +00:00
|
|
|
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
|
|
|
|
|
PathKitInit({
|
2018-08-31 14:45:18 +00:00
|
|
|
locateFile: (file) => '/node_modules/pathkit-wasm/bin/'+file,
|
2020-05-21 13:59:44 +00:00
|
|
|
}).then((PathKit) => {
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
window.PathKit = PathKit;
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
OutputsExample(PathKit);
|
|
|
|
|
Path2DExample(PathKit);
|
2018-08-10 19:53:16 +00:00
|
|
|
PathEffectsExample(PathKit);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
MatrixTransformExample(PathKit);
|
|
|
|
|
FilledSVGExample(PathKit);
|
2018-09-07 18:00:41 +00:00
|
|
|
CubicSolverExample(PathKit);
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function setCanvasSize(ctx, width, height) {
|
|
|
|
|
ctx.canvas.width = width;
|
|
|
|
|
ctx.canvas.height = height;
|
|
|
|
|
}
|
2018-08-02 15:30:33 +00:00
|
|
|
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
function OutputsExample(PathKit) {
|
2018-08-02 15:30:33 +00:00
|
|
|
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();
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
// Acts somewhat like the Canvas API, except can be chained
|
|
|
|
|
secondPath.moveTo(1, 1)
|
|
|
|
|
.lineTo(20, 1)
|
|
|
|
|
.lineTo(10, 30)
|
|
|
|
|
.closePath();
|
|
|
|
|
|
|
|
|
|
// Join the two paths together (mutating firstPath in the process)
|
|
|
|
|
firstPath.op(secondPath, PathKit.PathOp.INTERSECT);
|
2018-08-02 15:30:33 +00:00
|
|
|
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
let simpleStr = firstPath.toSVGString();
|
2018-08-02 15:30:33 +00:00
|
|
|
|
|
|
|
|
let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
|
|
|
newSVG.setAttribute('stroke', 'rgb(0,0,200)');
|
|
|
|
|
newSVG.setAttribute('fill', 'white');
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
newSVG.setAttribute('transform', 'scale(8,8)');
|
2018-08-02 15:30:33 +00:00
|
|
|
newSVG.setAttribute('d', simpleStr);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
document.getElementById('svg1').appendChild(newSVG);
|
2018-08-02 15:30:33 +00:00
|
|
|
|
|
|
|
|
// Draw directly to Canvas
|
|
|
|
|
let ctx = document.getElementById('canvas1').getContext('2d');
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
setCanvasSize(ctx, 200, 200);
|
2018-08-02 15:30:33 +00:00
|
|
|
ctx.strokeStyle = 'green';
|
|
|
|
|
ctx.fillStyle = 'white';
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
ctx.scale(8, 8);
|
2018-08-02 15:30:33 +00:00
|
|
|
ctx.beginPath();
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
firstPath.toCanvas(ctx);
|
2018-08-02 15:30:33 +00:00
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
// create Path2D object and use it in a Canvas.
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
let path2D = firstPath.toPath2D();
|
2018-08-02 15:30:33 +00:00
|
|
|
ctx = document.getElementById('canvas2').getContext('2d');
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
setCanvasSize(ctx, 200, 200);
|
|
|
|
|
ctx.canvas.width = 200
|
|
|
|
|
ctx.scale(8, 8);
|
2018-08-02 15:30:33 +00:00
|
|
|
ctx.fillStyle = 'purple';
|
|
|
|
|
ctx.strokeStyle = 'orange';
|
|
|
|
|
ctx.fill(path2D);
|
|
|
|
|
ctx.stroke(path2D);
|
|
|
|
|
|
|
|
|
|
// clean up WASM memory
|
|
|
|
|
// See http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html?highlight=memory#memory-management
|
|
|
|
|
firstPath.delete();
|
|
|
|
|
secondPath.delete();
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Path2DExample(PathKit) {
|
|
|
|
|
let objs = [new Path2D(), PathKit.NewPath(), new Path2D(), PathKit.NewPath()];
|
|
|
|
|
let canvases = [
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
document.getElementById('canvas3').getContext('2d'),
|
|
|
|
|
document.getElementById('canvas4').getContext('2d')
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (i = 0; i <= 1; i++) {
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
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, 80);
|
|
|
|
|
path.bezierCurveTo(90, 10, 160, 150, 190, 10);
|
|
|
|
|
|
|
|
|
|
path.moveTo(36, 148);
|
|
|
|
|
path.quadraticCurveTo(66, 188, 120, 136);
|
|
|
|
|
path.lineTo(36, 148);
|
|
|
|
|
|
|
|
|
|
path.rect(5, 170, 20, 20);
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
}
|
[PathKit] Add more Path2D functionality and move some methods to be members
Adds arc, arcTo, rect and Path2D names for quadTo, cubicTo, close.
Adds conic verb support (approximated with 2 quads).
Breaking changes:
Some functions have been moved to be member functions:
PathKit.Simplify(path) -> path.simplify()
PathKit.ToCanvas(path, ctx) -> path.toCanvas(ctx)
PathKit.ToSVGString(path) -> path.toSVGString()
PathKit.ToPath2D(path) -> path.toPath2D()
PathKit.ToCmds(path) -> path.toCmds()
PathKit.ResolveBuilder(builder) -> builder.resolve()
PathKit.GetBoundaryPathFromRegion(region) -> region.getBoundaryPath()
Pathkit.ApplyPathOp(pathOne, pathTwo, op) still exists, but there's
now also pathOne.op(pathTwo, op) for cases when that's easier.
As per custom with version 0.x.y projects, I'm bumping the
minor version (in npm) for these breaking changes instead of the
major version (which will happen when we are version >= 1.0.0).
This also has some small improvements to the output code size.
The biggest jump was from enabling the closure compiler on the
helper JS, which trimmed it down by about 40%. Using the closure
compiler requires the JRE on the bots, which prompted the emsdk-base
image change.
Bug: skia:8216
Change-Id: I40902d23380093c34d1679df0255bcb0eaa77b01
Reviewed-on: https://skia-review.googlesource.com/145420
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
2018-08-06 18:49:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
objs[1].delete();
|
|
|
|
|
}
|
2018-08-02 15:30:33 +00:00
|
|
|
|
2018-08-10 19:53:16 +00:00
|
|
|
// see https://fiddle.skia.org/c/@discrete_path
|
|
|
|
|
function drawStar(path) {
|
|
|
|
|
let R = 115.2, C = 128.0;
|
|
|
|
|
path.moveTo(C + R + 22, C);
|
|
|
|
|
for (let i = 1; i < 8; i++) {
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
let a = 2.6927937 * i;
|
|
|
|
|
path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a));
|
2018-08-10 19:53:16 +00:00
|
|
|
}
|
|
|
|
|
path.closePath();
|
|
|
|
|
return path;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function PathEffectsExample(PathKit) {
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
let effects = [
|
|
|
|
|
// no-op
|
|
|
|
|
(path) => path,
|
|
|
|
|
// dash
|
2018-08-24 14:44:16 +00:00
|
|
|
(path, counter) => path.dash(10, 3, counter/5),
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
// trim (takes optional 3rd param for returning the trimmed part
|
|
|
|
|
// or the complement)
|
2018-08-24 14:44:16 +00:00
|
|
|
(path, counter) => path.trim((counter/100) % 1, 0.8, false),
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
// simplify
|
|
|
|
|
(path) => path.simplify(),
|
|
|
|
|
// stroke
|
2018-08-24 14:44:16 +00:00
|
|
|
(path, counter) => path.stroke({
|
|
|
|
|
width: 10 * (Math.sin(counter/30) + 1),
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
join: PathKit.StrokeJoin.BEVEL,
|
|
|
|
|
cap: PathKit.StrokeCap.BUTT,
|
|
|
|
|
miter_limit: 1,
|
|
|
|
|
}),
|
|
|
|
|
// "offset effect", that is, making a border around the shape.
|
2018-08-24 14:44:16 +00:00
|
|
|
(path, counter) => {
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
let orig = path.copy();
|
|
|
|
|
path.stroke({
|
2018-08-24 14:44:16 +00:00
|
|
|
width: 10 + (counter / 4) % 50,
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
join: PathKit.StrokeJoin.ROUND,
|
|
|
|
|
cap: PathKit.StrokeCap.SQUARE,
|
|
|
|
|
})
|
|
|
|
|
.op(orig, PathKit.PathOp.DIFFERENCE);
|
|
|
|
|
orig.delete();
|
2018-08-24 14:44:16 +00:00
|
|
|
},
|
|
|
|
|
(path, counter) => {
|
|
|
|
|
let simplified = path.simplify().copy();
|
|
|
|
|
path.stroke({
|
|
|
|
|
width: 2 + (counter / 2) % 100,
|
|
|
|
|
join: PathKit.StrokeJoin.BEVEL,
|
|
|
|
|
cap: PathKit.StrokeCap.BUTT,
|
|
|
|
|
})
|
|
|
|
|
.op(simplified, PathKit.PathOp.REVERSE_DIFFERENCE);
|
|
|
|
|
simplified.delete();
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
}
|
2018-08-10 19:53:16 +00:00
|
|
|
];
|
|
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
let names = ["(plain)", "Dash", "Trim", "Simplify", "Stroke", "Grow", "Shrink"];
|
2018-08-10 19:53:16 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
let counter = 0;
|
|
|
|
|
function frame() {
|
|
|
|
|
counter++;
|
|
|
|
|
for (let i = 0; i < effects.length; i++) {
|
|
|
|
|
let path = PathKit.NewPath();
|
|
|
|
|
drawStar(path);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
// The transforms apply directly to the path.
|
|
|
|
|
effects[i](path, counter);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
let ctx = document.getElementById(`canvas${i+5}`).getContext('2d');
|
|
|
|
|
setCanvasSize(ctx, 300, 300);
|
|
|
|
|
ctx.strokeStyle = '#3c597a';
|
|
|
|
|
ctx.fillStyle = '#3c597a';
|
|
|
|
|
if (i >=4 ) {
|
|
|
|
|
ctx.fill(path.toPath2D(), path.getFillTypeString());
|
|
|
|
|
} else {
|
|
|
|
|
ctx.stroke(path.toPath2D());
|
|
|
|
|
}
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
ctx.font = '42px monospace';
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
let x = 150-ctx.measureText(names[i]).width/2;
|
|
|
|
|
ctx.strokeText(names[i], x, 290);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
|
2018-08-24 14:44:16 +00:00
|
|
|
path.delete();
|
|
|
|
|
}
|
|
|
|
|
window.requestAnimationFrame(frame);
|
2018-08-10 19:53:16 +00:00
|
|
|
}
|
2018-08-24 14:44:16 +00:00
|
|
|
window.requestAnimationFrame(frame);
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
}
|
2018-08-10 19:53:16 +00:00
|
|
|
|
[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>
2018-08-17 17:52:56 +00:00
|
|
|
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();
|
2018-08-10 19:53:16 +00:00
|
|
|
}
|
|
|
|
|
|
2018-09-07 18:00:41 +00:00
|
|
|
function CubicSolverExample(PathKit) {
|
|
|
|
|
let ctx = document.getElementById('cubics').getContext('2d');
|
|
|
|
|
setCanvasSize(ctx, 300, 300);
|
|
|
|
|
// Draw lines between cp0 (0, 0) and cp1 and then cp2 and cp3 (1, 1)
|
|
|
|
|
// scaled up to be on a 300x300 grid instead of unit square
|
|
|
|
|
ctx.strokeStyle = 'black';
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(0, 0);
|
|
|
|
|
ctx.lineTo(0.1 * 300, 0.5*300);
|
|
|
|
|
|
|
|
|
|
ctx.moveTo(0.5 * 300, 0.1*300);
|
|
|
|
|
ctx.lineTo(300, 300);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'green';
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
|
|
|
|
|
for (let x = 0; x < 300; x++) {
|
|
|
|
|
// scale X into unit square
|
|
|
|
|
let y = PathKit.cubicYFromX(0.1, 0.5, 0.5, 0.1, x/300);
|
|
|
|
|
ctx.arc(x, y*300, 2, 0, 2*Math.PI);
|
|
|
|
|
}
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-02 15:30:33 +00:00
|
|
|
</script>
|