Lines Matching full:path
21 - Exposes a variety of path effects:
78 function drawStar(path) {
80 path.moveTo(C + R + 22, C);
83 path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a));
85 path.closePath();
86 return path;
92 (path) => path,
94 (path, counter) => path.dash(10, 3, counter/5),
97 (path, counter) => path.trim((counter/100) % 1, 0.8, false),
99 (path) => path.simplify(),
101 (path, counter) => path.stroke({
108 (path, counter) => {
109 let orig = path.copy();
110 path.stroke({
118 (path, counter) => {
119 let simplified = path.simplify().copy();
120 path.stroke({
136 let path = PathKit.NewPath();
137 drawStar(path);
139 // The transforms apply directly to the path.
140 effects[i](path, counter);
152 ctx.fill(path.toPath2D(), path.getFillTypeString());
154 ctx.stroke(path.toPath2D());
162 path.delete();
175 let path = drawStar(PathKit.NewPath());
191 path.transform(scaleDown);
193 path.transform(scaleUp);
197 ctx.stroke(path.toPath2D());
231 - From the SVG string of a path `PathKit.FromSVGString(str)`
234 - As a copy of an existing `SkPath` with `path.copy()` or
235 `PathKit.NewPath(path)`
239 - An SVG string `path.toSVGString()`
241 `path.toPath2D()`
242 - Directly to a canvas 2D context `path.toCanvas(ctx)`
243 - A 2D array of verbs and arguments `path.toCmds()`
258 be cleaned up with `path.delete()` when they leave the scope to avoid leaking
274 let path = PathKit.FromSVGString('M150 0 L75 200 L225 200 Z');
275 // path represents a triangle
276 // don't forget to do path.delete() when it goes out of scope.
295 let path = PathKit.FromCmds(cmds);
296 // path is the same as if a user had done
297 // let path = PathKit.NewPath().moveTo(0, 10).lineTo(30, 40).quadTo(20, 50, 45, 60);
298 // don't forget to do path.delete() when it goes out of scope.
306 let path = PathKit.NewPath();
307 path.moveTo(0, 10)
310 // don't forget to do path.delete() when it goes out of scope.
311 // Users can also do let path = new PathKit.SkPath();
315 **pathToCopy** - SkPath, a path to make a copy of.
330 **pathOne** - `SkPath`, a path. <br> **pathTwo** - `SkPath`, a path. <br>
334 first and second path (order matters).
343 // to have the resulting path be stored to pathOne and avoid allocating another object.
379 **otherPath** - `SkPath`, a path to append to this path
381 Adds the given path to `this` and then returns `this` for chaining purposes.
385 **otherPath** - `SkPath`, a path to append to this path. <br> **transform** -
389 Adds the given path to `this` after applying the transform and then returns
396 **otherPath** - `SkPath`, a path to append to this path. <br> **a, b, c, d, e,
401 Adds the given path to `this` after applying the transform and then returns
424 **otherPath** - `SkPath`, a path to append to this path. <br> **scaleX, skewX,
430 Adds the given path to `this` after applying the transform and then returns
464 let path = PathKit.NewPath();
465 path.moveTo(20, 120);
468 // path looks like a pie with a 1/8th slice removed.
482 Returns the pen to the start of the current sub-path, then returns `this` for
489 Returns an `SkRect` that represents the minimum and maximum area of `this` path.
506 Return a copy of `this` path.
524 Applies a dashed path effect to `this` then returns `this` for chaining
533 // at (0, 0), but 3 pixels around the path (3, 0)
552 **otherPath** - `SkPath`, the path to compare to.
554 Returns a `Boolean` value based on if `this` path is equal to **otherPath**.
558 Returns an `SkRect` that represents the minimum and maximum area of `this` path.
565 Returns a `FillType` based on what this path is. This defaults to
573 Returns a `String` representing the fillType of `this` path. The values are
578 let path = ...;
581 ctx.fill(path.toPath2D(), path.getFillTypeString());
603 **otherPath** - `SkPath`, The other path to be combined with `this`. <br>
606 Combines otherPath into `this` path with the given operation and returns `this`
642 Set the fillType of the path. See
648 Set `this` path to a set of _non-overlapping_ contours that describe the same
649 area as the original path. See the "Simplify" effect above for a visual example.
655 Strokes `this` path out with the given options. This can be used for a variety
662 // Stroke the path with width 10 and rounded corners
674 **ctx** - `Canvas2DContext`, Canvas on which to draw the path.
676 Draws `this` path on the passed in
695 object that has the same operations as `this` path.
707 [SVGPath](https://www.w3schools.com/graphics/svg_path.asp) based on `this` path.
713 let newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
739 let path = PathKit.NewPath().rect(0, 0, 100, 100);
740 // scale up the path by 5x
741 path.transform([5, 0, 0,
744 // move the path 75 px to the right.
745 path.transform(1, 0, 75,
752 "percentages" of the path to draw <br> **isComplement** - `Boolean`, If the
756 Sets `this` path to be a subset of the original path, then returns `this` for
770 "empty path". Don't forget to call `delete()` on both the builder and the result
773 #### `add(path, operation)`
775 **path** - `SkPath`, The path to be combined with the given rule. <br>
778 Adds a path and the operand to the builder.
784 Don't forget to call `.delete()` on the returned path when it goes out of scope.
806 - **width**, `Number` the width of the lines of the path. Default 1.