@codehz/draw-call 0.5.1 → 0.5.3
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/{browser → dist/browser}/index.cjs +2 -40
- package/{node → dist/browser}/index.d.cts +1 -1
- package/dist/browser/index.d.ts +454 -0
- package/{browser → dist/browser}/index.js +1 -39
- package/{node → dist/node}/index.cjs +2 -40
- package/dist/node/index.d.cts +454 -0
- package/{node → dist/node}/index.d.mts +1 -1
- package/{node → dist/node}/index.mjs +1 -40
- package/examples/card.ts +1 -1
- package/examples/customdraw-basic.ts +1 -1
- package/examples/customdraw.ts +1 -1
- package/examples/demo.html +114 -0
- package/examples/demo.ts +1 -1
- package/examples/image-smoothing.ts +1 -1
- package/examples/richtext.ts +1 -1
- package/examples/transform.ts +1 -1
- package/package.json +55 -32
- package/browser/index.d.cts +0 -998
- package/browser/index.d.ts +0 -998
package/browser/index.d.ts
DELETED
|
@@ -1,998 +0,0 @@
|
|
|
1
|
-
import { ReadableStream } from "node:stream/web";
|
|
2
|
-
|
|
3
|
-
//#region src/types/base.d.ts
|
|
4
|
-
type Size = number | `${number}%` | "auto" | "fill";
|
|
5
|
-
interface ColorStop {
|
|
6
|
-
offset: number;
|
|
7
|
-
color: string;
|
|
8
|
-
}
|
|
9
|
-
interface LinearGradientDescriptor {
|
|
10
|
-
type: "linear-gradient";
|
|
11
|
-
angle: number;
|
|
12
|
-
stops: ColorStop[];
|
|
13
|
-
}
|
|
14
|
-
interface RadialGradientDescriptor {
|
|
15
|
-
type: "radial-gradient";
|
|
16
|
-
startX?: number;
|
|
17
|
-
startY?: number;
|
|
18
|
-
startRadius?: number;
|
|
19
|
-
endX?: number;
|
|
20
|
-
endY?: number;
|
|
21
|
-
endRadius?: number;
|
|
22
|
-
stops: ColorStop[];
|
|
23
|
-
}
|
|
24
|
-
type GradientDescriptor = LinearGradientDescriptor | RadialGradientDescriptor;
|
|
25
|
-
type Color = string | CanvasGradient | CanvasPattern | GradientDescriptor;
|
|
26
|
-
declare function linearGradient(angle: number, ...stops: (string | [number, string])[]): LinearGradientDescriptor;
|
|
27
|
-
declare function radialGradient(options: {
|
|
28
|
-
startX?: number;
|
|
29
|
-
startY?: number;
|
|
30
|
-
startRadius?: number;
|
|
31
|
-
endX?: number;
|
|
32
|
-
endY?: number;
|
|
33
|
-
endRadius?: number;
|
|
34
|
-
}, ...stops: (string | [number, string])[]): RadialGradientDescriptor;
|
|
35
|
-
interface Spacing {
|
|
36
|
-
top?: number;
|
|
37
|
-
right?: number;
|
|
38
|
-
bottom?: number;
|
|
39
|
-
left?: number;
|
|
40
|
-
}
|
|
41
|
-
interface Border {
|
|
42
|
-
width?: number;
|
|
43
|
-
color?: Color;
|
|
44
|
-
radius?: number | [number, number, number, number];
|
|
45
|
-
}
|
|
46
|
-
interface Shadow {
|
|
47
|
-
offsetX?: number;
|
|
48
|
-
offsetY?: number;
|
|
49
|
-
blur?: number;
|
|
50
|
-
color?: Color;
|
|
51
|
-
}
|
|
52
|
-
interface FontProps {
|
|
53
|
-
family?: string;
|
|
54
|
-
size?: number;
|
|
55
|
-
weight?: number | "normal" | "bold";
|
|
56
|
-
style?: "normal" | "italic";
|
|
57
|
-
}
|
|
58
|
-
interface StrokeProps {
|
|
59
|
-
color: Color;
|
|
60
|
-
width: number;
|
|
61
|
-
dash?: number[];
|
|
62
|
-
cap?: "butt" | "round" | "square";
|
|
63
|
-
join?: "miter" | "round" | "bevel";
|
|
64
|
-
}
|
|
65
|
-
interface Bounds {
|
|
66
|
-
x: number;
|
|
67
|
-
y: number;
|
|
68
|
-
width: number;
|
|
69
|
-
height: number;
|
|
70
|
-
}
|
|
71
|
-
//#endregion
|
|
72
|
-
//#region src/layout/utils/measure.d.ts
|
|
73
|
-
interface MeasureTextResult {
|
|
74
|
-
width: number;
|
|
75
|
-
height: number;
|
|
76
|
-
offset: number;
|
|
77
|
-
ascent: number;
|
|
78
|
-
descent: number;
|
|
79
|
-
}
|
|
80
|
-
interface MeasureContext {
|
|
81
|
-
measureText(text: string, font: FontProps): MeasureTextResult;
|
|
82
|
-
}
|
|
83
|
-
declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
|
|
84
|
-
//#endregion
|
|
85
|
-
//#region src/types/layout.d.ts
|
|
86
|
-
type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
|
|
87
|
-
type JustifyContent = "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
88
|
-
type AlignItems = "start" | "end" | "center" | "stretch" | "baseline";
|
|
89
|
-
type AlignSelf = "auto" | AlignItems;
|
|
90
|
-
interface LayoutProps {
|
|
91
|
-
width?: Size;
|
|
92
|
-
height?: Size;
|
|
93
|
-
minWidth?: number;
|
|
94
|
-
maxWidth?: number;
|
|
95
|
-
minHeight?: number;
|
|
96
|
-
maxHeight?: number;
|
|
97
|
-
margin?: number | Spacing;
|
|
98
|
-
padding?: number | Spacing;
|
|
99
|
-
flex?: number;
|
|
100
|
-
alignSelf?: AlignSelf;
|
|
101
|
-
}
|
|
102
|
-
interface ContainerLayoutProps extends LayoutProps {
|
|
103
|
-
direction?: FlexDirection;
|
|
104
|
-
justify?: JustifyContent;
|
|
105
|
-
align?: AlignItems;
|
|
106
|
-
gap?: number;
|
|
107
|
-
wrap?: boolean;
|
|
108
|
-
}
|
|
109
|
-
interface ComputedLayout {
|
|
110
|
-
x: number;
|
|
111
|
-
y: number;
|
|
112
|
-
width: number;
|
|
113
|
-
height: number;
|
|
114
|
-
contentX: number;
|
|
115
|
-
contentY: number;
|
|
116
|
-
contentWidth: number;
|
|
117
|
-
contentHeight: number;
|
|
118
|
-
}
|
|
119
|
-
interface RichTextSpanSegment {
|
|
120
|
-
text: string;
|
|
121
|
-
font: FontProps;
|
|
122
|
-
color: Color;
|
|
123
|
-
background: Color;
|
|
124
|
-
underline: boolean;
|
|
125
|
-
strikethrough: boolean;
|
|
126
|
-
width: number;
|
|
127
|
-
height: number;
|
|
128
|
-
ascent: number;
|
|
129
|
-
descent: number;
|
|
130
|
-
offset: number;
|
|
131
|
-
}
|
|
132
|
-
interface RichTextLine {
|
|
133
|
-
segments: RichTextSpanSegment[];
|
|
134
|
-
width: number;
|
|
135
|
-
height: number;
|
|
136
|
-
baseline: number;
|
|
137
|
-
}
|
|
138
|
-
interface LayoutNode {
|
|
139
|
-
element: Element;
|
|
140
|
-
layout: ComputedLayout;
|
|
141
|
-
children: LayoutNode[];
|
|
142
|
-
lines?: string[];
|
|
143
|
-
lineOffsets?: number[];
|
|
144
|
-
richLines?: RichTextLine[];
|
|
145
|
-
}
|
|
146
|
-
interface LayoutConstraints {
|
|
147
|
-
minWidth: number;
|
|
148
|
-
maxWidth: number;
|
|
149
|
-
minHeight: number;
|
|
150
|
-
maxHeight: number;
|
|
151
|
-
}
|
|
152
|
-
//#endregion
|
|
153
|
-
//#region src/types/components.d.ts
|
|
154
|
-
type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack" | "transform" | "customdraw";
|
|
155
|
-
interface ProxiedCanvasContextOptions {
|
|
156
|
-
inner?: () => void;
|
|
157
|
-
width: number;
|
|
158
|
-
height: number;
|
|
159
|
-
}
|
|
160
|
-
interface ElementBase {
|
|
161
|
-
type: ElementType;
|
|
162
|
-
}
|
|
163
|
-
interface BoxProps extends ContainerLayoutProps {
|
|
164
|
-
background?: Color;
|
|
165
|
-
border?: Border;
|
|
166
|
-
shadow?: Shadow;
|
|
167
|
-
opacity?: number;
|
|
168
|
-
clip?: boolean;
|
|
169
|
-
children?: Element[];
|
|
170
|
-
}
|
|
171
|
-
interface BoxElement extends ElementBase, BoxProps {
|
|
172
|
-
type: "box";
|
|
173
|
-
}
|
|
174
|
-
interface TextProps extends LayoutProps {
|
|
175
|
-
content: string;
|
|
176
|
-
font?: FontProps;
|
|
177
|
-
color?: Color;
|
|
178
|
-
align?: "left" | "center" | "right";
|
|
179
|
-
verticalAlign?: "top" | "middle" | "bottom";
|
|
180
|
-
lineHeight?: number;
|
|
181
|
-
maxLines?: number;
|
|
182
|
-
ellipsis?: boolean;
|
|
183
|
-
wrap?: boolean;
|
|
184
|
-
shadow?: Shadow;
|
|
185
|
-
stroke?: StrokeProps;
|
|
186
|
-
}
|
|
187
|
-
interface TextElement extends ElementBase, TextProps {
|
|
188
|
-
type: "text";
|
|
189
|
-
}
|
|
190
|
-
interface RichTextStyleProps {
|
|
191
|
-
font?: FontProps;
|
|
192
|
-
color?: Color;
|
|
193
|
-
background?: Color;
|
|
194
|
-
underline?: boolean;
|
|
195
|
-
strikethrough?: boolean;
|
|
196
|
-
}
|
|
197
|
-
interface RichTextSpan extends RichTextStyleProps {
|
|
198
|
-
text: string;
|
|
199
|
-
}
|
|
200
|
-
interface RichTextProps extends LayoutProps, RichTextStyleProps {
|
|
201
|
-
spans: RichTextSpan[];
|
|
202
|
-
lineHeight?: number;
|
|
203
|
-
align?: "left" | "center" | "right";
|
|
204
|
-
verticalAlign?: "top" | "middle" | "bottom";
|
|
205
|
-
maxLines?: number;
|
|
206
|
-
ellipsis?: boolean;
|
|
207
|
-
}
|
|
208
|
-
interface RichTextElement extends ElementBase, RichTextProps {
|
|
209
|
-
type: "richtext";
|
|
210
|
-
}
|
|
211
|
-
interface ImageProps extends LayoutProps {
|
|
212
|
-
src: ImageBitmap | CanvasImageSource;
|
|
213
|
-
fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
|
|
214
|
-
position?: {
|
|
215
|
-
x?: "left" | "center" | "right" | number;
|
|
216
|
-
y?: "top" | "center" | "bottom" | number;
|
|
217
|
-
};
|
|
218
|
-
border?: Border;
|
|
219
|
-
shadow?: Shadow;
|
|
220
|
-
opacity?: number;
|
|
221
|
-
}
|
|
222
|
-
interface ImageElement extends ElementBase, ImageProps {
|
|
223
|
-
type: "image";
|
|
224
|
-
}
|
|
225
|
-
interface SvgStyleProps {
|
|
226
|
-
fill?: Color | "none";
|
|
227
|
-
stroke?: StrokeProps;
|
|
228
|
-
opacity?: number;
|
|
229
|
-
}
|
|
230
|
-
interface SvgTransformProps {
|
|
231
|
-
transform?: {
|
|
232
|
-
translate?: [number, number]; /** 旋转角度(弧度)或 [angle(弧度), cx, cy](绕点旋转) */
|
|
233
|
-
rotate?: number | [number, number, number];
|
|
234
|
-
scale?: number | [number, number]; /** 水平偏移角度(弧度) */
|
|
235
|
-
skewX?: number; /** 垂直偏移角度(弧度) */
|
|
236
|
-
skewY?: number;
|
|
237
|
-
matrix?: [number, number, number, number, number, number];
|
|
238
|
-
};
|
|
239
|
-
}
|
|
240
|
-
interface SvgRectChild extends SvgStyleProps, SvgTransformProps {
|
|
241
|
-
type: "rect";
|
|
242
|
-
x?: number;
|
|
243
|
-
y?: number;
|
|
244
|
-
width: number;
|
|
245
|
-
height: number;
|
|
246
|
-
rx?: number;
|
|
247
|
-
ry?: number;
|
|
248
|
-
}
|
|
249
|
-
interface SvgCircleChild extends SvgStyleProps, SvgTransformProps {
|
|
250
|
-
type: "circle";
|
|
251
|
-
cx: number;
|
|
252
|
-
cy: number;
|
|
253
|
-
r: number;
|
|
254
|
-
}
|
|
255
|
-
interface SvgEllipseChild extends SvgStyleProps, SvgTransformProps {
|
|
256
|
-
type: "ellipse";
|
|
257
|
-
cx: number;
|
|
258
|
-
cy: number;
|
|
259
|
-
rx: number;
|
|
260
|
-
ry: number;
|
|
261
|
-
}
|
|
262
|
-
interface SvgLineChild extends SvgStyleProps, SvgTransformProps {
|
|
263
|
-
type: "line";
|
|
264
|
-
x1: number;
|
|
265
|
-
y1: number;
|
|
266
|
-
x2: number;
|
|
267
|
-
y2: number;
|
|
268
|
-
}
|
|
269
|
-
interface SvgPolylineChild extends SvgStyleProps, SvgTransformProps {
|
|
270
|
-
type: "polyline";
|
|
271
|
-
points: [number, number][];
|
|
272
|
-
}
|
|
273
|
-
interface SvgPolygonChild extends SvgStyleProps, SvgTransformProps {
|
|
274
|
-
type: "polygon";
|
|
275
|
-
points: [number, number][];
|
|
276
|
-
}
|
|
277
|
-
interface SvgPathChild extends SvgStyleProps, SvgTransformProps {
|
|
278
|
-
type: "path";
|
|
279
|
-
d: string;
|
|
280
|
-
}
|
|
281
|
-
interface SvgTextChild extends SvgStyleProps, SvgTransformProps {
|
|
282
|
-
type: "text";
|
|
283
|
-
x?: number;
|
|
284
|
-
y?: number;
|
|
285
|
-
content: string;
|
|
286
|
-
font?: FontProps;
|
|
287
|
-
textAnchor?: "start" | "middle" | "end";
|
|
288
|
-
dominantBaseline?: "auto" | "middle" | "hanging";
|
|
289
|
-
}
|
|
290
|
-
interface SvgGroupChild extends SvgStyleProps, SvgTransformProps {
|
|
291
|
-
type: "g";
|
|
292
|
-
children: SvgChild[];
|
|
293
|
-
}
|
|
294
|
-
type SvgChild = SvgRectChild | SvgCircleChild | SvgEllipseChild | SvgLineChild | SvgPolylineChild | SvgPolygonChild | SvgPathChild | SvgTextChild | SvgGroupChild;
|
|
295
|
-
type SvgAlign = "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax";
|
|
296
|
-
interface SvgProps extends LayoutProps {
|
|
297
|
-
viewBox?: {
|
|
298
|
-
x?: number;
|
|
299
|
-
y?: number;
|
|
300
|
-
width: number;
|
|
301
|
-
height: number;
|
|
302
|
-
};
|
|
303
|
-
preserveAspectRatio?: {
|
|
304
|
-
align?: SvgAlign;
|
|
305
|
-
meetOrSlice?: "meet" | "slice";
|
|
306
|
-
};
|
|
307
|
-
children: SvgChild[];
|
|
308
|
-
background?: Color;
|
|
309
|
-
shadow?: Shadow;
|
|
310
|
-
}
|
|
311
|
-
interface SvgElement extends ElementBase, SvgProps {
|
|
312
|
-
type: "svg";
|
|
313
|
-
}
|
|
314
|
-
type StackAlign = "start" | "end" | "center";
|
|
315
|
-
interface StackProps extends LayoutProps {
|
|
316
|
-
children: Element[];
|
|
317
|
-
background?: Color;
|
|
318
|
-
border?: Border;
|
|
319
|
-
shadow?: Shadow;
|
|
320
|
-
opacity?: number;
|
|
321
|
-
clip?: boolean;
|
|
322
|
-
/** 水平对齐方式(默认 start) */
|
|
323
|
-
align?: StackAlign;
|
|
324
|
-
/** 垂直对齐方式(默认 start) */
|
|
325
|
-
justify?: StackAlign;
|
|
326
|
-
}
|
|
327
|
-
interface StackElement extends ElementBase, StackProps {
|
|
328
|
-
type: "stack";
|
|
329
|
-
}
|
|
330
|
-
interface TransformSimpleObject {
|
|
331
|
-
translate?: [number, number];
|
|
332
|
-
/** 旋转角度(弧度)或 [angle(弧度), cx, cy](绕点旋转) */
|
|
333
|
-
rotate?: number | [number, number, number];
|
|
334
|
-
scale?: number | [number, number];
|
|
335
|
-
/** 水平偏移角度(弧度) */
|
|
336
|
-
skewX?: number;
|
|
337
|
-
/** 垂直偏移角度(弧度) */
|
|
338
|
-
skewY?: number;
|
|
339
|
-
}
|
|
340
|
-
interface DOMMatrix2DInit$1 {
|
|
341
|
-
a?: number;
|
|
342
|
-
b?: number;
|
|
343
|
-
c?: number;
|
|
344
|
-
d?: number;
|
|
345
|
-
e?: number;
|
|
346
|
-
f?: number;
|
|
347
|
-
}
|
|
348
|
-
type TransformValue = TransformSimpleObject | DOMMatrix2DInit$1 | [number, number, number, number, number, number];
|
|
349
|
-
interface TransformProps {
|
|
350
|
-
children: Element;
|
|
351
|
-
/** 变换值(rotate/skew 使用弧度) */
|
|
352
|
-
transform?: TransformValue;
|
|
353
|
-
/** 变换原点,默认为 [0, 0](左上角) */
|
|
354
|
-
transformOrigin?: [number | string, number | string];
|
|
355
|
-
}
|
|
356
|
-
interface TransformElement extends ElementBase, TransformProps {
|
|
357
|
-
type: "transform";
|
|
358
|
-
}
|
|
359
|
-
interface CustomDrawProps extends LayoutProps {
|
|
360
|
-
draw: (ctx: CanvasRenderingContext2D, options: ProxiedCanvasContextOptions) => void;
|
|
361
|
-
children?: Element;
|
|
362
|
-
}
|
|
363
|
-
interface CustomDrawElement extends ElementBase, CustomDrawProps {
|
|
364
|
-
type: "customdraw";
|
|
365
|
-
}
|
|
366
|
-
type LayoutElement = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | CustomDrawElement;
|
|
367
|
-
type Element = LayoutElement | TransformElement;
|
|
368
|
-
//#endregion
|
|
369
|
-
//#region node_modules/@napi-rs/canvas/index.d.ts
|
|
370
|
-
interface CanvasRenderingContext2D$1 extends CanvasCompositing, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageData, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasSettings, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform, CanvasPDFAnnotations {}
|
|
371
|
-
interface CanvasState {
|
|
372
|
-
isContextLost(): boolean;
|
|
373
|
-
reset(): void;
|
|
374
|
-
restore(): void;
|
|
375
|
-
save(): void;
|
|
376
|
-
}
|
|
377
|
-
interface CanvasShadowStyles {
|
|
378
|
-
shadowBlur: number;
|
|
379
|
-
shadowColor: string;
|
|
380
|
-
shadowOffsetX: number;
|
|
381
|
-
shadowOffsetY: number;
|
|
382
|
-
}
|
|
383
|
-
interface CanvasRenderingContext2DSettings {
|
|
384
|
-
alpha?: boolean;
|
|
385
|
-
colorSpace?: PredefinedColorSpace;
|
|
386
|
-
desynchronized?: boolean;
|
|
387
|
-
willReadFrequently?: boolean;
|
|
388
|
-
}
|
|
389
|
-
interface CanvasSettings {
|
|
390
|
-
getContextAttributes(): CanvasRenderingContext2DSettings;
|
|
391
|
-
}
|
|
392
|
-
interface CanvasRect {
|
|
393
|
-
clearRect(x: number, y: number, w: number, h: number): void;
|
|
394
|
-
fillRect(x: number, y: number, w: number, h: number): void;
|
|
395
|
-
strokeRect(x: number, y: number, w: number, h: number): void;
|
|
396
|
-
}
|
|
397
|
-
interface TextMetrics {
|
|
398
|
-
readonly actualBoundingBoxAscent: number;
|
|
399
|
-
readonly actualBoundingBoxDescent: number;
|
|
400
|
-
readonly actualBoundingBoxLeft: number;
|
|
401
|
-
readonly actualBoundingBoxRight: number;
|
|
402
|
-
readonly alphabeticBaseline: number;
|
|
403
|
-
readonly emHeightAscent: number;
|
|
404
|
-
readonly emHeightDescent: number;
|
|
405
|
-
readonly fontBoundingBoxAscent: number;
|
|
406
|
-
readonly fontBoundingBoxDescent: number;
|
|
407
|
-
readonly hangingBaseline: number;
|
|
408
|
-
readonly ideographicBaseline: number;
|
|
409
|
-
readonly width: number;
|
|
410
|
-
}
|
|
411
|
-
interface CanvasText {
|
|
412
|
-
fillText(text: string, x: number, y: number, maxWidth?: number): void;
|
|
413
|
-
measureText(text: string): TextMetrics;
|
|
414
|
-
strokeText(text: string, x: number, y: number, maxWidth?: number): void;
|
|
415
|
-
}
|
|
416
|
-
type CanvasLineCap = 'butt' | 'round' | 'square';
|
|
417
|
-
type CanvasLineJoin = 'bevel' | 'miter' | 'round';
|
|
418
|
-
interface CanvasPathDrawingStyles {
|
|
419
|
-
lineCap: CanvasLineCap;
|
|
420
|
-
lineDashOffset: number;
|
|
421
|
-
lineJoin: CanvasLineJoin;
|
|
422
|
-
lineWidth: number;
|
|
423
|
-
miterLimit: number;
|
|
424
|
-
getLineDash(): number[];
|
|
425
|
-
setLineDash(segments: number[]): void;
|
|
426
|
-
}
|
|
427
|
-
interface CanvasPath {
|
|
428
|
-
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
|
|
429
|
-
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
|
|
430
|
-
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
|
|
431
|
-
closePath(): void;
|
|
432
|
-
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
|
|
433
|
-
lineTo(x: number, y: number): void;
|
|
434
|
-
moveTo(x: number, y: number): void;
|
|
435
|
-
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
|
|
436
|
-
rect(x: number, y: number, w: number, h: number): void;
|
|
437
|
-
roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]): void;
|
|
438
|
-
}
|
|
439
|
-
type ImageSmoothingQuality = 'high' | 'low' | 'medium';
|
|
440
|
-
interface CanvasImageSmoothing {
|
|
441
|
-
imageSmoothingEnabled: boolean;
|
|
442
|
-
imageSmoothingQuality: ImageSmoothingQuality;
|
|
443
|
-
}
|
|
444
|
-
interface CanvasTransform {
|
|
445
|
-
resetTransform(): void;
|
|
446
|
-
rotate(angle: number): void;
|
|
447
|
-
scale(x: number, y: number): void;
|
|
448
|
-
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
|
449
|
-
setTransform(transform?: DOMMatrix2DInit): void;
|
|
450
|
-
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
|
451
|
-
translate(x: number, y: number): void;
|
|
452
|
-
}
|
|
453
|
-
interface CanvasPDFAnnotations {
|
|
454
|
-
/**
|
|
455
|
-
* Create a clickable URL link annotation in a PDF document.
|
|
456
|
-
* This is only effective when used with PDF documents.
|
|
457
|
-
* @param left - Left coordinate of the link rectangle
|
|
458
|
-
* @param top - Top coordinate of the link rectangle
|
|
459
|
-
* @param right - Right coordinate of the link rectangle
|
|
460
|
-
* @param bottom - Bottom coordinate of the link rectangle
|
|
461
|
-
* @param url - The URL to link to
|
|
462
|
-
*/
|
|
463
|
-
annotateLinkUrl(left: number, top: number, right: number, bottom: number, url: string): void;
|
|
464
|
-
/**
|
|
465
|
-
* Create a named destination at a specific point in a PDF document.
|
|
466
|
-
* This destination can be used as a target for internal links.
|
|
467
|
-
* @param x - X coordinate of the destination point
|
|
468
|
-
* @param y - Y coordinate of the destination point
|
|
469
|
-
* @param name - Name identifier for the destination
|
|
470
|
-
*/
|
|
471
|
-
annotateNamedDestination(x: number, y: number, name: string): void;
|
|
472
|
-
/**
|
|
473
|
-
* Create a link to a named destination within the PDF document.
|
|
474
|
-
* This is only effective when used with PDF documents.
|
|
475
|
-
* @param left - Left coordinate of the link rectangle
|
|
476
|
-
* @param top - Top coordinate of the link rectangle
|
|
477
|
-
* @param right - Right coordinate of the link rectangle
|
|
478
|
-
* @param bottom - Bottom coordinate of the link rectangle
|
|
479
|
-
* @param name - Name of the destination to link to
|
|
480
|
-
*/
|
|
481
|
-
annotateLinkToDestination(left: number, top: number, right: number, bottom: number, name: string): void;
|
|
482
|
-
}
|
|
483
|
-
type PredefinedColorSpace = 'display-p3' | 'srgb';
|
|
484
|
-
interface ImageDataSettings {
|
|
485
|
-
colorSpace?: PredefinedColorSpace;
|
|
486
|
-
}
|
|
487
|
-
interface CanvasImageData {
|
|
488
|
-
createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData;
|
|
489
|
-
createImageData(imagedata: ImageData): ImageData;
|
|
490
|
-
getImageData(sx: number, sy: number, sw: number, sh: number, settings?: ImageDataSettings): ImageData;
|
|
491
|
-
putImageData(imagedata: ImageData, dx: number, dy: number): void;
|
|
492
|
-
putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;
|
|
493
|
-
}
|
|
494
|
-
type CanvasDirection = 'inherit' | 'ltr' | 'rtl';
|
|
495
|
-
type CanvasFontKerning = 'auto' | 'none' | 'normal';
|
|
496
|
-
type CanvasFontStretch = 'condensed' | 'expanded' | 'extra-condensed' | 'extra-expanded' | 'normal' | 'semi-condensed' | 'semi-expanded' | 'ultra-condensed' | 'ultra-expanded';
|
|
497
|
-
type CanvasFontVariantCaps = 'all-petite-caps' | 'all-small-caps' | 'normal' | 'petite-caps' | 'small-caps' | 'titling-caps' | 'unicase';
|
|
498
|
-
type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
|
|
499
|
-
type CanvasTextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
|
|
500
|
-
type CanvasTextRendering = 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed';
|
|
501
|
-
interface CanvasTextDrawingStyles {
|
|
502
|
-
direction: CanvasDirection;
|
|
503
|
-
font: string;
|
|
504
|
-
fontKerning: CanvasFontKerning;
|
|
505
|
-
fontStretch: CanvasFontStretch;
|
|
506
|
-
fontVariantCaps: CanvasFontVariantCaps;
|
|
507
|
-
letterSpacing: string;
|
|
508
|
-
textAlign: CanvasTextAlign;
|
|
509
|
-
textBaseline: CanvasTextBaseline;
|
|
510
|
-
textRendering: CanvasTextRendering;
|
|
511
|
-
wordSpacing: string;
|
|
512
|
-
fontVariationSettings: string;
|
|
513
|
-
lang: string;
|
|
514
|
-
}
|
|
515
|
-
interface CanvasFilters {
|
|
516
|
-
filter: string;
|
|
517
|
-
}
|
|
518
|
-
interface CanvasFillStrokeStyles {
|
|
519
|
-
fillStyle: string | CanvasGradient$1 | CanvasPattern$1;
|
|
520
|
-
strokeStyle: string | CanvasGradient$1 | CanvasPattern$1;
|
|
521
|
-
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient$1;
|
|
522
|
-
createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient$1;
|
|
523
|
-
createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient$1;
|
|
524
|
-
}
|
|
525
|
-
type CanvasFillRule = 'evenodd' | 'nonzero';
|
|
526
|
-
interface CanvasDrawPath {
|
|
527
|
-
beginPath(): void;
|
|
528
|
-
clip(fillRule?: CanvasFillRule): void;
|
|
529
|
-
clip(path: Path2D, fillRule?: CanvasFillRule): void;
|
|
530
|
-
fill(fillRule?: CanvasFillRule): void;
|
|
531
|
-
fill(path: Path2D, fillRule?: CanvasFillRule): void;
|
|
532
|
-
isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
|
|
533
|
-
isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
|
|
534
|
-
isPointInStroke(x: number, y: number): boolean;
|
|
535
|
-
isPointInStroke(path: Path2D, x: number, y: number): boolean;
|
|
536
|
-
stroke(): void;
|
|
537
|
-
stroke(path: Path2D): void;
|
|
538
|
-
}
|
|
539
|
-
type GlobalCompositeOperation = 'color' | 'color-burn' | 'color-dodge' | 'copy' | 'darken' | 'destination-atop' | 'destination-in' | 'destination-out' | 'destination-over' | 'difference' | 'exclusion' | 'hard-light' | 'hue' | 'lighten' | 'lighter' | 'luminosity' | 'multiply' | 'overlay' | 'saturation' | 'screen' | 'soft-light' | 'source-atop' | 'source-in' | 'source-out' | 'source-over' | 'xor';
|
|
540
|
-
interface CanvasCompositing {
|
|
541
|
-
globalAlpha: number;
|
|
542
|
-
globalCompositeOperation: GlobalCompositeOperation;
|
|
543
|
-
}
|
|
544
|
-
interface DOMPointInit {
|
|
545
|
-
w?: number;
|
|
546
|
-
x?: number;
|
|
547
|
-
y?: number;
|
|
548
|
-
z?: number;
|
|
549
|
-
}
|
|
550
|
-
interface CanvasPattern$1 {
|
|
551
|
-
setTransform(transform?: DOMMatrix2DInit): void;
|
|
552
|
-
}
|
|
553
|
-
interface CanvasGradient$1 {
|
|
554
|
-
addColorStop(offset: number, color: string): void;
|
|
555
|
-
}
|
|
556
|
-
interface DOMMatrixInit extends DOMMatrix2DInit {
|
|
557
|
-
is2D?: boolean;
|
|
558
|
-
m13?: number;
|
|
559
|
-
m14?: number;
|
|
560
|
-
m23?: number;
|
|
561
|
-
m24?: number;
|
|
562
|
-
m31?: number;
|
|
563
|
-
m32?: number;
|
|
564
|
-
m33?: number;
|
|
565
|
-
m34?: number;
|
|
566
|
-
m43?: number;
|
|
567
|
-
m44?: number;
|
|
568
|
-
} // ----------- added types
|
|
569
|
-
interface DOMMatrix2DInit {
|
|
570
|
-
a: number;
|
|
571
|
-
b: number;
|
|
572
|
-
c: number;
|
|
573
|
-
d: number;
|
|
574
|
-
e: number;
|
|
575
|
-
f: number;
|
|
576
|
-
}
|
|
577
|
-
interface DOMMatrixReadOnly {
|
|
578
|
-
readonly a: number;
|
|
579
|
-
readonly b: number;
|
|
580
|
-
readonly c: number;
|
|
581
|
-
readonly d: number;
|
|
582
|
-
readonly e: number;
|
|
583
|
-
readonly f: number;
|
|
584
|
-
readonly is2D: boolean;
|
|
585
|
-
readonly isIdentity: boolean;
|
|
586
|
-
readonly m11: number;
|
|
587
|
-
readonly m12: number;
|
|
588
|
-
readonly m13: number;
|
|
589
|
-
readonly m14: number;
|
|
590
|
-
readonly m21: number;
|
|
591
|
-
readonly m22: number;
|
|
592
|
-
readonly m23: number;
|
|
593
|
-
readonly m24: number;
|
|
594
|
-
readonly m31: number;
|
|
595
|
-
readonly m32: number;
|
|
596
|
-
readonly m33: number;
|
|
597
|
-
readonly m34: number;
|
|
598
|
-
readonly m41: number;
|
|
599
|
-
readonly m42: number;
|
|
600
|
-
readonly m43: number;
|
|
601
|
-
readonly m44: number;
|
|
602
|
-
flipX(): DOMMatrix;
|
|
603
|
-
flipY(): DOMMatrix;
|
|
604
|
-
inverse(): DOMMatrix;
|
|
605
|
-
multiply(other?: DOMMatrixInit): DOMMatrix;
|
|
606
|
-
rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
|
|
607
|
-
rotateAxisAngle(x?: number, y?: number, z?: number, angle?: number): DOMMatrix;
|
|
608
|
-
rotateFromVector(x?: number, y?: number): DOMMatrix;
|
|
609
|
-
scale(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
|
|
610
|
-
scale3d(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
|
|
611
|
-
skewX(sx?: number): DOMMatrix;
|
|
612
|
-
skewY(sy?: number): DOMMatrix;
|
|
613
|
-
toFloat32Array(): Float32Array;
|
|
614
|
-
toFloat64Array(): Float64Array;
|
|
615
|
-
transformPoint(point?: DOMPointInit): DOMPoint;
|
|
616
|
-
translate(tx?: number, ty?: number, tz?: number): DOMMatrix;
|
|
617
|
-
toString(): string;
|
|
618
|
-
}
|
|
619
|
-
interface DOMMatrix extends DOMMatrixReadOnly {
|
|
620
|
-
a: number;
|
|
621
|
-
b: number;
|
|
622
|
-
c: number;
|
|
623
|
-
d: number;
|
|
624
|
-
e: number;
|
|
625
|
-
f: number;
|
|
626
|
-
m11: number;
|
|
627
|
-
m12: number;
|
|
628
|
-
m13: number;
|
|
629
|
-
m14: number;
|
|
630
|
-
m21: number;
|
|
631
|
-
m22: number;
|
|
632
|
-
m23: number;
|
|
633
|
-
m24: number;
|
|
634
|
-
m31: number;
|
|
635
|
-
m32: number;
|
|
636
|
-
m33: number;
|
|
637
|
-
m34: number;
|
|
638
|
-
m41: number;
|
|
639
|
-
m42: number;
|
|
640
|
-
m43: number;
|
|
641
|
-
m44: number;
|
|
642
|
-
invertSelf(): DOMMatrix;
|
|
643
|
-
multiplySelf(other?: DOMMatrixInit): DOMMatrix;
|
|
644
|
-
preMultiplySelf(other?: DOMMatrixInit): DOMMatrix;
|
|
645
|
-
rotateAxisAngleSelf(x?: number, y?: number, z?: number, angle?: number): DOMMatrix;
|
|
646
|
-
rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
|
|
647
|
-
rotateSelf(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
|
|
648
|
-
scale3dSelf(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
|
|
649
|
-
scaleSelf(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
|
|
650
|
-
setMatrixValue(transformList: string): DOMMatrix;
|
|
651
|
-
skewXSelf(sx?: number): DOMMatrix;
|
|
652
|
-
skewYSelf(sy?: number): DOMMatrix;
|
|
653
|
-
translateSelf(tx?: number, ty?: number, tz?: number): DOMMatrix;
|
|
654
|
-
toJSON(): { [K in OmitNeverOfMatrix]: DOMMatrix[K] };
|
|
655
|
-
}
|
|
656
|
-
type OmitMatrixMethod = { [K in keyof DOMMatrix]: DOMMatrix[K] extends ((...args: any[]) => any) ? never : K };
|
|
657
|
-
type OmitNeverOfMatrix = OmitMatrixMethod[keyof OmitMatrixMethod];
|
|
658
|
-
declare const DOMMatrix: {
|
|
659
|
-
prototype: DOMMatrix;
|
|
660
|
-
new (init?: string | number[]): DOMMatrix;
|
|
661
|
-
fromFloat32Array(array32: Float32Array): DOMMatrix;
|
|
662
|
-
fromFloat64Array(array64: Float64Array): DOMMatrix;
|
|
663
|
-
fromMatrix(other?: DOMMatrixInit): DOMMatrix;
|
|
664
|
-
};
|
|
665
|
-
interface DOMPointReadOnly {
|
|
666
|
-
readonly w: number;
|
|
667
|
-
readonly x: number;
|
|
668
|
-
readonly y: number;
|
|
669
|
-
readonly z: number;
|
|
670
|
-
matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
|
|
671
|
-
}
|
|
672
|
-
interface DOMPoint extends DOMPointReadOnly {
|
|
673
|
-
w: number;
|
|
674
|
-
x: number;
|
|
675
|
-
y: number;
|
|
676
|
-
z: number;
|
|
677
|
-
toJSON(): Omit<DOMPoint, 'matrixTransform' | 'toJSON'>;
|
|
678
|
-
}
|
|
679
|
-
declare const DOMPoint: {
|
|
680
|
-
prototype: DOMPoint;
|
|
681
|
-
new (x?: number, y?: number, z?: number, w?: number): DOMPoint;
|
|
682
|
-
fromPoint(other?: DOMPointInit): DOMPoint;
|
|
683
|
-
};
|
|
684
|
-
declare class ImageData {
|
|
685
|
-
/**
|
|
686
|
-
* Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.
|
|
687
|
-
*/
|
|
688
|
-
readonly data: Uint8ClampedArray;
|
|
689
|
-
/**
|
|
690
|
-
* Returns the actual dimensions of the data in the ImageData object, in pixels.
|
|
691
|
-
*/
|
|
692
|
-
readonly height: number;
|
|
693
|
-
/**
|
|
694
|
-
* Returns the actual dimensions of the data in the ImageData object, in pixels.
|
|
695
|
-
*/
|
|
696
|
-
readonly width: number;
|
|
697
|
-
constructor(sw: number, sh: number, attr?: {
|
|
698
|
-
colorSpace?: ColorSpace;
|
|
699
|
-
});
|
|
700
|
-
constructor(imageData: ImageData, attr?: {
|
|
701
|
-
colorSpace?: ColorSpace;
|
|
702
|
-
});
|
|
703
|
-
constructor(data: Uint8ClampedArray | Uint16Array | Float16Array | Float32Array, sw: number, sh?: number);
|
|
704
|
-
}
|
|
705
|
-
declare class Image$1 {
|
|
706
|
-
constructor(); // attrs only affects SVG
|
|
707
|
-
constructor(width: number, height: number, attrs?: {
|
|
708
|
-
colorSpace?: ColorSpace;
|
|
709
|
-
});
|
|
710
|
-
width: number;
|
|
711
|
-
height: number;
|
|
712
|
-
readonly naturalWidth: number;
|
|
713
|
-
readonly naturalHeight: number;
|
|
714
|
-
readonly complete: boolean;
|
|
715
|
-
readonly currentSrc: string | null;
|
|
716
|
-
alt: string; // the src can be a Uint8Array or a string
|
|
717
|
-
// if it's a string, it can be a file path, a data URL, a remote URL, or a SVG string
|
|
718
|
-
src: Uint8Array | string;
|
|
719
|
-
onload?(): void;
|
|
720
|
-
onerror?(err: Error): void;
|
|
721
|
-
decode(): Promise<void>;
|
|
722
|
-
}
|
|
723
|
-
declare class Path2D {
|
|
724
|
-
constructor(path?: Path2D | string);
|
|
725
|
-
addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
|
|
726
|
-
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
|
|
727
|
-
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
|
|
728
|
-
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
|
|
729
|
-
closePath(): void;
|
|
730
|
-
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
|
|
731
|
-
lineTo(x: number, y: number): void;
|
|
732
|
-
moveTo(x: number, y: number): void;
|
|
733
|
-
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
|
|
734
|
-
rect(x: number, y: number, w: number, h: number): void;
|
|
735
|
-
roundRect(x: number, y: number, w: number, h: number, radii?: number | number[]): void; // PathKit methods
|
|
736
|
-
op(path: Path2D, operation: PathOp): Path2D;
|
|
737
|
-
toSVGString(): string;
|
|
738
|
-
getFillType(): FillType;
|
|
739
|
-
getFillTypeString(): string;
|
|
740
|
-
setFillType(type: FillType): void;
|
|
741
|
-
simplify(): Path2D;
|
|
742
|
-
asWinding(): Path2D;
|
|
743
|
-
stroke(stroke?: StrokeOptions): Path2D;
|
|
744
|
-
transform(transform: DOMMatrix2DInit): Path2D;
|
|
745
|
-
getBounds(): [left: number, top: number, right: number, bottom: number];
|
|
746
|
-
computeTightBounds(): [left: number, top: number, right: number, bottom: number];
|
|
747
|
-
trim(start: number, end: number, isComplement?: boolean): Path2D;
|
|
748
|
-
dash(on: number, off: number, phase: number): Path2D;
|
|
749
|
-
round(radius: number): Path2D;
|
|
750
|
-
equals(path: Path2D): boolean;
|
|
751
|
-
}
|
|
752
|
-
interface StrokeOptions {
|
|
753
|
-
width?: number;
|
|
754
|
-
miterLimit?: number;
|
|
755
|
-
cap?: StrokeCap;
|
|
756
|
-
join?: StrokeJoin;
|
|
757
|
-
}
|
|
758
|
-
interface SKRSContext2D extends CanvasRenderingContext2D$1 {
|
|
759
|
-
canvas: Canvas;
|
|
760
|
-
/**
|
|
761
|
-
* @param startAngle The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
|
|
762
|
-
* @param x The x-axis coordinate of the centre of the gradient.
|
|
763
|
-
* @param y The y-axis coordinate of the centre of the gradient.
|
|
764
|
-
*/
|
|
765
|
-
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient$1;
|
|
766
|
-
drawImage(image: Image$1 | Canvas, dx: number, dy: number): void;
|
|
767
|
-
drawImage(image: Image$1 | Canvas, dx: number, dy: number, dw: number, dh: number): void;
|
|
768
|
-
drawImage(image: Image$1 | Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
|
|
769
|
-
createPattern(image: Image$1 | ImageData | Canvas | SvgCanvas, repeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | null): CanvasPattern$1;
|
|
770
|
-
getContextAttributes(): {
|
|
771
|
-
alpha: boolean;
|
|
772
|
-
desynchronized: boolean;
|
|
773
|
-
};
|
|
774
|
-
getTransform(): DOMMatrix;
|
|
775
|
-
letterSpacing: string;
|
|
776
|
-
wordSpacing: string;
|
|
777
|
-
}
|
|
778
|
-
type ColorSpace = 'srgb' | 'display-p3';
|
|
779
|
-
interface ContextAttributes {
|
|
780
|
-
alpha?: boolean;
|
|
781
|
-
colorSpace?: ColorSpace;
|
|
782
|
-
}
|
|
783
|
-
interface SvgCanvas {
|
|
784
|
-
width: number;
|
|
785
|
-
height: number;
|
|
786
|
-
getContext(contextType: '2d', contextAttributes?: ContextAttributes): SKRSContext2D;
|
|
787
|
-
getContent(): Buffer;
|
|
788
|
-
}
|
|
789
|
-
interface AvifConfig {
|
|
790
|
-
/** 0-100 scale, 100 is lossless */
|
|
791
|
-
quality?: number;
|
|
792
|
-
/** 0-100 scale */
|
|
793
|
-
alphaQuality?: number;
|
|
794
|
-
/** rav1e preset 1 (slow) 10 (fast but crappy), default is 4 */
|
|
795
|
-
speed?: number;
|
|
796
|
-
/** How many threads should be used (0 = match core count) */
|
|
797
|
-
threads?: number;
|
|
798
|
-
/** set to '4:2:0' to use chroma subsampling, default '4:4:4' */
|
|
799
|
-
chromaSubsampling?: ChromaSubsampling;
|
|
800
|
-
}
|
|
801
|
-
/**
|
|
802
|
-
* https://en.wikipedia.org/wiki/Chroma_subsampling#Types_of_sampling_and_subsampling
|
|
803
|
-
* https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_concepts
|
|
804
|
-
*/
|
|
805
|
-
declare enum ChromaSubsampling {
|
|
806
|
-
/**
|
|
807
|
-
* Each of the three Y'CbCr components has the same sample rate, thus there is no chroma subsampling. This scheme is sometimes used in high-end film scanners and cinematic post-production.
|
|
808
|
-
* Note that "4:4:4" may instead be wrongly referring to R'G'B' color space, which implicitly also does not have any chroma subsampling (except in JPEG R'G'B' can be subsampled).
|
|
809
|
-
* Formats such as HDCAM SR can record 4:4:4 R'G'B' over dual-link HD-SDI.
|
|
810
|
-
*/
|
|
811
|
-
Yuv444 = 0,
|
|
812
|
-
/**
|
|
813
|
-
* The two chroma components are sampled at half the horizontal sample rate of luma: the horizontal chroma resolution is halved. This reduces the bandwidth of an uncompressed video signal by one-third.
|
|
814
|
-
* Many high-end digital video formats and interfaces use this scheme:
|
|
815
|
-
* - [AVC-Intra 100](https://en.wikipedia.org/wiki/AVC-Intra)
|
|
816
|
-
* - [Digital Betacam](https://en.wikipedia.org/wiki/Betacam#Digital_Betacam)
|
|
817
|
-
* - [Betacam SX](https://en.wikipedia.org/wiki/Betacam#Betacam_SX)
|
|
818
|
-
* - [DVCPRO50](https://en.wikipedia.org/wiki/DV#DVCPRO) and [DVCPRO HD](https://en.wikipedia.org/wiki/DV#DVCPRO_HD)
|
|
819
|
-
* - [Digital-S](https://en.wikipedia.org/wiki/Digital-S)
|
|
820
|
-
* - [CCIR 601](https://en.wikipedia.org/wiki/Rec._601) / [Serial Digital Interface](https://en.wikipedia.org/wiki/Serial_digital_interface) / [D1](https://en.wikipedia.org/wiki/D-1_(Sony))
|
|
821
|
-
* - [ProRes (HQ, 422, LT, and Proxy)](https://en.wikipedia.org/wiki/Apple_ProRes)
|
|
822
|
-
* - [XDCAM HD422](https://en.wikipedia.org/wiki/XDCAM)
|
|
823
|
-
* - [Canon MXF HD422](https://en.wikipedia.org/wiki/Canon_XF-300)
|
|
824
|
-
*/
|
|
825
|
-
Yuv422 = 1,
|
|
826
|
-
/**
|
|
827
|
-
* n 4:2:0, the horizontal sampling is doubled compared to 4:1:1,
|
|
828
|
-
* but as the **Cb** and **Cr** channels are only sampled on each alternate line in this scheme, the vertical resolution is halved.
|
|
829
|
-
* The data rate is thus the same.
|
|
830
|
-
* This fits reasonably well with the PAL color encoding system, since this has only half the vertical chrominance resolution of [NTSC](https://en.wikipedia.org/wiki/NTSC).
|
|
831
|
-
* It would also fit extremely well with the [SECAM](https://en.wikipedia.org/wiki/SECAM) color encoding system,
|
|
832
|
-
* since like that format, 4:2:0 only stores and transmits one color channel per line (the other channel being recovered from the previous line).
|
|
833
|
-
* However, little equipment has actually been produced that outputs a SECAM analogue video signal.
|
|
834
|
-
* In general, SECAM territories either have to use a PAL-capable display or a [transcoder](https://en.wikipedia.org/wiki/Transcoding) to convert the PAL signal to SECAM for display.
|
|
835
|
-
*/
|
|
836
|
-
Yuv420 = 2,
|
|
837
|
-
/**
|
|
838
|
-
* What if the chroma subsampling model is 4:0:0?
|
|
839
|
-
* That says to use every pixel of luma data, but that each row has 0 chroma samples applied to it. The resulting image, then, is comprised solely of the luminance data—a greyscale image.
|
|
840
|
-
*/
|
|
841
|
-
Yuv400 = 3
|
|
842
|
-
}
|
|
843
|
-
interface ConvertToBlobOptions {
|
|
844
|
-
mime?: string;
|
|
845
|
-
quality?: number;
|
|
846
|
-
}
|
|
847
|
-
declare class Canvas {
|
|
848
|
-
constructor(width: number, height: number, flag?: SvgExportFlag);
|
|
849
|
-
width: number;
|
|
850
|
-
height: number;
|
|
851
|
-
getContext(contextType: '2d', contextAttributes?: ContextAttributes): SKRSContext2D;
|
|
852
|
-
encodeSync(format: 'webp' | 'jpeg', quality?: number): Buffer;
|
|
853
|
-
encodeSync(format: 'png'): Buffer;
|
|
854
|
-
encodeSync(format: 'avif', cfg?: AvifConfig): Buffer;
|
|
855
|
-
encodeSync(format: 'gif', quality?: number): Buffer;
|
|
856
|
-
encode(format: 'webp' | 'jpeg', quality?: number): Promise<Buffer>;
|
|
857
|
-
encode(format: 'png'): Promise<Buffer>;
|
|
858
|
-
encode(format: 'avif', cfg?: AvifConfig): Promise<Buffer>;
|
|
859
|
-
encode(format: 'gif', quality?: number): Promise<Buffer>;
|
|
860
|
-
encodeStream(format: 'webp' | 'jpeg', quality?: number): ReadableStream<Buffer>;
|
|
861
|
-
encodeStream(format: 'png'): ReadableStream<Buffer>;
|
|
862
|
-
toBuffer(mime: 'image/png'): Buffer;
|
|
863
|
-
toBuffer(mime: 'image/jpeg' | 'image/webp', quality?: number): Buffer;
|
|
864
|
-
toBuffer(mime: 'image/avif', cfg?: AvifConfig): Buffer;
|
|
865
|
-
toBuffer(mime: 'image/gif', quality?: number): Buffer; // raw pixels
|
|
866
|
-
data(): Buffer;
|
|
867
|
-
toDataURL(mime?: 'image/png'): string;
|
|
868
|
-
toDataURL(mime: 'image/jpeg' | 'image/webp', quality?: number): string;
|
|
869
|
-
toDataURL(mime: 'image/gif', quality?: number): string;
|
|
870
|
-
toDataURL(mime?: 'image/jpeg' | 'image/webp' | 'image/png' | 'image/gif', quality?: number): string;
|
|
871
|
-
toDataURL(mime?: 'image/avif', cfg?: AvifConfig): string;
|
|
872
|
-
toDataURLAsync(mime?: 'image/png'): Promise<string>;
|
|
873
|
-
toDataURLAsync(mime: 'image/jpeg' | 'image/webp', quality?: number): Promise<string>;
|
|
874
|
-
toDataURLAsync(mime: 'image/gif', quality?: number): Promise<string>;
|
|
875
|
-
toDataURLAsync(mime?: 'image/jpeg' | 'image/webp' | 'image/png' | 'image/gif', quality?: number): Promise<string>;
|
|
876
|
-
toDataURLAsync(mime?: 'image/avif', cfg?: AvifConfig): Promise<string>;
|
|
877
|
-
toBlob(callback: (blob: Blob | null) => void, mime?: string, quality?: number): void;
|
|
878
|
-
convertToBlob(options?: ConvertToBlobOptions): Promise<Blob>;
|
|
879
|
-
}
|
|
880
|
-
declare enum PathOp {
|
|
881
|
-
Difference = 0,
|
|
882
|
-
// subtract the op path from the first path
|
|
883
|
-
Intersect = 1,
|
|
884
|
-
// intersect the two paths
|
|
885
|
-
Union = 2,
|
|
886
|
-
// union (inclusive-or) the two paths
|
|
887
|
-
Xor = 3,
|
|
888
|
-
// exclusive-or the two paths
|
|
889
|
-
ReverseDifference = 4 // subtract the first path from the op path
|
|
890
|
-
}
|
|
891
|
-
declare enum FillType {
|
|
892
|
-
Winding = 0,
|
|
893
|
-
EvenOdd = 1,
|
|
894
|
-
InverseWinding = 2,
|
|
895
|
-
InverseEvenOdd = 3
|
|
896
|
-
}
|
|
897
|
-
declare enum StrokeJoin {
|
|
898
|
-
Miter = 0,
|
|
899
|
-
Round = 1,
|
|
900
|
-
Bevel = 2
|
|
901
|
-
}
|
|
902
|
-
declare enum StrokeCap {
|
|
903
|
-
Butt = 0,
|
|
904
|
-
Round = 1,
|
|
905
|
-
Square = 2
|
|
906
|
-
}
|
|
907
|
-
declare enum SvgExportFlag {
|
|
908
|
-
ConvertTextToPaths = 0x01,
|
|
909
|
-
NoPrettyXML = 0x02,
|
|
910
|
-
RelativePathEncoding = 0x04
|
|
911
|
-
}
|
|
912
|
-
//#endregion
|
|
913
|
-
//#region src/canvas.d.ts
|
|
914
|
-
interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
|
|
915
|
-
width: number;
|
|
916
|
-
height: number;
|
|
917
|
-
pixelRatio?: number;
|
|
918
|
-
/** 根据内容调整画布大小 */
|
|
919
|
-
fitContent?: boolean;
|
|
920
|
-
updateStyles?: boolean;
|
|
921
|
-
imageSmoothingEnabled?: boolean;
|
|
922
|
-
imageSmoothingQuality?: "low" | "medium" | "high";
|
|
923
|
-
canvas?: T;
|
|
924
|
-
}
|
|
925
|
-
interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
|
|
926
|
-
readonly width: number;
|
|
927
|
-
readonly height: number;
|
|
928
|
-
readonly pixelRatio: number;
|
|
929
|
-
readonly canvas: T;
|
|
930
|
-
render(element: LayoutElement): LayoutNode;
|
|
931
|
-
clear(): void;
|
|
932
|
-
getContext(): CanvasRenderingContext2D;
|
|
933
|
-
toDataURL(type?: string, quality?: number): string;
|
|
934
|
-
toBuffer(type?: "image/png" | "image/jpeg"): Buffer;
|
|
935
|
-
}
|
|
936
|
-
/**
|
|
937
|
-
* 创建适用于浏览器环境的 Canvas
|
|
938
|
-
*
|
|
939
|
-
* 在浏览器环境中使用,支持传入已有的 canvas 实例
|
|
940
|
-
*/
|
|
941
|
-
declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
|
|
942
|
-
//#endregion
|
|
943
|
-
//#region src/components/Box.d.ts
|
|
944
|
-
declare function Box(props: BoxProps): BoxElement;
|
|
945
|
-
//#endregion
|
|
946
|
-
//#region src/components/CustomDraw.d.ts
|
|
947
|
-
declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
|
|
948
|
-
//#endregion
|
|
949
|
-
//#region src/components/Image.d.ts
|
|
950
|
-
declare function Image(props: ImageProps): ImageElement;
|
|
951
|
-
//#endregion
|
|
952
|
-
//#region src/components/RichText.d.ts
|
|
953
|
-
declare function RichText(props: RichTextProps): RichTextElement;
|
|
954
|
-
//#endregion
|
|
955
|
-
//#region src/components/Stack.d.ts
|
|
956
|
-
declare function Stack(props: StackProps): StackElement;
|
|
957
|
-
//#endregion
|
|
958
|
-
//#region src/components/Svg.d.ts
|
|
959
|
-
declare function Svg(props: SvgProps): SvgElement;
|
|
960
|
-
declare const svg: {
|
|
961
|
-
rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
|
|
962
|
-
circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
|
|
963
|
-
ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
|
|
964
|
-
line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
|
|
965
|
-
polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
|
|
966
|
-
polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
|
|
967
|
-
path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
|
|
968
|
-
text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
|
|
969
|
-
g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
|
|
970
|
-
};
|
|
971
|
-
//#endregion
|
|
972
|
-
//#region src/components/Text.d.ts
|
|
973
|
-
declare function Text(props: TextProps): TextElement;
|
|
974
|
-
//#endregion
|
|
975
|
-
//#region src/components/Transform.d.ts
|
|
976
|
-
declare function Transform(props: TransformProps): TransformElement;
|
|
977
|
-
//#endregion
|
|
978
|
-
//#region src/layout/engine.d.ts
|
|
979
|
-
/**
|
|
980
|
-
* 布局计算主函数
|
|
981
|
-
* 内部使用 Element 类型以支持 Transform,外部通过 LayoutElement 约束类型
|
|
982
|
-
*/
|
|
983
|
-
declare function computeLayout(element: LayoutElement, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
|
|
984
|
-
//#endregion
|
|
985
|
-
//#region src/layout/utils/print.d.ts
|
|
986
|
-
/**
|
|
987
|
-
* 打印 LayoutNode 树结构到控制台
|
|
988
|
-
*/
|
|
989
|
-
declare function printLayout(node: LayoutNode): void;
|
|
990
|
-
/**
|
|
991
|
-
* 将 LayoutNode 转换为美观的字符串
|
|
992
|
-
* @param node LayoutNode 根节点
|
|
993
|
-
* @param indent 缩进字符串,默认为两个空格
|
|
994
|
-
* @returns 格式化的字符串
|
|
995
|
-
*/
|
|
996
|
-
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
997
|
-
//#endregion
|
|
998
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|