modern-path2d 0.0.5 → 0.1.0
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.
- package/README.md +39 -1
- package/dist/index.cjs +1556 -111
- package/dist/index.d.cts +171 -127
- package/dist/index.d.mts +171 -127
- package/dist/index.d.ts +171 -127
- package/dist/index.js +1 -1
- package/dist/index.mjs +1555 -109
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,37 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
x: number;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
x: number;
|
|
22
|
-
y: number;
|
|
23
|
-
} | {
|
|
24
|
-
type: 'A';
|
|
25
|
-
rx: number;
|
|
26
|
-
ry: number;
|
|
27
|
-
xAxisRotation: number;
|
|
28
|
-
largeArcFlag: number;
|
|
29
|
-
sweepFlag: number;
|
|
30
|
-
x: number;
|
|
31
|
-
y: number;
|
|
32
|
-
} | {
|
|
33
|
-
type: 'Z';
|
|
34
|
-
};
|
|
1
|
+
declare class Matrix3 {
|
|
2
|
+
elements: number[];
|
|
3
|
+
constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
|
|
4
|
+
set(n11: number, n12: number, n13: number, n21: number, n22: number, n23: number, n31: number, n32: number, n33: number): this;
|
|
5
|
+
identity(): this;
|
|
6
|
+
copy(m: Matrix3): this;
|
|
7
|
+
multiply(m: Matrix3): this;
|
|
8
|
+
premultiply(m: Matrix3): this;
|
|
9
|
+
multiplyMatrices(a: Matrix3, b: Matrix3): this;
|
|
10
|
+
invert(): this;
|
|
11
|
+
transpose(): this;
|
|
12
|
+
scale(sx: number, sy: number): this;
|
|
13
|
+
rotate(theta: number): this;
|
|
14
|
+
translate(tx: number, ty: number): this;
|
|
15
|
+
makeTranslation(x: number, y: number): this;
|
|
16
|
+
makeRotation(theta: number): this;
|
|
17
|
+
makeScale(x: number, y: number): this;
|
|
18
|
+
fromArray(array: number[], offset?: number): this;
|
|
19
|
+
clone(): Matrix3;
|
|
20
|
+
}
|
|
35
21
|
|
|
36
22
|
declare class Point2D {
|
|
37
23
|
x: number;
|
|
@@ -51,36 +37,11 @@ declare class Point2D {
|
|
|
51
37
|
normalize(): this;
|
|
52
38
|
lerpVectors(v1: Point2D, v2: Point2D, alpha: number): this;
|
|
53
39
|
equals(point: Point2D): boolean;
|
|
40
|
+
applyMatrix3(matrix3: Matrix3): this;
|
|
54
41
|
copy(point: Point2D): this;
|
|
55
42
|
clone(): Point2D;
|
|
56
43
|
}
|
|
57
44
|
|
|
58
|
-
declare abstract class Curve {
|
|
59
|
-
arcLengthDivisions: number;
|
|
60
|
-
protected _cacheArcLengths?: number[];
|
|
61
|
-
protected _needsUpdate: boolean;
|
|
62
|
-
abstract getPoint(t: number, output?: Point2D): Point2D;
|
|
63
|
-
abstract getCommands(): PathCommand[];
|
|
64
|
-
abstract drawTo(ctx: CanvasRenderingContext2D): void;
|
|
65
|
-
getMinMax(min?: Point2D, max?: Point2D): {
|
|
66
|
-
min: Point2D;
|
|
67
|
-
max: Point2D;
|
|
68
|
-
};
|
|
69
|
-
getDivisions(divisions: number): number;
|
|
70
|
-
getPointAt(u: number, output?: Point2D): Point2D;
|
|
71
|
-
getPoints(divisions?: number): Point2D[];
|
|
72
|
-
getSpacedPoints(divisions?: number): Point2D[];
|
|
73
|
-
getLength(): number;
|
|
74
|
-
getLengths(divisions?: number): number[];
|
|
75
|
-
updateArcLengths(): void;
|
|
76
|
-
getUtoTmapping(u: number, distance?: number): number;
|
|
77
|
-
getTangent(t: number, output?: Point2D): Point2D;
|
|
78
|
-
getTangentAt(u: number, output?: Point2D): Point2D;
|
|
79
|
-
getData(): string;
|
|
80
|
-
clone(): this;
|
|
81
|
-
copy(source: Curve): this;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
45
|
declare class CurvePath extends Curve {
|
|
85
46
|
curves: Curve[];
|
|
86
47
|
currentPoint: Point2D;
|
|
@@ -104,32 +65,158 @@ declare class CurvePath extends Curve {
|
|
|
104
65
|
splineThru(points: Point2D[]): this;
|
|
105
66
|
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
|
|
106
67
|
absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
|
|
107
|
-
ellipse(x: number, y: number,
|
|
108
|
-
absellipse(x: number, y: number,
|
|
68
|
+
ellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
|
|
69
|
+
absellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
|
|
109
70
|
getCommands(): PathCommand[];
|
|
110
71
|
getMinMax(min?: Point2D, max?: Point2D): {
|
|
111
72
|
min: Point2D;
|
|
112
73
|
max: Point2D;
|
|
113
74
|
};
|
|
114
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
75
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
115
76
|
copy(source: CurvePath): this;
|
|
116
77
|
}
|
|
117
78
|
|
|
79
|
+
/**
|
|
80
|
+
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
|
|
81
|
+
*/
|
|
82
|
+
declare class Path2D<T = any> {
|
|
83
|
+
currentPath: CurvePath;
|
|
84
|
+
paths: CurvePath[];
|
|
85
|
+
userData?: T;
|
|
86
|
+
constructor(path?: Path2D | PathCommand[] | string);
|
|
87
|
+
addPath(path: Path2D | CurvePath): this;
|
|
88
|
+
closePath(): this;
|
|
89
|
+
moveTo(x: number, y: number): this;
|
|
90
|
+
lineTo(x: number, y: number): this;
|
|
91
|
+
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
|
|
92
|
+
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
|
|
93
|
+
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
94
|
+
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
95
|
+
ellipse(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
|
+
addCommands(commands: PathCommand[]): this;
|
|
98
|
+
addData(data: string): this;
|
|
99
|
+
splineThru(points: Point2D[]): this;
|
|
100
|
+
forEachCurve(cb: (curve: Curve) => void): this;
|
|
101
|
+
transform(matrix: Matrix3): this;
|
|
102
|
+
getMinMax(min?: Point2D, max?: Point2D): {
|
|
103
|
+
min: Point2D;
|
|
104
|
+
max: Point2D;
|
|
105
|
+
};
|
|
106
|
+
getCommands(): PathCommand[];
|
|
107
|
+
getData(): string;
|
|
108
|
+
getBoundingBox(): {
|
|
109
|
+
x: number;
|
|
110
|
+
y: number;
|
|
111
|
+
width: number;
|
|
112
|
+
height: number;
|
|
113
|
+
};
|
|
114
|
+
getSvgString(): string;
|
|
115
|
+
getSvgDataUri(): string;
|
|
116
|
+
drawTo(ctx: CanvasRenderingContext2D): void;
|
|
117
|
+
strokeTo(ctx: CanvasRenderingContext2D): void;
|
|
118
|
+
fillTo(ctx: CanvasRenderingContext2D): void;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
123
|
+
*/
|
|
124
|
+
type PathCommand = {
|
|
125
|
+
type: 'm' | 'M';
|
|
126
|
+
x: number;
|
|
127
|
+
y: number;
|
|
128
|
+
} | {
|
|
129
|
+
type: 'h' | 'H';
|
|
130
|
+
x: number;
|
|
131
|
+
} | {
|
|
132
|
+
type: 'v' | 'V';
|
|
133
|
+
y: number;
|
|
134
|
+
} | {
|
|
135
|
+
type: 'l' | 'L';
|
|
136
|
+
x: number;
|
|
137
|
+
y: number;
|
|
138
|
+
} | {
|
|
139
|
+
type: 'c' | 'C';
|
|
140
|
+
x1: number;
|
|
141
|
+
y1: number;
|
|
142
|
+
x2: number;
|
|
143
|
+
y2: number;
|
|
144
|
+
x: number;
|
|
145
|
+
y: number;
|
|
146
|
+
} | {
|
|
147
|
+
type: 's' | 'S';
|
|
148
|
+
x2: number;
|
|
149
|
+
y2: number;
|
|
150
|
+
x: number;
|
|
151
|
+
y: number;
|
|
152
|
+
} | {
|
|
153
|
+
type: 'q' | 'Q';
|
|
154
|
+
x1: number;
|
|
155
|
+
y1: number;
|
|
156
|
+
x: number;
|
|
157
|
+
y: number;
|
|
158
|
+
} | {
|
|
159
|
+
type: 't' | 'T';
|
|
160
|
+
x: number;
|
|
161
|
+
y: number;
|
|
162
|
+
} | {
|
|
163
|
+
type: 'a' | 'A';
|
|
164
|
+
rx: number;
|
|
165
|
+
ry: number;
|
|
166
|
+
angle: number;
|
|
167
|
+
largeArcFlag: number;
|
|
168
|
+
sweepFlag: number;
|
|
169
|
+
x: number;
|
|
170
|
+
y: number;
|
|
171
|
+
} | {
|
|
172
|
+
type: 'z' | 'Z';
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
declare abstract class Curve {
|
|
176
|
+
arcLengthDivisions: number;
|
|
177
|
+
protected _cacheArcLengths?: number[];
|
|
178
|
+
protected _needsUpdate: boolean;
|
|
179
|
+
abstract getPoint(t: number, output?: Point2D): Point2D;
|
|
180
|
+
getPointAt(u: number, output?: Point2D): Point2D;
|
|
181
|
+
getPoints(divisions?: number): Point2D[];
|
|
182
|
+
getSpacedPoints(divisions?: number): Point2D[];
|
|
183
|
+
getLength(): number;
|
|
184
|
+
getLengths(divisions?: number): number[];
|
|
185
|
+
updateArcLengths(): void;
|
|
186
|
+
getUtoTmapping(u: number, distance?: number): number;
|
|
187
|
+
getTangent(t: number, output?: Point2D): Point2D;
|
|
188
|
+
getTangentAt(u: number, output?: Point2D): Point2D;
|
|
189
|
+
/** overrideable */
|
|
190
|
+
transform(matrix: Matrix3): this;
|
|
191
|
+
/** overrideable */
|
|
192
|
+
getDivisions(divisions: number): number;
|
|
193
|
+
/** overrideable */
|
|
194
|
+
getMinMax(min?: Point2D, max?: Point2D): {
|
|
195
|
+
min: Point2D;
|
|
196
|
+
max: Point2D;
|
|
197
|
+
};
|
|
198
|
+
/** overrideable */
|
|
199
|
+
getCommands(): PathCommand[];
|
|
200
|
+
getData(): string;
|
|
201
|
+
/** overrideable */
|
|
202
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
203
|
+
clone(): this;
|
|
204
|
+
copy(source: Curve): this;
|
|
205
|
+
}
|
|
206
|
+
|
|
118
207
|
declare class CircleCurve extends Curve {
|
|
119
208
|
center: Point2D;
|
|
120
209
|
radius: number;
|
|
121
210
|
start: number;
|
|
122
211
|
end: number;
|
|
123
212
|
constructor(center: Point2D, radius: number, start?: number, end?: number);
|
|
213
|
+
getPoint(t: number): Point2D;
|
|
214
|
+
getTangent(t: number): Point2D;
|
|
215
|
+
getNormal(t: number): Point2D;
|
|
124
216
|
getMinMax(min?: Point2D, max?: Point2D): {
|
|
125
217
|
min: Point2D;
|
|
126
218
|
max: Point2D;
|
|
127
219
|
};
|
|
128
|
-
getPoint(t: number): Point2D;
|
|
129
|
-
getTangent(t: number): Point2D;
|
|
130
|
-
getNormal(t: number): Point2D;
|
|
131
|
-
getCommands(): PathCommand[];
|
|
132
|
-
drawTo(_ctx: CanvasRenderingContext2D): void;
|
|
133
220
|
}
|
|
134
221
|
|
|
135
222
|
declare class CubicBezierCurve extends Curve {
|
|
@@ -143,25 +230,27 @@ declare class CubicBezierCurve extends Curve {
|
|
|
143
230
|
min: Point2D;
|
|
144
231
|
max: Point2D;
|
|
145
232
|
};
|
|
233
|
+
transform(matrix: Matrix3): this;
|
|
146
234
|
getCommands(): PathCommand[];
|
|
147
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
235
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
148
236
|
copy(source: CubicBezierCurve): this;
|
|
149
237
|
}
|
|
150
238
|
|
|
151
239
|
declare class EllipseCurve extends Curve {
|
|
152
240
|
x: number;
|
|
153
241
|
y: number;
|
|
154
|
-
|
|
155
|
-
|
|
242
|
+
radiusX: number;
|
|
243
|
+
radiusY: number;
|
|
156
244
|
startAngle: number;
|
|
157
245
|
endAngle: number;
|
|
158
246
|
clockwise: boolean;
|
|
159
247
|
rotation: number;
|
|
160
|
-
constructor(x?: number, y?: number,
|
|
248
|
+
constructor(x?: number, y?: number, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
|
|
161
249
|
getDivisions(divisions?: number): number;
|
|
162
250
|
getPoint(t: number, output?: Point2D): Point2D;
|
|
163
251
|
getCommands(): PathCommand[];
|
|
164
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
252
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
253
|
+
transform(matrix: Matrix3): this;
|
|
165
254
|
copy(source: EllipseCurve): this;
|
|
166
255
|
}
|
|
167
256
|
|
|
@@ -179,7 +268,7 @@ declare class HeartCurve extends Curve {
|
|
|
179
268
|
getTangent(value: number): Point2D;
|
|
180
269
|
getNormal(value: number): Point2D;
|
|
181
270
|
getCommands(): PathCommand[];
|
|
182
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
271
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
183
272
|
}
|
|
184
273
|
|
|
185
274
|
declare class LineCurve extends Curve {
|
|
@@ -196,7 +285,8 @@ declare class LineCurve extends Curve {
|
|
|
196
285
|
min: Point2D;
|
|
197
286
|
max: Point2D;
|
|
198
287
|
};
|
|
199
|
-
|
|
288
|
+
transform(matrix: Matrix3): this;
|
|
289
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
200
290
|
copy(source: LineCurve): this;
|
|
201
291
|
}
|
|
202
292
|
|
|
@@ -221,7 +311,7 @@ declare class PloygonCurve extends Curve {
|
|
|
221
311
|
min: Point2D;
|
|
222
312
|
max: Point2D;
|
|
223
313
|
};
|
|
224
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
314
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
225
315
|
}
|
|
226
316
|
|
|
227
317
|
declare class QuadraticBezierCurve extends Curve {
|
|
@@ -235,7 +325,8 @@ declare class QuadraticBezierCurve extends Curve {
|
|
|
235
325
|
min: Point2D;
|
|
236
326
|
max: Point2D;
|
|
237
327
|
};
|
|
238
|
-
|
|
328
|
+
transform(matrix: Matrix3): this;
|
|
329
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
239
330
|
copy(source: QuadraticBezierCurve): this;
|
|
240
331
|
}
|
|
241
332
|
|
|
@@ -262,7 +353,7 @@ declare class RectangularCurve extends Curve {
|
|
|
262
353
|
min: Point2D;
|
|
263
354
|
max: Point2D;
|
|
264
355
|
};
|
|
265
|
-
drawTo(ctx: CanvasRenderingContext2D):
|
|
356
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
266
357
|
}
|
|
267
358
|
|
|
268
359
|
declare class SplineCurve extends Curve {
|
|
@@ -270,56 +361,9 @@ declare class SplineCurve extends Curve {
|
|
|
270
361
|
constructor(points?: Point2D[]);
|
|
271
362
|
getDivisions(divisions?: number): number;
|
|
272
363
|
getPoint(t: number, output?: Point2D): Point2D;
|
|
273
|
-
getCommands(): PathCommand[];
|
|
274
|
-
drawTo(_ctx: CanvasRenderingContext2D): void;
|
|
275
364
|
copy(source: SplineCurve): this;
|
|
276
365
|
}
|
|
277
366
|
|
|
278
|
-
|
|
279
|
-
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
|
|
280
|
-
*/
|
|
281
|
-
declare class Path2D {
|
|
282
|
-
currentPath: CurvePath;
|
|
283
|
-
paths: CurvePath[];
|
|
284
|
-
constructor(path?: Path2D | PathCommand[] | string);
|
|
285
|
-
addPath(path: Path2D): this;
|
|
286
|
-
addCommands(commands: PathCommand[]): this;
|
|
287
|
-
addData(data: string): this;
|
|
288
|
-
closePath(): this;
|
|
289
|
-
moveTo(x: number, y: number): this;
|
|
290
|
-
lineTo(x: number, y: number): this;
|
|
291
|
-
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
|
|
292
|
-
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
|
|
293
|
-
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
294
|
-
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
295
|
-
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
296
|
-
rect(x: number, y: number, w: number, h: number): this;
|
|
297
|
-
splineThru(points: Point2D[]): this;
|
|
298
|
-
getMinMax(min?: Point2D, max?: Point2D): {
|
|
299
|
-
min: Point2D;
|
|
300
|
-
max: Point2D;
|
|
301
|
-
};
|
|
302
|
-
getCommands(): PathCommand[];
|
|
303
|
-
getData(): string;
|
|
304
|
-
getBoundingBox(): {
|
|
305
|
-
x: number;
|
|
306
|
-
y: number;
|
|
307
|
-
width: number;
|
|
308
|
-
height: number;
|
|
309
|
-
};
|
|
310
|
-
getSvgString(): string;
|
|
311
|
-
getSvgDataUri(): string;
|
|
312
|
-
drawTo(ctx: CanvasRenderingContext2D): void;
|
|
313
|
-
strokeTo(ctx: CanvasRenderingContext2D): void;
|
|
314
|
-
fillTo(ctx: CanvasRenderingContext2D): void;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
/**
|
|
318
|
-
* Bezier Curves formulas obtained from
|
|
319
|
-
* https://en.wikipedia.org/wiki/B%C3%A9zier_curve
|
|
320
|
-
*/
|
|
321
|
-
declare function catmullRom(t: number, p0: number, p1: number, p2: number, p3: number): number;
|
|
322
|
-
declare function quadraticBezier(t: number, p0: number, p1: number, p2: number): number;
|
|
323
|
-
declare function cubicBezier(t: number, p0: number, p1: number, p2: number, p3: number): number;
|
|
367
|
+
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
324
368
|
|
|
325
|
-
export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve,
|
|
369
|
+
export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };
|