modern-path2d 0.1.10 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +120 -41
  2. package/dist/index.d.cts +191 -139
  3. package/dist/index.d.mts +191 -139
  4. package/dist/index.d.ts +191 -139
  5. package/dist/index.js +1 -1
  6. package/dist/index.mjs +115 -42
  7. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -1,3 +1,84 @@
1
+ /**
2
+ * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
3
+ */
4
+ type PathCommand = {
5
+ type: 'm' | 'M';
6
+ x: number;
7
+ y: number;
8
+ } | {
9
+ type: 'h' | 'H';
10
+ x: number;
11
+ } | {
12
+ type: 'v' | 'V';
13
+ y: number;
14
+ } | {
15
+ type: 'l' | 'L';
16
+ x: number;
17
+ y: number;
18
+ } | {
19
+ type: 'c' | 'C';
20
+ x1: number;
21
+ y1: number;
22
+ x2: number;
23
+ y2: number;
24
+ x: number;
25
+ y: number;
26
+ } | {
27
+ type: 's' | 'S';
28
+ x2: number;
29
+ y2: number;
30
+ x: number;
31
+ y: number;
32
+ } | {
33
+ type: 'q' | 'Q';
34
+ x1: number;
35
+ y1: number;
36
+ x: number;
37
+ y: number;
38
+ } | {
39
+ type: 't' | 'T';
40
+ x: number;
41
+ y: number;
42
+ } | {
43
+ type: 'a' | 'A';
44
+ rx: number;
45
+ ry: number;
46
+ angle: number;
47
+ largeArcFlag: number;
48
+ sweepFlag: number;
49
+ x: number;
50
+ y: number;
51
+ } | {
52
+ type: 'z' | 'Z';
53
+ };
54
+ type FillRule = 'nonzero' | 'evenodd';
55
+ type StrokeLinecap = 'butt' | 'round' | 'square';
56
+ type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
57
+ interface PathDrawStyle {
58
+ fill: string | CanvasGradient | CanvasPattern;
59
+ stroke: string | CanvasGradient | CanvasPattern;
60
+ shadowColor: string;
61
+ shadowOffsetX: number;
62
+ shadowOffsetY: number;
63
+ shadowBlur: number;
64
+ }
65
+ interface PathStyle extends PathDrawStyle {
66
+ [key: string]: any;
67
+ fillOpacity: number;
68
+ fillRule: FillRule;
69
+ opacity: number;
70
+ strokeOpacity: number;
71
+ strokeWidth: number;
72
+ strokeLinecap: StrokeLinecap;
73
+ strokeLinejoin: StrokeLinejoin;
74
+ strokeMiterlimit: number;
75
+ strokeDasharray: number[];
76
+ strokeDashoffset: number;
77
+ visibility: string;
78
+ }
79
+
80
+ declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<PathStyle>): void;
81
+
1
82
  declare class Matrix3 {
2
83
  elements: number[];
3
84
  constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
@@ -65,144 +146,6 @@ declare class BoundingBox {
65
146
  toArray(): [number, number, number, number];
66
147
  }
67
148
 
68
- declare class CurvePath extends Curve {
69
- curves: Curve[];
70
- startPoint?: Vector2;
71
- currentPoint: Vector2;
72
- autoClose: boolean;
73
- protected _cacheLengths: number[];
74
- constructor(points?: Vector2[]);
75
- addCurve(curve: Curve): this;
76
- addPoints(points: Vector2[]): this;
77
- addCommands(commands: PathCommand[]): this;
78
- addData(data: string): this;
79
- getPoint(t: number, output?: Vector2): Vector2;
80
- getLength(): number;
81
- updateArcLengths(): void;
82
- getCurveLengths(): number[];
83
- getSpacedPoints(divisions?: number): Vector2[];
84
- getPoints(divisions?: number): Vector2[];
85
- protected _setCurrentPoint(point: VectorLike): this;
86
- closePath(): this;
87
- moveTo(x: number, y: number): this;
88
- lineTo(x: number, y: number): this;
89
- bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
90
- quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
91
- arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
92
- relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
93
- arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
94
- ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
95
- relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
96
- rect(x: number, y: number, w: number, h: number): this;
97
- splineThru(points: Vector2[]): this;
98
- transformPoint(cb: (point: Vector2) => void): this;
99
- getMinMax(min?: Vector2, max?: Vector2): {
100
- min: Vector2;
101
- max: Vector2;
102
- };
103
- getBoundingBox(): BoundingBox;
104
- getCommands(): PathCommand[];
105
- drawTo(ctx: CanvasRenderingContext2D): this;
106
- copy(source: CurvePath): this;
107
- }
108
-
109
- /**
110
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
111
- */
112
- declare class Path2D<T = any> {
113
- currentPath: CurvePath;
114
- paths: CurvePath[];
115
- userData?: T;
116
- get startPoint(): Vector2 | undefined;
117
- get currentPoint(): Vector2 | undefined;
118
- constructor(path?: Path2D | PathCommand[] | string);
119
- addPath(path: Path2D | CurvePath): this;
120
- closePath(): this;
121
- moveTo(x: number, y: number): this;
122
- lineTo(x: number, y: number): this;
123
- bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
124
- quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
125
- arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
126
- arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
127
- ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
128
- rect(x: number, y: number, w: number, h: number): this;
129
- addCommands(commands: PathCommand[]): this;
130
- addData(data: string): this;
131
- splineThru(points: Vector2[]): this;
132
- forEachCurve(cb: (curve: Curve) => void): this;
133
- transformPoint(cb: (point: Vector2) => void): this;
134
- transform(matrix: Matrix3): this;
135
- getMinMax(min?: Vector2, max?: Vector2): {
136
- min: Vector2;
137
- max: Vector2;
138
- };
139
- getBoundingBox(): BoundingBox;
140
- getCommands(): PathCommand[];
141
- getData(): string;
142
- getSvgString(): string;
143
- getSvgDataUri(): string;
144
- drawTo(ctx: CanvasRenderingContext2D): void;
145
- strokeTo(ctx: CanvasRenderingContext2D): void;
146
- fillTo(ctx: CanvasRenderingContext2D): void;
147
- copy(source: Path2D): this;
148
- toCanvas(fill?: boolean): HTMLCanvasElement;
149
- clone(): this;
150
- }
151
-
152
- /**
153
- * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
154
- */
155
- type PathCommand = {
156
- type: 'm' | 'M';
157
- x: number;
158
- y: number;
159
- } | {
160
- type: 'h' | 'H';
161
- x: number;
162
- } | {
163
- type: 'v' | 'V';
164
- y: number;
165
- } | {
166
- type: 'l' | 'L';
167
- x: number;
168
- y: number;
169
- } | {
170
- type: 'c' | 'C';
171
- x1: number;
172
- y1: number;
173
- x2: number;
174
- y2: number;
175
- x: number;
176
- y: number;
177
- } | {
178
- type: 's' | 'S';
179
- x2: number;
180
- y2: number;
181
- x: number;
182
- y: number;
183
- } | {
184
- type: 'q' | 'Q';
185
- x1: number;
186
- y1: number;
187
- x: number;
188
- y: number;
189
- } | {
190
- type: 't' | 'T';
191
- x: number;
192
- y: number;
193
- } | {
194
- type: 'a' | 'A';
195
- rx: number;
196
- ry: number;
197
- angle: number;
198
- largeArcFlag: number;
199
- sweepFlag: number;
200
- x: number;
201
- y: number;
202
- } | {
203
- type: 'z' | 'Z';
204
- };
205
-
206
149
  declare abstract class Curve {
207
150
  arcLengthDivisions: number;
208
151
  protected _cacheArcLengths?: number[];
@@ -410,7 +353,116 @@ declare class SplineCurve extends Curve {
410
353
  copy(source: SplineCurve): this;
411
354
  }
412
355
 
356
+ declare class CurvePath extends Curve {
357
+ curves: Curve[];
358
+ startPoint?: Vector2;
359
+ currentPoint: Vector2;
360
+ autoClose: boolean;
361
+ protected _cacheLengths: number[];
362
+ constructor(points?: Vector2[]);
363
+ addCurve(curve: Curve): this;
364
+ addPoints(points: Vector2[]): this;
365
+ addCommands(commands: PathCommand[]): this;
366
+ addData(data: string): this;
367
+ getPoint(t: number, output?: Vector2): Vector2;
368
+ getLength(): number;
369
+ updateArcLengths(): void;
370
+ getCurveLengths(): number[];
371
+ getSpacedPoints(divisions?: number): Vector2[];
372
+ getPoints(divisions?: number): Vector2[];
373
+ protected _setCurrentPoint(point: VectorLike): this;
374
+ closePath(): this;
375
+ moveTo(x: number, y: number): this;
376
+ lineTo(x: number, y: number): this;
377
+ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
378
+ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
379
+ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
380
+ relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
381
+ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
382
+ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
383
+ relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
384
+ rect(x: number, y: number, w: number, h: number): this;
385
+ splineThru(points: Vector2[]): this;
386
+ transformPoint(cb: (point: Vector2) => void): this;
387
+ getMinMax(min?: Vector2, max?: Vector2): {
388
+ min: Vector2;
389
+ max: Vector2;
390
+ };
391
+ getBoundingBox(): BoundingBox;
392
+ getCommands(): PathCommand[];
393
+ drawTo(ctx: CanvasRenderingContext2D): this;
394
+ copy(source: CurvePath): this;
395
+ }
396
+
397
+ /**
398
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
399
+ */
400
+ declare class Path2D {
401
+ currentPath: CurvePath;
402
+ paths: CurvePath[];
403
+ style: Partial<PathStyle>;
404
+ get startPoint(): Vector2 | undefined;
405
+ get currentPoint(): Vector2 | undefined;
406
+ get strokeWidth(): number;
407
+ constructor(path?: Path2D | PathCommand[] | string);
408
+ addPath(path: Path2D | CurvePath): this;
409
+ closePath(): this;
410
+ moveTo(x: number, y: number): this;
411
+ lineTo(x: number, y: number): this;
412
+ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
413
+ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
414
+ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
415
+ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
416
+ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
417
+ rect(x: number, y: number, w: number, h: number): this;
418
+ addCommands(commands: PathCommand[]): this;
419
+ addData(data: string): this;
420
+ splineThru(points: Vector2[]): this;
421
+ forEachCurve(cb: (curve: Curve) => void): this;
422
+ transformPoint(cb: (point: Vector2) => void): this;
423
+ transform(matrix: Matrix3): this;
424
+ getMinMax(min?: Vector2, max?: Vector2): {
425
+ min: Vector2;
426
+ max: Vector2;
427
+ };
428
+ getBoundingBox(withStrokeWidth?: boolean): BoundingBox;
429
+ getCommands(): PathCommand[];
430
+ getData(): string;
431
+ getSvgPathXml(): string;
432
+ getSvgXml(): string;
433
+ getSvgDataUri(): string;
434
+ drawTo(ctx: CanvasRenderingContext2D, withStyle?: boolean): void;
435
+ copy(source: Path2D): this;
436
+ toSvg(): SVGElement;
437
+ toCanvas(pixelRatio?: number): HTMLCanvasElement;
438
+ clone(): this;
439
+ }
440
+
441
+ /**
442
+ * @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
443
+ */
444
+ declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
445
+
446
+ /**
447
+ * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
448
+ * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
449
+ * From
450
+ * rx ry x-axis-rotation large-arc-flag sweep-flag x y
451
+ * To
452
+ * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
453
+ */
454
+ declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
455
+
456
+ /**
457
+ * from https://github.com/ppvg/svg-numbers (MIT License)
458
+ */
459
+ declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
460
+
461
+ declare function pathCommandsToPathData(commands: PathCommand[]): string;
462
+
463
+ declare function pathDataToPathCommands(d: string): PathCommand[];
464
+
413
465
  declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
414
466
  declare function parseSvg(svg: string | SVGElement): Path2D[];
415
467
 
416
- export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, type VectorLike, parseSvg, parseSvgToDom };
468
+ export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathDrawStyle, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,84 @@
1
+ /**
2
+ * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
3
+ */
4
+ type PathCommand = {
5
+ type: 'm' | 'M';
6
+ x: number;
7
+ y: number;
8
+ } | {
9
+ type: 'h' | 'H';
10
+ x: number;
11
+ } | {
12
+ type: 'v' | 'V';
13
+ y: number;
14
+ } | {
15
+ type: 'l' | 'L';
16
+ x: number;
17
+ y: number;
18
+ } | {
19
+ type: 'c' | 'C';
20
+ x1: number;
21
+ y1: number;
22
+ x2: number;
23
+ y2: number;
24
+ x: number;
25
+ y: number;
26
+ } | {
27
+ type: 's' | 'S';
28
+ x2: number;
29
+ y2: number;
30
+ x: number;
31
+ y: number;
32
+ } | {
33
+ type: 'q' | 'Q';
34
+ x1: number;
35
+ y1: number;
36
+ x: number;
37
+ y: number;
38
+ } | {
39
+ type: 't' | 'T';
40
+ x: number;
41
+ y: number;
42
+ } | {
43
+ type: 'a' | 'A';
44
+ rx: number;
45
+ ry: number;
46
+ angle: number;
47
+ largeArcFlag: number;
48
+ sweepFlag: number;
49
+ x: number;
50
+ y: number;
51
+ } | {
52
+ type: 'z' | 'Z';
53
+ };
54
+ type FillRule = 'nonzero' | 'evenodd';
55
+ type StrokeLinecap = 'butt' | 'round' | 'square';
56
+ type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
57
+ interface PathDrawStyle {
58
+ fill: string | CanvasGradient | CanvasPattern;
59
+ stroke: string | CanvasGradient | CanvasPattern;
60
+ shadowColor: string;
61
+ shadowOffsetX: number;
62
+ shadowOffsetY: number;
63
+ shadowBlur: number;
64
+ }
65
+ interface PathStyle extends PathDrawStyle {
66
+ [key: string]: any;
67
+ fillOpacity: number;
68
+ fillRule: FillRule;
69
+ opacity: number;
70
+ strokeOpacity: number;
71
+ strokeWidth: number;
72
+ strokeLinecap: StrokeLinecap;
73
+ strokeLinejoin: StrokeLinejoin;
74
+ strokeMiterlimit: number;
75
+ strokeDasharray: number[];
76
+ strokeDashoffset: number;
77
+ visibility: string;
78
+ }
79
+
80
+ declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<PathStyle>): void;
81
+
1
82
  declare class Matrix3 {
2
83
  elements: number[];
3
84
  constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
@@ -65,144 +146,6 @@ declare class BoundingBox {
65
146
  toArray(): [number, number, number, number];
66
147
  }
67
148
 
68
- declare class CurvePath extends Curve {
69
- curves: Curve[];
70
- startPoint?: Vector2;
71
- currentPoint: Vector2;
72
- autoClose: boolean;
73
- protected _cacheLengths: number[];
74
- constructor(points?: Vector2[]);
75
- addCurve(curve: Curve): this;
76
- addPoints(points: Vector2[]): this;
77
- addCommands(commands: PathCommand[]): this;
78
- addData(data: string): this;
79
- getPoint(t: number, output?: Vector2): Vector2;
80
- getLength(): number;
81
- updateArcLengths(): void;
82
- getCurveLengths(): number[];
83
- getSpacedPoints(divisions?: number): Vector2[];
84
- getPoints(divisions?: number): Vector2[];
85
- protected _setCurrentPoint(point: VectorLike): this;
86
- closePath(): this;
87
- moveTo(x: number, y: number): this;
88
- lineTo(x: number, y: number): this;
89
- bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
90
- quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
91
- arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
92
- relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
93
- arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
94
- ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
95
- relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
96
- rect(x: number, y: number, w: number, h: number): this;
97
- splineThru(points: Vector2[]): this;
98
- transformPoint(cb: (point: Vector2) => void): this;
99
- getMinMax(min?: Vector2, max?: Vector2): {
100
- min: Vector2;
101
- max: Vector2;
102
- };
103
- getBoundingBox(): BoundingBox;
104
- getCommands(): PathCommand[];
105
- drawTo(ctx: CanvasRenderingContext2D): this;
106
- copy(source: CurvePath): this;
107
- }
108
-
109
- /**
110
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
111
- */
112
- declare class Path2D<T = any> {
113
- currentPath: CurvePath;
114
- paths: CurvePath[];
115
- userData?: T;
116
- get startPoint(): Vector2 | undefined;
117
- get currentPoint(): Vector2 | undefined;
118
- constructor(path?: Path2D | PathCommand[] | string);
119
- addPath(path: Path2D | CurvePath): this;
120
- closePath(): this;
121
- moveTo(x: number, y: number): this;
122
- lineTo(x: number, y: number): this;
123
- bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
124
- quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
125
- arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
126
- arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
127
- ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
128
- rect(x: number, y: number, w: number, h: number): this;
129
- addCommands(commands: PathCommand[]): this;
130
- addData(data: string): this;
131
- splineThru(points: Vector2[]): this;
132
- forEachCurve(cb: (curve: Curve) => void): this;
133
- transformPoint(cb: (point: Vector2) => void): this;
134
- transform(matrix: Matrix3): this;
135
- getMinMax(min?: Vector2, max?: Vector2): {
136
- min: Vector2;
137
- max: Vector2;
138
- };
139
- getBoundingBox(): BoundingBox;
140
- getCommands(): PathCommand[];
141
- getData(): string;
142
- getSvgString(): string;
143
- getSvgDataUri(): string;
144
- drawTo(ctx: CanvasRenderingContext2D): void;
145
- strokeTo(ctx: CanvasRenderingContext2D): void;
146
- fillTo(ctx: CanvasRenderingContext2D): void;
147
- copy(source: Path2D): this;
148
- toCanvas(fill?: boolean): HTMLCanvasElement;
149
- clone(): this;
150
- }
151
-
152
- /**
153
- * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
154
- */
155
- type PathCommand = {
156
- type: 'm' | 'M';
157
- x: number;
158
- y: number;
159
- } | {
160
- type: 'h' | 'H';
161
- x: number;
162
- } | {
163
- type: 'v' | 'V';
164
- y: number;
165
- } | {
166
- type: 'l' | 'L';
167
- x: number;
168
- y: number;
169
- } | {
170
- type: 'c' | 'C';
171
- x1: number;
172
- y1: number;
173
- x2: number;
174
- y2: number;
175
- x: number;
176
- y: number;
177
- } | {
178
- type: 's' | 'S';
179
- x2: number;
180
- y2: number;
181
- x: number;
182
- y: number;
183
- } | {
184
- type: 'q' | 'Q';
185
- x1: number;
186
- y1: number;
187
- x: number;
188
- y: number;
189
- } | {
190
- type: 't' | 'T';
191
- x: number;
192
- y: number;
193
- } | {
194
- type: 'a' | 'A';
195
- rx: number;
196
- ry: number;
197
- angle: number;
198
- largeArcFlag: number;
199
- sweepFlag: number;
200
- x: number;
201
- y: number;
202
- } | {
203
- type: 'z' | 'Z';
204
- };
205
-
206
149
  declare abstract class Curve {
207
150
  arcLengthDivisions: number;
208
151
  protected _cacheArcLengths?: number[];
@@ -410,7 +353,116 @@ declare class SplineCurve extends Curve {
410
353
  copy(source: SplineCurve): this;
411
354
  }
412
355
 
356
+ declare class CurvePath extends Curve {
357
+ curves: Curve[];
358
+ startPoint?: Vector2;
359
+ currentPoint: Vector2;
360
+ autoClose: boolean;
361
+ protected _cacheLengths: number[];
362
+ constructor(points?: Vector2[]);
363
+ addCurve(curve: Curve): this;
364
+ addPoints(points: Vector2[]): this;
365
+ addCommands(commands: PathCommand[]): this;
366
+ addData(data: string): this;
367
+ getPoint(t: number, output?: Vector2): Vector2;
368
+ getLength(): number;
369
+ updateArcLengths(): void;
370
+ getCurveLengths(): number[];
371
+ getSpacedPoints(divisions?: number): Vector2[];
372
+ getPoints(divisions?: number): Vector2[];
373
+ protected _setCurrentPoint(point: VectorLike): this;
374
+ closePath(): this;
375
+ moveTo(x: number, y: number): this;
376
+ lineTo(x: number, y: number): this;
377
+ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
378
+ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
379
+ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
380
+ relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
381
+ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
382
+ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
383
+ relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
384
+ rect(x: number, y: number, w: number, h: number): this;
385
+ splineThru(points: Vector2[]): this;
386
+ transformPoint(cb: (point: Vector2) => void): this;
387
+ getMinMax(min?: Vector2, max?: Vector2): {
388
+ min: Vector2;
389
+ max: Vector2;
390
+ };
391
+ getBoundingBox(): BoundingBox;
392
+ getCommands(): PathCommand[];
393
+ drawTo(ctx: CanvasRenderingContext2D): this;
394
+ copy(source: CurvePath): this;
395
+ }
396
+
397
+ /**
398
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
399
+ */
400
+ declare class Path2D {
401
+ currentPath: CurvePath;
402
+ paths: CurvePath[];
403
+ style: Partial<PathStyle>;
404
+ get startPoint(): Vector2 | undefined;
405
+ get currentPoint(): Vector2 | undefined;
406
+ get strokeWidth(): number;
407
+ constructor(path?: Path2D | PathCommand[] | string);
408
+ addPath(path: Path2D | CurvePath): this;
409
+ closePath(): this;
410
+ moveTo(x: number, y: number): this;
411
+ lineTo(x: number, y: number): this;
412
+ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
413
+ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
414
+ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
415
+ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
416
+ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
417
+ rect(x: number, y: number, w: number, h: number): this;
418
+ addCommands(commands: PathCommand[]): this;
419
+ addData(data: string): this;
420
+ splineThru(points: Vector2[]): this;
421
+ forEachCurve(cb: (curve: Curve) => void): this;
422
+ transformPoint(cb: (point: Vector2) => void): this;
423
+ transform(matrix: Matrix3): this;
424
+ getMinMax(min?: Vector2, max?: Vector2): {
425
+ min: Vector2;
426
+ max: Vector2;
427
+ };
428
+ getBoundingBox(withStrokeWidth?: boolean): BoundingBox;
429
+ getCommands(): PathCommand[];
430
+ getData(): string;
431
+ getSvgPathXml(): string;
432
+ getSvgXml(): string;
433
+ getSvgDataUri(): string;
434
+ drawTo(ctx: CanvasRenderingContext2D, withStyle?: boolean): void;
435
+ copy(source: Path2D): this;
436
+ toSvg(): SVGElement;
437
+ toCanvas(pixelRatio?: number): HTMLCanvasElement;
438
+ clone(): this;
439
+ }
440
+
441
+ /**
442
+ * @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
443
+ */
444
+ declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
445
+
446
+ /**
447
+ * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
448
+ * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
449
+ * From
450
+ * rx ry x-axis-rotation large-arc-flag sweep-flag x y
451
+ * To
452
+ * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
453
+ */
454
+ declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
455
+
456
+ /**
457
+ * from https://github.com/ppvg/svg-numbers (MIT License)
458
+ */
459
+ declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
460
+
461
+ declare function pathCommandsToPathData(commands: PathCommand[]): string;
462
+
463
+ declare function pathDataToPathCommands(d: string): PathCommand[];
464
+
413
465
  declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
414
466
  declare function parseSvg(svg: string | SVGElement): Path2D[];
415
467
 
416
- export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, type VectorLike, parseSvg, parseSvgToDom };
468
+ export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathDrawStyle, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };