Lines Matching refs:PathKit
2 title: 'PathKit - Geometry in the Browser'
3 linkTitle: 'PathKit - Geometry in the Browser'
14 PathKit is still under rapid development, so the exact API is subject to change.
47 console.log('WebAssembly is supported! Using the wasm version of PathKit');
50 …sole.log('WebAssembly is not supported (yet) on this browser. Using the asmjs version of PathKit');
59 }).ready().then((PathKit) => {
60 // Code goes here using PathKit
61 PathEffectsExample(PathKit);
62 MatrixTransformExample(PathKit);
89 function PathEffectsExample(PathKit) {
103 join: PathKit.StrokeJoin.BEVEL,
104 cap: PathKit.StrokeCap.BUTT,
112 join: PathKit.StrokeJoin.ROUND,
113 cap: PathKit.StrokeCap.SQUARE,
115 .op(orig, PathKit.PathOp.DIFFERENCE);
122 join: PathKit.StrokeJoin.BEVEL,
123 cap: PathKit.StrokeCap.BUTT,
125 .op(simplified, PathKit.PathOp.REVERSE_DIFFERENCE);
136 let path = PathKit.NewPath();
169 function MatrixTransformExample(PathKit) {
175 let path = drawStar(PathKit.NewPath());
212 The best place to look for examples on how to use PathKit would be in the
231 - From the SVG string of a path `PathKit.FromSVGString(str)`
232 - From a 2D array of verbs and arguments `PathKit.FromCmds(cmds)`
233 - From `PathKit.NewPath()` (It will be blank)
235 `PathKit.NewPath(path)`
250 - combined with other paths using `op` or `PathKit.MakeFromOp(p1, p2, op)`. For
251 example, `path1.op(path2, PathKit.PathOp.INTERSECT)` will set path1 to be the
253 `PathKit.MakeFromOp(path1, path2, PathKit.PathOp.INTERSECT)` will do the same
262 ### PathKit subsection
274 let path = PathKit.FromSVGString('M150 0 L75 200 L225 200 Z');
291 [PathKit.MOVE_VERB, 0, 10],
292 [PathKit.LINE_VERB, 30, 40],
293 [PathKit.QUAD_VERB, 20, 50, 45, 60],
295 let path = PathKit.FromCmds(cmds);
297 // let path = PathKit.NewPath().moveTo(0, 10).lineTo(30, 40).quadTo(20, 50, 45, 60);
306 let path = PathKit.NewPath();
311 // Users can also do let path = new PathKit.SkPath();
322 let clone = PathKit.NewPath(otherPath);
325 // Users can also do let clone = new PathKit.SkPath(otherPath);
338 let pathOne = PathKit.NewPath().moveTo(0, 20).lineTo(10, 10).lineTo(20, 20).close();
339 let pathTwo = PathKit.NewPath().moveTo(10, 20).lineTo(20, 10).lineTo(30, 20).close();
340 let mountains = PathKit.MakeFromOp(pathOne, pathTwo, PathKit.PathOp.UNION);
342 // Users can also do pathOne.op(pathTwo, PathKit.PathOp.UNION);
408 let box = PathKit.NewPath().rect(0, 0, 100, 100);
409 let moreBoxes = PathKit.NewPath();
435 let box = PathKit.NewPath().rect(0, 0, 100, 100);
436 let moreBoxes = PathKit.NewPath();
464 let path = PathKit.NewPath();
529 let box = PathKit.NewPath().rect(0, 0, 100, 100);
566 `PathKit.FillType.WINDING`, but may change with `op()` or `simplify()`.
611 let pathOne = PathKit.NewPath().moveTo(0, 20).lineTo(10, 10).lineTo(20, 20).close();
612 let pathTwo = PathKit.NewPath().moveTo(10, 20).lineTo(20, 10).lineTo(30, 20).close();
614 let mountains = pathOne.copy().op(pathOne, pathTwo, PathKit.PathOp.UNION);
616 pathOne.op(pathOne, pathTwo, PathKit.PathOp.INTERSECT);
661 let box = PathKit.NewPath().rect(0, 0, 100, 100);
663 let rounded = box.copy().stroke({width: 10, join: PathKit.StrokeJoin.ROUND});
665 let grow = box.copy().stroke({width: 20}).op(box, PathKit.PathOp.DIFFERENCE);
668 let shrink = box.copy().stroke({width: 15, cap: PathKit.StrokeCap.BUTT})
669 .op(simplified, PathKit.PathOp.REVERSE_DIFFERENCE);
681 let box = PathKit.NewPath().rect(0, 0, 100, 100);
690 Returns a 2D Array of verbs and args. See `PathKit.FromCmds()` for more details.
699 let box = PathKit.NewPath().rect(0, 0, 100, 100);
711 let box = PathKit.NewPath().rect(0, 0, 100, 100);
739 let path = PathKit.NewPath().rect(0, 0, 100, 100);
761 let box = PathKit.NewPath().rect(0, 0, 100, 100);
769 `let builder = new PathKit.SkOpBuilder();` When created, the internal state is
810 - **join**, `StrokeJoin`, the join to use. Default `PathKit.StrokeJoin.MITER`.
814 - **cap**, `StrokeCap`, the cap to use. Default `PathKit.StrokeCap.BUTT`. See
823 - `PathKit.PathOp.DIFFERENCE`
824 - `PathKit.PathOp.INTERSECT`
825 - `PathKit.PathOp.REVERSE_DIFFERENCE`
826 - `PathKit.PathOp.UNION`
827 - `PathKit.PathOp.XOR`
829 These are used in `PathKit.MakeFromOp()` and `SkPath.op()`.
836 - `PathKit.FillType.WINDING` (also known as nonzero)
837 - `PathKit.FillType.EVENODD`
838 - `PathKit.FillType.INVERSE_WINDING`
839 - `PathKit.FillType.INVERSE_EVENODD`
849 - `PathKit.StrokeJoin.MITER`
850 - `PathKit.StrokeJoin.ROUND`
851 - `PathKit.StrokeJoin.BEVEL`
862 - `PathKit.StrokeCap.BUTT`
863 - `PathKit.StrokeCap.ROUND`
864 - `PathKit.StrokeCap.SQUARE`
874 - `PathKit.MOVE_VERB` = 0
875 - `PathKit.LINE_VERB` = 1
876 - `PathKit.QUAD_VERB` = 2
877 - `PathKit.CONIC_VERB` = 3
878 - `PathKit.CUBIC_VERB` = 4
879 - `PathKit.CLOSE_VERB` = 5
881 These are only needed for `PathKit.FromCmds()`.
885 #### `PathKit.LTRBRect(left, top, right, bottom)`