modern-path2d 1.0.1 → 1.2.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 +30 -16
- package/dist/index.cjs +1711 -963
- package/dist/index.d.cts +299 -259
- package/dist/index.d.mts +299 -259
- package/dist/index.d.ts +299 -259
- package/dist/index.js +2 -2
- package/dist/index.mjs +1689 -951
- package/package.json +7 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,83 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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;
|
|
1
|
+
interface DrawPointOptions {
|
|
2
|
+
radius?: number;
|
|
64
3
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
4
|
+
declare function drawPoint(ctx: CanvasRenderingContext2D, x: number, y: number, options?: DrawPointOptions): void;
|
|
5
|
+
|
|
6
|
+
declare function catmullRom(t: number, p0: number, p1: number, p2: number, p3: number): number;
|
|
7
|
+
|
|
8
|
+
declare function cubicBezier(t: number, p0: number, p1: number, p2: number, p3: number): number;
|
|
9
|
+
|
|
10
|
+
interface FillTriangulateOptions {
|
|
11
|
+
holes?: number[];
|
|
12
|
+
vertices?: number[];
|
|
13
|
+
indices?: number[];
|
|
14
|
+
verticesStride?: number;
|
|
15
|
+
verticesOffset?: number;
|
|
16
|
+
indicesOffset?: number;
|
|
78
17
|
}
|
|
18
|
+
interface FillTriangulateResult {
|
|
19
|
+
vertices: number[];
|
|
20
|
+
indices: number[];
|
|
21
|
+
}
|
|
22
|
+
declare function fillTriangulate(points: number[], options?: FillTriangulateOptions): FillTriangulateResult;
|
|
23
|
+
|
|
24
|
+
declare function getAdaptiveCubicBezierCurvePoints(sX: number, sY: number, x1: number, y1: number, x2: number, y2: number, x: number, y: number, smoothness: number | undefined, points: number[]): number[];
|
|
79
25
|
|
|
80
|
-
declare function
|
|
26
|
+
declare function getAdaptiveQuadraticBezierCurvePoints(sX: number, sY: number, x1: number, y1: number, x: number, y: number, smoothness: number | undefined, points: number[]): number[];
|
|
27
|
+
|
|
28
|
+
declare function quadraticBezier(t: number, p0: number, p1: number, p2: number): number;
|
|
29
|
+
|
|
30
|
+
type LineCap = 'butt' | 'round' | 'square';
|
|
31
|
+
type LineJoin = 'round' | 'bevel' | 'miter';
|
|
32
|
+
interface StrokeTriangulateOptions {
|
|
33
|
+
vertices?: number[];
|
|
34
|
+
indices?: number[];
|
|
35
|
+
lineStyle?: LineStyle;
|
|
36
|
+
flipAlignment?: boolean;
|
|
37
|
+
closed?: boolean;
|
|
38
|
+
}
|
|
39
|
+
interface StrokeTriangulateResult {
|
|
40
|
+
vertices: number[];
|
|
41
|
+
indices: number[];
|
|
42
|
+
}
|
|
43
|
+
interface LineStyle {
|
|
44
|
+
width: number;
|
|
45
|
+
alignment: number;
|
|
46
|
+
join: LineJoin;
|
|
47
|
+
cap: LineCap;
|
|
48
|
+
miterLimit: number;
|
|
49
|
+
}
|
|
50
|
+
declare function strokeTriangulate(points: number[], options?: StrokeTriangulateOptions): StrokeTriangulateResult;
|
|
81
51
|
|
|
82
52
|
declare class Matrix3 {
|
|
83
53
|
elements: number[];
|
|
@@ -160,201 +130,197 @@ declare class BoundingBox {
|
|
|
160
130
|
}
|
|
161
131
|
|
|
162
132
|
declare abstract class Curve {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
133
|
+
startT: number;
|
|
134
|
+
endT: number;
|
|
135
|
+
arcLengthDivision: number;
|
|
136
|
+
protected _arcLengths?: number[];
|
|
167
137
|
abstract getPoint(t: number, output?: Vector2): Vector2;
|
|
168
138
|
getPointAt(u: number, output?: Vector2): Vector2;
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
139
|
+
isClockwise(): boolean;
|
|
140
|
+
getControlPointRefs(): Vector2[];
|
|
141
|
+
applyTransform(transform: Matrix3): this;
|
|
142
|
+
getUnevenPointArray(count?: number, output?: number[]): number[];
|
|
143
|
+
getSpacedPointArray(count?: number, output?: number[]): number[];
|
|
144
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
145
|
+
protected _pointArrayToPoint(array: number[], output?: Vector2[]): Vector2[];
|
|
146
|
+
getSpacedPoints(count?: number, output?: Vector2[]): Vector2[];
|
|
147
|
+
getUnevenPoints(count?: number, output?: Vector2[]): Vector2[];
|
|
148
|
+
getAdaptivePoints(output?: Vector2[]): Vector2[];
|
|
149
|
+
getPoints(count?: number, output?: Vector2[]): Vector2[];
|
|
173
150
|
getLength(): number;
|
|
174
|
-
getLengths(
|
|
175
|
-
|
|
151
|
+
getLengths(): number[];
|
|
152
|
+
updateLengths(): void;
|
|
176
153
|
getUToTMapping(u: number, distance?: number): number;
|
|
177
154
|
getTangent(t: number, output?: Vector2): Vector2;
|
|
178
155
|
getTangentAt(u: number, output?: Vector2): Vector2;
|
|
179
156
|
getNormal(t: number, output?: Vector2): Vector2;
|
|
180
157
|
getNormalAt(u: number, output?: Vector2): Vector2;
|
|
181
158
|
getTForPoint(target: VectorLike, epsilon?: number): number;
|
|
182
|
-
matrix(matrix: Matrix3): this;
|
|
183
159
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
184
160
|
min: Vector2;
|
|
185
161
|
max: Vector2;
|
|
186
162
|
};
|
|
187
163
|
getBoundingBox(): BoundingBox;
|
|
188
|
-
|
|
189
|
-
|
|
164
|
+
fillTriangulate(options?: FillTriangulateOptions): FillTriangulateResult;
|
|
165
|
+
strokeTriangulate(options?: StrokeTriangulateOptions): StrokeTriangulateResult;
|
|
166
|
+
toCommands(): Path2DCommand[];
|
|
167
|
+
toData(): Path2DData;
|
|
190
168
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
191
169
|
copy(source: Curve): this;
|
|
192
170
|
clone(): this;
|
|
193
171
|
}
|
|
194
172
|
|
|
195
|
-
declare class
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
173
|
+
declare class RoundCurve extends Curve {
|
|
174
|
+
_center: Vector2;
|
|
175
|
+
_radius: Vector2;
|
|
176
|
+
_diff: Vector2;
|
|
177
|
+
rotate: number;
|
|
178
|
+
startAngle: number;
|
|
179
|
+
endAngle: number;
|
|
180
|
+
clockwise: boolean;
|
|
181
|
+
get cx(): number;
|
|
182
|
+
set cx(val: number);
|
|
183
|
+
get cy(): number;
|
|
184
|
+
set cy(val: number);
|
|
185
|
+
get rx(): number;
|
|
186
|
+
set rx(val: number);
|
|
187
|
+
get ry(): number;
|
|
188
|
+
set ry(val: number);
|
|
189
|
+
get dx(): number;
|
|
190
|
+
set dx(val: number);
|
|
191
|
+
get dy(): number;
|
|
192
|
+
set dy(val: number);
|
|
193
|
+
constructor(_center: Vector2, _radius: Vector2, _diff: Vector2, rotate?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
|
|
194
|
+
isClockwise(): boolean;
|
|
195
|
+
getPoint(t: number, output?: Vector2): Vector2;
|
|
196
|
+
toCommands(): Path2DCommand[];
|
|
197
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
198
|
+
applyTransform(matrix: Matrix3): this;
|
|
199
|
+
getControlPointRefs(): Vector2[];
|
|
200
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
201
|
+
fillTriangulate(options?: FillTriangulateOptions): FillTriangulateResult;
|
|
205
202
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
206
203
|
min: Vector2;
|
|
207
204
|
max: Vector2;
|
|
208
205
|
};
|
|
206
|
+
copy(source: RoundCurve): this;
|
|
209
207
|
}
|
|
210
208
|
|
|
211
|
-
declare class
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
209
|
+
declare class ArcCurve extends RoundCurve {
|
|
210
|
+
readonly radius: number;
|
|
211
|
+
constructor(cx?: number, cy?: number, radius?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
|
|
212
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
213
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
declare class CompositeCurve<T extends Curve = Curve> extends Curve {
|
|
217
|
+
curves: T[];
|
|
218
|
+
constructor(curves?: T[]);
|
|
219
|
+
addCurve(curve: T): this;
|
|
217
220
|
getPoint(t: number, output?: Vector2): Vector2;
|
|
218
|
-
|
|
219
|
-
|
|
221
|
+
updateLengths(): void;
|
|
222
|
+
getControlPointRefs(): Vector2[];
|
|
223
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
220
224
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
221
225
|
min: Vector2;
|
|
222
226
|
max: Vector2;
|
|
223
227
|
};
|
|
224
|
-
|
|
228
|
+
getBoundingBox(): BoundingBox;
|
|
229
|
+
toCommands(): Path2DCommand[];
|
|
225
230
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
226
|
-
copy(source: CubicBezierCurve): this;
|
|
227
231
|
}
|
|
228
232
|
|
|
229
|
-
declare class
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
clockwise: boolean;
|
|
237
|
-
constructor(center?: Vector2, radiusX?: number, radiusY?: number, rotation?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
|
|
238
|
-
isClockwise(): boolean;
|
|
233
|
+
declare class CubicBezierCurve extends Curve {
|
|
234
|
+
p1: Vector2;
|
|
235
|
+
cp1: Vector2;
|
|
236
|
+
cp2: Vector2;
|
|
237
|
+
p2: Vector2;
|
|
238
|
+
static from(p1x: number, p1y: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, p2x: number, p2y: number): CubicBezierCurve;
|
|
239
|
+
constructor(p1: Vector2, cp1: Vector2, cp2: Vector2, p2: Vector2);
|
|
239
240
|
getPoint(t: number, output?: Vector2): Vector2;
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
getControlPoints(): Vector2[];
|
|
241
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
242
|
+
getControlPointRefs(): Vector2[];
|
|
243
|
+
protected _solveQuadratic(a: number, b: number, c: number): number[];
|
|
244
244
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
245
245
|
min: Vector2;
|
|
246
246
|
max: Vector2;
|
|
247
247
|
};
|
|
248
|
-
|
|
248
|
+
toCommands(): Path2DCommand[];
|
|
249
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
250
|
+
copy(source: CubicBezierCurve): this;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
declare class EllipseCurve extends RoundCurve {
|
|
254
|
+
constructor(cx?: number, cy?: number, rx?: number, ry?: number, rotate?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
|
|
255
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
249
256
|
}
|
|
250
257
|
|
|
251
258
|
declare class LineCurve extends Curve {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
259
|
+
p1: Vector2;
|
|
260
|
+
p2: Vector2;
|
|
261
|
+
static from(p1x: number, p1y: number, p2x: number, p2y: number): LineCurve;
|
|
262
|
+
constructor(p1: Vector2, p2: Vector2);
|
|
255
263
|
getPoint(t: number, output?: Vector2): Vector2;
|
|
256
264
|
getPointAt(u: number, output?: Vector2): Vector2;
|
|
257
265
|
getTangent(_t: number, output?: Vector2): Vector2;
|
|
258
266
|
getTangentAt(u: number, output?: Vector2): Vector2;
|
|
259
|
-
|
|
267
|
+
getControlPointRefs(): Vector2[];
|
|
268
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
260
269
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
261
270
|
min: Vector2;
|
|
262
271
|
max: Vector2;
|
|
263
272
|
};
|
|
264
|
-
toCommands():
|
|
273
|
+
toCommands(): Path2DCommand[];
|
|
265
274
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
266
275
|
copy(source: LineCurve): this;
|
|
267
276
|
}
|
|
268
277
|
|
|
269
|
-
declare class
|
|
270
|
-
center: Vector2;
|
|
271
|
-
size: number;
|
|
272
|
-
start: number;
|
|
273
|
-
end: number;
|
|
274
|
-
curves: (CircleCurve | LineCurve)[];
|
|
275
|
-
curveT: number;
|
|
276
|
-
constructor(center: Vector2, size: number, start?: number, end?: number);
|
|
277
|
-
update(): this;
|
|
278
|
-
getPoint(t: number): Vector2;
|
|
279
|
-
getPointAt(t: number): Vector2;
|
|
280
|
-
getCurve(t: number): CircleCurve | LineCurve;
|
|
281
|
-
getTangent(t: number, output?: Vector2): Vector2;
|
|
282
|
-
getNormal(t: number, output?: Vector2): Vector2;
|
|
283
|
-
getControlPoints(): Vector2[];
|
|
284
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
285
|
-
min: Vector2;
|
|
286
|
-
max: Vector2;
|
|
287
|
-
};
|
|
288
|
-
toCommands(): PathCommand[];
|
|
289
|
-
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
278
|
+
declare class PloygonCurve extends CompositeCurve<LineCurve> {
|
|
290
279
|
}
|
|
291
280
|
|
|
292
|
-
declare class
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
curves: LineCurve[];
|
|
299
|
-
curveT: number;
|
|
300
|
-
points: Vector2[];
|
|
301
|
-
constructor(center: Vector2, radius?: number, number?: number, start?: number, end?: number);
|
|
302
|
-
update(): this;
|
|
303
|
-
getCurve(t: number): LineCurve;
|
|
304
|
-
getPoint(t: number, output?: Vector2): Vector2;
|
|
305
|
-
getPointAt(u: number, output?: Vector2): Vector2;
|
|
306
|
-
getTangent(t: number, output?: Vector2): Vector2;
|
|
307
|
-
getNormal(t: number, output?: Vector2): Vector2;
|
|
308
|
-
getControlPoints(): Vector2[];
|
|
309
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
310
|
-
min: Vector2;
|
|
311
|
-
max: Vector2;
|
|
312
|
-
};
|
|
313
|
-
toCommands(): PathCommand[];
|
|
314
|
-
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
281
|
+
declare class EquilateralPloygonCurve extends PloygonCurve {
|
|
282
|
+
readonly cx: number;
|
|
283
|
+
readonly cy: number;
|
|
284
|
+
readonly radius: number;
|
|
285
|
+
readonly sideCount: number;
|
|
286
|
+
constructor(cx?: number, cy?: number, radius?: number, sideCount?: number);
|
|
315
287
|
}
|
|
316
288
|
|
|
317
289
|
declare class QuadraticBezierCurve extends Curve {
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
290
|
+
p1: Vector2;
|
|
291
|
+
cp: Vector2;
|
|
292
|
+
p2: Vector2;
|
|
293
|
+
static from(p1x: number, p1y: number, cpx: number, cpy: number, p2x: number, p2y: number): QuadraticBezierCurve;
|
|
294
|
+
constructor(p1: Vector2, cp: Vector2, p2: Vector2);
|
|
322
295
|
getPoint(t: number, output?: Vector2): Vector2;
|
|
323
|
-
|
|
296
|
+
getControlPointRefs(): Vector2[];
|
|
297
|
+
getAdaptivePointArray(output?: number[]): number[];
|
|
324
298
|
getMinMax(min?: Vector2, max?: Vector2): {
|
|
325
299
|
min: Vector2;
|
|
326
300
|
max: Vector2;
|
|
327
301
|
};
|
|
328
|
-
toCommands():
|
|
302
|
+
toCommands(): Path2DCommand[];
|
|
329
303
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
330
304
|
copy(source: QuadraticBezierCurve): this;
|
|
331
305
|
}
|
|
332
306
|
|
|
333
|
-
declare class
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
getTangent(t: number, output?: Vector2): Vector2;
|
|
351
|
-
getNormal(t: number, output?: Vector2): Vector2;
|
|
352
|
-
getControlPoints(): Vector2[];
|
|
353
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
354
|
-
min: Vector2;
|
|
355
|
-
max: Vector2;
|
|
356
|
-
};
|
|
357
|
-
toCommands(): PathCommand[];
|
|
307
|
+
declare class RectangleCurve extends PloygonCurve {
|
|
308
|
+
readonly x: number;
|
|
309
|
+
readonly y: number;
|
|
310
|
+
readonly width: number;
|
|
311
|
+
readonly height: number;
|
|
312
|
+
constructor(x?: number, y?: number, width?: number, height?: number);
|
|
313
|
+
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
314
|
+
fillTriangulate(options?: FillTriangulateOptions): FillTriangulateResult;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
declare class RoundRectangleCurve extends RoundCurve {
|
|
318
|
+
readonly x: number;
|
|
319
|
+
readonly y: number;
|
|
320
|
+
readonly width: number;
|
|
321
|
+
readonly height: number;
|
|
322
|
+
readonly radius: number;
|
|
323
|
+
constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
|
|
358
324
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
359
325
|
}
|
|
360
326
|
|
|
@@ -362,29 +328,76 @@ declare class SplineCurve extends Curve {
|
|
|
362
328
|
points: Vector2[];
|
|
363
329
|
constructor(points?: Vector2[]);
|
|
364
330
|
getPoint(t: number, output?: Vector2): Vector2;
|
|
365
|
-
|
|
331
|
+
getControlPointRefs(): Vector2[];
|
|
366
332
|
copy(source: SplineCurve): this;
|
|
367
333
|
}
|
|
368
334
|
|
|
369
|
-
|
|
370
|
-
|
|
335
|
+
/**
|
|
336
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
337
|
+
*/
|
|
338
|
+
type Path2DCommand = {
|
|
339
|
+
type: 'm' | 'M';
|
|
340
|
+
x: number;
|
|
341
|
+
y: number;
|
|
342
|
+
} | {
|
|
343
|
+
type: 'h' | 'H';
|
|
344
|
+
x: number;
|
|
345
|
+
} | {
|
|
346
|
+
type: 'v' | 'V';
|
|
347
|
+
y: number;
|
|
348
|
+
} | {
|
|
349
|
+
type: 'l' | 'L';
|
|
350
|
+
x: number;
|
|
351
|
+
y: number;
|
|
352
|
+
} | {
|
|
353
|
+
type: 'c' | 'C';
|
|
354
|
+
x1: number;
|
|
355
|
+
y1: number;
|
|
356
|
+
x2: number;
|
|
357
|
+
y2: number;
|
|
358
|
+
x: number;
|
|
359
|
+
y: number;
|
|
360
|
+
} | {
|
|
361
|
+
type: 's' | 'S';
|
|
362
|
+
x2: number;
|
|
363
|
+
y2: number;
|
|
364
|
+
x: number;
|
|
365
|
+
y: number;
|
|
366
|
+
} | {
|
|
367
|
+
type: 'q' | 'Q';
|
|
368
|
+
x1: number;
|
|
369
|
+
y1: number;
|
|
370
|
+
x: number;
|
|
371
|
+
y: number;
|
|
372
|
+
} | {
|
|
373
|
+
type: 't' | 'T';
|
|
374
|
+
x: number;
|
|
375
|
+
y: number;
|
|
376
|
+
} | {
|
|
377
|
+
type: 'a' | 'A';
|
|
378
|
+
rx: number;
|
|
379
|
+
ry: number;
|
|
380
|
+
angle: number;
|
|
381
|
+
largeArcFlag: number;
|
|
382
|
+
sweepFlag: number;
|
|
383
|
+
x: number;
|
|
384
|
+
y: number;
|
|
385
|
+
} | {
|
|
386
|
+
type: 'z' | 'Z';
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
declare class CurvePath extends CompositeCurve {
|
|
371
390
|
startPoint?: Vector2;
|
|
372
391
|
currentPoint?: Vector2;
|
|
373
392
|
autoClose: boolean;
|
|
374
|
-
protected _cacheLengths: number[];
|
|
375
393
|
constructor(points?: Vector2[]);
|
|
376
|
-
addCurve(curve: Curve): this;
|
|
377
394
|
addPoints(points: Vector2[]): this;
|
|
378
|
-
addCommands(commands:
|
|
395
|
+
addCommands(commands: Path2DCommand[]): this;
|
|
379
396
|
addData(data: string): this;
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
getLength(): number;
|
|
383
|
-
updateArcLengths(): void;
|
|
384
|
-
getCurveLengths(): number[];
|
|
385
|
-
getSpacedPoints(divisions?: number): Vector2[];
|
|
386
|
-
getPoints(divisions?: number): Vector2[];
|
|
397
|
+
getUnevenPointArray(count?: number, output?: number[]): number[];
|
|
398
|
+
getSpacedPointArray(count?: number, output?: number[]): number[];
|
|
387
399
|
protected _setCurrentPoint(point: VectorLike): this;
|
|
400
|
+
protected _connetLineTo(curve: Curve): this;
|
|
388
401
|
closePath(): this;
|
|
389
402
|
moveTo(x: number, y: number): this;
|
|
390
403
|
lineTo(x: number, y: number): this;
|
|
@@ -395,29 +408,56 @@ declare class CurvePath extends Curve {
|
|
|
395
408
|
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
396
409
|
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
397
410
|
relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
398
|
-
rect(x: number, y: number,
|
|
411
|
+
rect(x: number, y: number, width: number, height: number): this;
|
|
412
|
+
roundRect(x: number, y: number, width: number, height: number, radii: number): this;
|
|
399
413
|
splineThru(points: Vector2[]): this;
|
|
400
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
401
|
-
min: Vector2;
|
|
402
|
-
max: Vector2;
|
|
403
|
-
};
|
|
404
|
-
getBoundingBox(): BoundingBox;
|
|
405
|
-
toCommands(): PathCommand[];
|
|
406
414
|
drawTo(ctx: CanvasRenderingContext2D): this;
|
|
407
415
|
copy(source: CurvePath): this;
|
|
408
416
|
}
|
|
409
417
|
|
|
418
|
+
/**
|
|
419
|
+
* Svg path data
|
|
420
|
+
*
|
|
421
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
422
|
+
*/
|
|
423
|
+
type Path2DData = string;
|
|
424
|
+
|
|
425
|
+
type FillRule = 'nonzero' | 'evenodd';
|
|
426
|
+
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
427
|
+
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
428
|
+
interface Path2DDrawStyle {
|
|
429
|
+
fill: string | CanvasGradient | CanvasPattern;
|
|
430
|
+
stroke: string | CanvasGradient | CanvasPattern;
|
|
431
|
+
shadowColor: string;
|
|
432
|
+
shadowOffsetX: number;
|
|
433
|
+
shadowOffsetY: number;
|
|
434
|
+
shadowBlur: number;
|
|
435
|
+
}
|
|
436
|
+
interface Path2DStyle extends Path2DDrawStyle {
|
|
437
|
+
[key: string]: any;
|
|
438
|
+
fillOpacity: number;
|
|
439
|
+
fillRule: FillRule;
|
|
440
|
+
opacity: number;
|
|
441
|
+
strokeOpacity: number;
|
|
442
|
+
strokeWidth: number;
|
|
443
|
+
strokeLinecap: StrokeLinecap;
|
|
444
|
+
strokeLinejoin: StrokeLinejoin;
|
|
445
|
+
strokeMiterlimit: number;
|
|
446
|
+
strokeDasharray: number[];
|
|
447
|
+
strokeDashoffset: number;
|
|
448
|
+
visibility: string;
|
|
449
|
+
}
|
|
450
|
+
|
|
410
451
|
/**
|
|
411
452
|
* @link https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
|
|
412
453
|
*/
|
|
413
|
-
declare class Path2D {
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
style: Partial<PathStyle>;
|
|
454
|
+
declare class Path2D extends CompositeCurve<CurvePath> {
|
|
455
|
+
currentCurve: CurvePath;
|
|
456
|
+
style: Partial<Path2DStyle>;
|
|
417
457
|
get startPoint(): Vector2 | undefined;
|
|
418
458
|
get currentPoint(): Vector2 | undefined;
|
|
419
459
|
get strokeWidth(): number;
|
|
420
|
-
constructor(path?: Path2D |
|
|
460
|
+
constructor(path?: Path2D | Path2DCommand[] | Path2DData, style?: Partial<Path2DStyle>);
|
|
421
461
|
addPath(path: Path2D | CurvePath): this;
|
|
422
462
|
closePath(): this;
|
|
423
463
|
moveTo(x: number, y: number): this;
|
|
@@ -427,41 +467,43 @@ declare class Path2D {
|
|
|
427
467
|
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
428
468
|
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
429
469
|
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
|
|
430
|
-
rect(x: number, y: number,
|
|
431
|
-
|
|
432
|
-
|
|
470
|
+
rect(x: number, y: number, width: number, height: number): this;
|
|
471
|
+
roundRect(x: number, y: number, width: number, height: number, radii: number): this;
|
|
472
|
+
addCommands(commands: Path2DCommand[]): this;
|
|
473
|
+
addData(data: Path2DData): this;
|
|
433
474
|
splineThru(points: Vector2[]): this;
|
|
434
|
-
getControlPoints(): Vector2[];
|
|
435
|
-
getCurves(): Curve[];
|
|
436
475
|
scale(sx: number, sy?: number, target?: VectorLike): this;
|
|
437
476
|
skew(ax: number, ay?: number, target?: VectorLike): this;
|
|
438
477
|
rotate(a: number, target?: VectorLike): this;
|
|
439
478
|
bold(b: number): this;
|
|
440
|
-
|
|
479
|
+
applyTransform(transform: Matrix3): this;
|
|
441
480
|
getMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
|
|
442
481
|
min: Vector2;
|
|
443
482
|
max: Vector2;
|
|
444
483
|
};
|
|
445
484
|
getBoundingBox(withStyle?: boolean): BoundingBox;
|
|
446
|
-
drawTo(ctx: CanvasRenderingContext2D, style?: Partial<
|
|
447
|
-
drawControlPointsTo(ctx: CanvasRenderingContext2D, style?: Partial<
|
|
448
|
-
toCommands():
|
|
449
|
-
toData():
|
|
485
|
+
drawTo(ctx: CanvasRenderingContext2D, style?: Partial<Path2DStyle>): this;
|
|
486
|
+
drawControlPointsTo(ctx: CanvasRenderingContext2D, style?: Partial<Path2DStyle>): this;
|
|
487
|
+
toCommands(): Path2DCommand[];
|
|
488
|
+
toData(): Path2DData;
|
|
450
489
|
toSVGPathString(): string;
|
|
490
|
+
copy(source: Path2D): this;
|
|
491
|
+
clone(): this;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
declare class Path2DSet {
|
|
495
|
+
paths: Path2D[];
|
|
496
|
+
constructor(paths?: Path2D[]);
|
|
497
|
+
getBoundingBox(withStyle?: boolean): BoundingBox | undefined;
|
|
451
498
|
toSVGString(): string;
|
|
452
499
|
toSVGUrl(): string;
|
|
453
500
|
toSVG(): SVGElement;
|
|
454
|
-
toCanvas(options?: Partial<
|
|
501
|
+
toCanvas(options?: Partial<Path2DStyle & {
|
|
455
502
|
pixelRatio: number;
|
|
456
503
|
}>): HTMLCanvasElement;
|
|
457
|
-
copy(source: Path2D): this;
|
|
458
|
-
clone(): this;
|
|
459
504
|
}
|
|
460
505
|
|
|
461
|
-
|
|
462
|
-
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
463
|
-
*/
|
|
464
|
-
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
506
|
+
declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<Path2DStyle>): void;
|
|
465
507
|
|
|
466
508
|
/**
|
|
467
509
|
* @link https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
@@ -478,19 +520,17 @@ declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: numbe
|
|
|
478
520
|
*/
|
|
479
521
|
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
480
522
|
|
|
481
|
-
|
|
523
|
+
/**
|
|
524
|
+
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
525
|
+
*/
|
|
526
|
+
declare function svgPathCommandsAddToPath2D(commands: Path2DCommand[], path: Path2D | CurvePath): void;
|
|
527
|
+
|
|
528
|
+
declare function svgPathCommandsToData(commands: Path2DCommand[]): Path2DData;
|
|
482
529
|
|
|
483
|
-
declare function
|
|
530
|
+
declare function svgPathDataToCommands(data: Path2DData): Path2DCommand[];
|
|
484
531
|
|
|
485
|
-
declare function
|
|
486
|
-
declare function parseSVG(svg: string | SVGElement): Path2D[];
|
|
532
|
+
declare function svgToDom(svg: string | SVGElement): SVGElement;
|
|
487
533
|
|
|
488
|
-
declare function
|
|
489
|
-
declare function pathsToSVGString(paths: Path2D[]): string;
|
|
490
|
-
declare function pathsToSVGUrl(paths: Path2D[]): string;
|
|
491
|
-
declare function pathsToSVG(paths: Path2D[]): SVGElement;
|
|
492
|
-
declare function pathsToCanvas(paths: Path2D[], options?: Partial<PathStyle & {
|
|
493
|
-
pixelRatio: number;
|
|
494
|
-
}>): HTMLCanvasElement;
|
|
534
|
+
declare function svgToPath2DSet(svg: string | SVGElement): Path2DSet;
|
|
495
535
|
|
|
496
|
-
export { BoundingBox,
|
|
536
|
+
export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, type DrawPointOptions, EllipseCurve, EquilateralPloygonCurve, type FillRule, type FillTriangulateOptions, type FillTriangulateResult, type LineCap, LineCurve, type LineJoin, type LineStyle, Matrix3, Path2D, type Path2DCommand, type Path2DData, type Path2DDrawStyle, Path2DSet, type Path2DStyle, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, type StrokeTriangulateOptions, type StrokeTriangulateResult, Vector2, type VectorLike, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, parseArcCommand, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet };
|