@codehz/draw-call 0.2.0 → 0.2.2
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 +45 -2
- package/canvas.d.cts +62 -6
- package/canvas.d.mts +62 -6
- package/examples/customdraw-basic.ts +269 -0
- package/examples/customdraw.ts +339 -0
- package/examples/image-smoothing.ts +46 -0
- package/examples/transform.ts +437 -0
- package/index.cjs +22 -0
- package/index.d.cts +7 -14
- package/index.d.mts +7 -14
- package/index.mjs +21 -1
- package/node.cjs +2 -0
- package/node.mjs +2 -0
- package/package.json +1 -1
- package/render.cjs +325 -13
- package/render.mjs +325 -13
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 示例：演示 Transform 组件的基础属性
|
|
3
|
+
* 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
|
|
4
|
+
* 运行: bun examples/transform.ts
|
|
5
|
+
*/
|
|
6
|
+
import { Box, Text, Transform, printLayout } from "@codehz/draw-call";
|
|
7
|
+
import { createNodeCanvas } from "@codehz/draw-call/node";
|
|
8
|
+
import { GlobalFonts } from "@napi-rs/canvas";
|
|
9
|
+
import { fileURLToPath } from "bun";
|
|
10
|
+
|
|
11
|
+
GlobalFonts.registerFromPath(fileURLToPath(import.meta.resolve("@fontpkg/unifont/unifont-15.0.01.ttf")), "unifont");
|
|
12
|
+
|
|
13
|
+
const canvas = createNodeCanvas({
|
|
14
|
+
width: 800,
|
|
15
|
+
height: 1000,
|
|
16
|
+
pixelRatio: 2,
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// 创建一个简单的演示盒子
|
|
20
|
+
function DemoBox(label: string, transform?: any) {
|
|
21
|
+
return Transform({
|
|
22
|
+
transform,
|
|
23
|
+
transformOrigin: ["50%", "50%"],
|
|
24
|
+
children: Box({
|
|
25
|
+
width: 80,
|
|
26
|
+
height: 80,
|
|
27
|
+
background: "#667eea",
|
|
28
|
+
border: { radius: 8 },
|
|
29
|
+
justify: "center",
|
|
30
|
+
align: "center",
|
|
31
|
+
children: [
|
|
32
|
+
Text({
|
|
33
|
+
content: label,
|
|
34
|
+
font: { size: 12, weight: "bold", family: "unifont" },
|
|
35
|
+
color: "#ffffff",
|
|
36
|
+
}),
|
|
37
|
+
],
|
|
38
|
+
}),
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const layout = canvas.render(
|
|
43
|
+
Box({
|
|
44
|
+
width: "fill",
|
|
45
|
+
height: "fill",
|
|
46
|
+
background: "#f5f7fa",
|
|
47
|
+
padding: 20,
|
|
48
|
+
direction: "column",
|
|
49
|
+
gap: 20,
|
|
50
|
+
children: [
|
|
51
|
+
// 标题
|
|
52
|
+
Text({
|
|
53
|
+
content: "Transform 变换演示",
|
|
54
|
+
font: { size: 28, weight: "bold", family: "unifont" },
|
|
55
|
+
color: "#333333",
|
|
56
|
+
}),
|
|
57
|
+
|
|
58
|
+
// 第一行：平移演示
|
|
59
|
+
Box({
|
|
60
|
+
direction: "column",
|
|
61
|
+
gap: 10,
|
|
62
|
+
children: [
|
|
63
|
+
Text({
|
|
64
|
+
content: "1. 平移 (Translate)",
|
|
65
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
66
|
+
color: "#666666",
|
|
67
|
+
}),
|
|
68
|
+
Box({
|
|
69
|
+
background: "#ffffff",
|
|
70
|
+
border: { radius: 8 },
|
|
71
|
+
padding: 20,
|
|
72
|
+
direction: "row",
|
|
73
|
+
gap: 30,
|
|
74
|
+
align: "center",
|
|
75
|
+
children: [
|
|
76
|
+
// 没有变换
|
|
77
|
+
Box({
|
|
78
|
+
direction: "column",
|
|
79
|
+
gap: 8,
|
|
80
|
+
align: "center",
|
|
81
|
+
children: [
|
|
82
|
+
DemoBox("原始"),
|
|
83
|
+
Text({
|
|
84
|
+
content: "原始位置",
|
|
85
|
+
font: { size: 12, family: "unifont" },
|
|
86
|
+
color: "#999999",
|
|
87
|
+
}),
|
|
88
|
+
],
|
|
89
|
+
}),
|
|
90
|
+
// 向右平移 30 像素
|
|
91
|
+
Box({
|
|
92
|
+
direction: "column",
|
|
93
|
+
gap: 8,
|
|
94
|
+
align: "center",
|
|
95
|
+
children: [
|
|
96
|
+
DemoBox("右移30", {
|
|
97
|
+
translate: [30, 0],
|
|
98
|
+
}),
|
|
99
|
+
Text({
|
|
100
|
+
content: "translateX(30)",
|
|
101
|
+
font: { size: 12, family: "unifont" },
|
|
102
|
+
color: "#999999",
|
|
103
|
+
}),
|
|
104
|
+
],
|
|
105
|
+
}),
|
|
106
|
+
// 向下平移 20 像素
|
|
107
|
+
Box({
|
|
108
|
+
direction: "column",
|
|
109
|
+
gap: 8,
|
|
110
|
+
align: "center",
|
|
111
|
+
children: [
|
|
112
|
+
DemoBox("下移20", {
|
|
113
|
+
translate: [0, 20],
|
|
114
|
+
}),
|
|
115
|
+
Text({
|
|
116
|
+
content: "translateY(20)",
|
|
117
|
+
font: { size: 12, family: "unifont" },
|
|
118
|
+
color: "#999999",
|
|
119
|
+
}),
|
|
120
|
+
],
|
|
121
|
+
}),
|
|
122
|
+
// 同时平移
|
|
123
|
+
Box({
|
|
124
|
+
direction: "column",
|
|
125
|
+
gap: 8,
|
|
126
|
+
align: "center",
|
|
127
|
+
children: [
|
|
128
|
+
DemoBox("对角", {
|
|
129
|
+
translate: [25, 15],
|
|
130
|
+
}),
|
|
131
|
+
Text({
|
|
132
|
+
content: "translate(25, 15)",
|
|
133
|
+
font: { size: 12, family: "unifont" },
|
|
134
|
+
color: "#999999",
|
|
135
|
+
}),
|
|
136
|
+
],
|
|
137
|
+
}),
|
|
138
|
+
],
|
|
139
|
+
}),
|
|
140
|
+
],
|
|
141
|
+
}),
|
|
142
|
+
|
|
143
|
+
// 第二行：缩放演示
|
|
144
|
+
Box({
|
|
145
|
+
direction: "column",
|
|
146
|
+
gap: 10,
|
|
147
|
+
children: [
|
|
148
|
+
Text({
|
|
149
|
+
content: "2. 缩放 (Scale)",
|
|
150
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
151
|
+
color: "#666666",
|
|
152
|
+
}),
|
|
153
|
+
Box({
|
|
154
|
+
background: "#ffffff",
|
|
155
|
+
border: { radius: 8 },
|
|
156
|
+
padding: 20,
|
|
157
|
+
direction: "row",
|
|
158
|
+
gap: 30,
|
|
159
|
+
align: "center",
|
|
160
|
+
children: [
|
|
161
|
+
// 原始
|
|
162
|
+
Box({
|
|
163
|
+
direction: "column",
|
|
164
|
+
gap: 8,
|
|
165
|
+
align: "center",
|
|
166
|
+
children: [
|
|
167
|
+
DemoBox("1.0"),
|
|
168
|
+
Text({
|
|
169
|
+
content: "scale(1.0)",
|
|
170
|
+
font: { size: 12, family: "unifont" },
|
|
171
|
+
color: "#999999",
|
|
172
|
+
}),
|
|
173
|
+
],
|
|
174
|
+
}),
|
|
175
|
+
// 放大 1.5 倍
|
|
176
|
+
Box({
|
|
177
|
+
direction: "column",
|
|
178
|
+
gap: 8,
|
|
179
|
+
align: "center",
|
|
180
|
+
children: [
|
|
181
|
+
DemoBox("1.5倍", {
|
|
182
|
+
scale: 1.5,
|
|
183
|
+
}),
|
|
184
|
+
Text({
|
|
185
|
+
content: "scale(1.5)",
|
|
186
|
+
font: { size: 12, family: "unifont" },
|
|
187
|
+
color: "#999999",
|
|
188
|
+
}),
|
|
189
|
+
],
|
|
190
|
+
}),
|
|
191
|
+
// 缩小到 0.7 倍
|
|
192
|
+
Box({
|
|
193
|
+
direction: "column",
|
|
194
|
+
gap: 8,
|
|
195
|
+
align: "center",
|
|
196
|
+
children: [
|
|
197
|
+
DemoBox("0.7倍", {
|
|
198
|
+
scale: 0.7,
|
|
199
|
+
}),
|
|
200
|
+
Text({
|
|
201
|
+
content: "scale(0.7)",
|
|
202
|
+
font: { size: 12, family: "unifont" },
|
|
203
|
+
color: "#999999",
|
|
204
|
+
}),
|
|
205
|
+
],
|
|
206
|
+
}),
|
|
207
|
+
// 非均匀缩放
|
|
208
|
+
Box({
|
|
209
|
+
direction: "column",
|
|
210
|
+
gap: 8,
|
|
211
|
+
align: "center",
|
|
212
|
+
children: [
|
|
213
|
+
DemoBox("非均匀", {
|
|
214
|
+
scale: [1.3, 0.8],
|
|
215
|
+
}),
|
|
216
|
+
Text({
|
|
217
|
+
content: "scale(1.3, 0.8)",
|
|
218
|
+
font: { size: 12, family: "unifont" },
|
|
219
|
+
color: "#999999",
|
|
220
|
+
}),
|
|
221
|
+
],
|
|
222
|
+
}),
|
|
223
|
+
],
|
|
224
|
+
}),
|
|
225
|
+
],
|
|
226
|
+
}),
|
|
227
|
+
|
|
228
|
+
// 第三行：旋转演示
|
|
229
|
+
Box({
|
|
230
|
+
direction: "column",
|
|
231
|
+
gap: 10,
|
|
232
|
+
children: [
|
|
233
|
+
Text({
|
|
234
|
+
content: "3. 旋转 (Rotate)",
|
|
235
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
236
|
+
color: "#666666",
|
|
237
|
+
}),
|
|
238
|
+
Box({
|
|
239
|
+
background: "#ffffff",
|
|
240
|
+
border: { radius: 8 },
|
|
241
|
+
padding: 20,
|
|
242
|
+
direction: "row",
|
|
243
|
+
gap: 30,
|
|
244
|
+
align: "center",
|
|
245
|
+
children: [
|
|
246
|
+
// 原始
|
|
247
|
+
Box({
|
|
248
|
+
direction: "column",
|
|
249
|
+
gap: 8,
|
|
250
|
+
align: "center",
|
|
251
|
+
children: [
|
|
252
|
+
DemoBox("0°"),
|
|
253
|
+
Text({
|
|
254
|
+
content: "rotate(0°)",
|
|
255
|
+
font: { size: 12, family: "unifont" },
|
|
256
|
+
color: "#999999",
|
|
257
|
+
}),
|
|
258
|
+
],
|
|
259
|
+
}),
|
|
260
|
+
// 顺时针 45 度
|
|
261
|
+
Box({
|
|
262
|
+
direction: "column",
|
|
263
|
+
gap: 8,
|
|
264
|
+
align: "center",
|
|
265
|
+
children: [
|
|
266
|
+
DemoBox("45°", {
|
|
267
|
+
rotate: 45, // 45度
|
|
268
|
+
}),
|
|
269
|
+
Text({
|
|
270
|
+
content: "rotate(45°)",
|
|
271
|
+
font: { size: 12, family: "unifont" },
|
|
272
|
+
color: "#999999",
|
|
273
|
+
}),
|
|
274
|
+
],
|
|
275
|
+
}),
|
|
276
|
+
// 旋转 90 度
|
|
277
|
+
Box({
|
|
278
|
+
direction: "column",
|
|
279
|
+
gap: 8,
|
|
280
|
+
align: "center",
|
|
281
|
+
children: [
|
|
282
|
+
DemoBox("90°", {
|
|
283
|
+
rotate: 90, // 90度
|
|
284
|
+
}),
|
|
285
|
+
Text({
|
|
286
|
+
content: "rotate(90°)",
|
|
287
|
+
font: { size: 12, family: "unifont" },
|
|
288
|
+
color: "#999999",
|
|
289
|
+
}),
|
|
290
|
+
],
|
|
291
|
+
}),
|
|
292
|
+
// 旋转 -30 度
|
|
293
|
+
Box({
|
|
294
|
+
direction: "column",
|
|
295
|
+
gap: 8,
|
|
296
|
+
align: "center",
|
|
297
|
+
children: [
|
|
298
|
+
DemoBox("-30°", {
|
|
299
|
+
rotate: -30, // -30度
|
|
300
|
+
}),
|
|
301
|
+
Text({
|
|
302
|
+
content: "rotate(-30°)",
|
|
303
|
+
font: { size: 12, family: "unifont" },
|
|
304
|
+
color: "#999999",
|
|
305
|
+
}),
|
|
306
|
+
],
|
|
307
|
+
}),
|
|
308
|
+
],
|
|
309
|
+
}),
|
|
310
|
+
],
|
|
311
|
+
}),
|
|
312
|
+
|
|
313
|
+
// 第四行：组合变换演示
|
|
314
|
+
Box({
|
|
315
|
+
direction: "column",
|
|
316
|
+
gap: 10,
|
|
317
|
+
children: [
|
|
318
|
+
Text({
|
|
319
|
+
content: "4. 组合变换",
|
|
320
|
+
font: { size: 16, weight: "bold", family: "unifont" },
|
|
321
|
+
color: "#666666",
|
|
322
|
+
}),
|
|
323
|
+
Box({
|
|
324
|
+
background: "#ffffff",
|
|
325
|
+
border: { radius: 8 },
|
|
326
|
+
padding: 20,
|
|
327
|
+
direction: "row",
|
|
328
|
+
gap: 30,
|
|
329
|
+
align: "center",
|
|
330
|
+
children: [
|
|
331
|
+
// 平移 + 旋转
|
|
332
|
+
Box({
|
|
333
|
+
direction: "column",
|
|
334
|
+
gap: 8,
|
|
335
|
+
align: "center",
|
|
336
|
+
children: [
|
|
337
|
+
DemoBox("移+转", {
|
|
338
|
+
translate: [20, 10],
|
|
339
|
+
rotate: 30, // 30度
|
|
340
|
+
}),
|
|
341
|
+
Text({
|
|
342
|
+
content: "移动 + 旋转",
|
|
343
|
+
font: { size: 12, family: "unifont" },
|
|
344
|
+
color: "#999999",
|
|
345
|
+
}),
|
|
346
|
+
],
|
|
347
|
+
}),
|
|
348
|
+
// 缩放 + 旋转
|
|
349
|
+
Box({
|
|
350
|
+
direction: "column",
|
|
351
|
+
gap: 8,
|
|
352
|
+
align: "center",
|
|
353
|
+
children: [
|
|
354
|
+
DemoBox("缩+转", {
|
|
355
|
+
scale: 1.2,
|
|
356
|
+
rotate: -22.5, // -22.5度
|
|
357
|
+
}),
|
|
358
|
+
Text({
|
|
359
|
+
content: "缩放 + 旋转",
|
|
360
|
+
font: { size: 12, family: "unifont" },
|
|
361
|
+
color: "#999999",
|
|
362
|
+
}),
|
|
363
|
+
],
|
|
364
|
+
}),
|
|
365
|
+
// 三个变换组合
|
|
366
|
+
Box({
|
|
367
|
+
direction: "column",
|
|
368
|
+
gap: 8,
|
|
369
|
+
align: "center",
|
|
370
|
+
children: [
|
|
371
|
+
DemoBox("全部", {
|
|
372
|
+
translate: [15, 10],
|
|
373
|
+
scale: 1.1,
|
|
374
|
+
rotate: 45, // 45度
|
|
375
|
+
}),
|
|
376
|
+
Text({
|
|
377
|
+
content: "移动 + 缩放 + 旋转",
|
|
378
|
+
font: { size: 12, family: "unifont" },
|
|
379
|
+
color: "#999999",
|
|
380
|
+
}),
|
|
381
|
+
],
|
|
382
|
+
}),
|
|
383
|
+
// 使用 transformOrigin 改变变换中心
|
|
384
|
+
Box({
|
|
385
|
+
direction: "column",
|
|
386
|
+
gap: 8,
|
|
387
|
+
align: "center",
|
|
388
|
+
children: [
|
|
389
|
+
Transform({
|
|
390
|
+
transformOrigin: ["100%", "100%"],
|
|
391
|
+
transform: {
|
|
392
|
+
rotate: 45, // 45度
|
|
393
|
+
scale: 1.2,
|
|
394
|
+
},
|
|
395
|
+
children: Box({
|
|
396
|
+
width: 80,
|
|
397
|
+
height: 80,
|
|
398
|
+
background: "#764ba2",
|
|
399
|
+
border: { radius: 8 },
|
|
400
|
+
justify: "center",
|
|
401
|
+
align: "center",
|
|
402
|
+
children: [
|
|
403
|
+
Text({
|
|
404
|
+
content: "变换原点",
|
|
405
|
+
font: {
|
|
406
|
+
size: 12,
|
|
407
|
+
weight: "bold",
|
|
408
|
+
family: "unifont",
|
|
409
|
+
},
|
|
410
|
+
color: "#ffffff",
|
|
411
|
+
}),
|
|
412
|
+
],
|
|
413
|
+
}),
|
|
414
|
+
}),
|
|
415
|
+
Text({
|
|
416
|
+
content: "自定义原点",
|
|
417
|
+
font: { size: 12, family: "unifont" },
|
|
418
|
+
color: "#999999",
|
|
419
|
+
}),
|
|
420
|
+
],
|
|
421
|
+
}),
|
|
422
|
+
],
|
|
423
|
+
}),
|
|
424
|
+
],
|
|
425
|
+
}),
|
|
426
|
+
],
|
|
427
|
+
})
|
|
428
|
+
);
|
|
429
|
+
|
|
430
|
+
// 保存文件
|
|
431
|
+
const buffer = await canvas.toBuffer("image/png");
|
|
432
|
+
await Bun.write("examples/transform.png", buffer);
|
|
433
|
+
console.log("Transform demo saved to examples/transform.png");
|
|
434
|
+
|
|
435
|
+
// 打印布局树
|
|
436
|
+
console.log("\n=== Layout Tree ===");
|
|
437
|
+
printLayout(layout);
|
package/index.cjs
CHANGED
|
@@ -18,6 +18,8 @@ function createCanvas(options) {
|
|
|
18
18
|
}
|
|
19
19
|
const ctx = canvas.getContext("2d");
|
|
20
20
|
if (!ctx) throw new Error("Failed to get 2d context");
|
|
21
|
+
if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
|
|
22
|
+
if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
|
|
21
23
|
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
22
24
|
const measureCtx = require_render.createCanvasMeasureContext(ctx);
|
|
23
25
|
return {
|
|
@@ -61,6 +63,15 @@ function Box(props) {
|
|
|
61
63
|
};
|
|
62
64
|
}
|
|
63
65
|
|
|
66
|
+
//#endregion
|
|
67
|
+
//#region src/components/CustomDraw.ts
|
|
68
|
+
function CustomDraw(props) {
|
|
69
|
+
return {
|
|
70
|
+
type: "customdraw",
|
|
71
|
+
...props
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
|
|
64
75
|
//#endregion
|
|
65
76
|
//#region src/components/Image.ts
|
|
66
77
|
function Image(props) {
|
|
@@ -144,6 +155,15 @@ function Text(props) {
|
|
|
144
155
|
};
|
|
145
156
|
}
|
|
146
157
|
|
|
158
|
+
//#endregion
|
|
159
|
+
//#region src/components/Transform.ts
|
|
160
|
+
function Transform(props) {
|
|
161
|
+
return {
|
|
162
|
+
type: "transform",
|
|
163
|
+
...props
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
147
167
|
//#endregion
|
|
148
168
|
//#region src/layout/utils/print.ts
|
|
149
169
|
/**
|
|
@@ -204,11 +224,13 @@ function layoutToString(node, _indent = " ") {
|
|
|
204
224
|
|
|
205
225
|
//#endregion
|
|
206
226
|
exports.Box = Box;
|
|
227
|
+
exports.CustomDraw = CustomDraw;
|
|
207
228
|
exports.Image = Image;
|
|
208
229
|
exports.RichText = RichText;
|
|
209
230
|
exports.Stack = Stack;
|
|
210
231
|
exports.Svg = Svg;
|
|
211
232
|
exports.Text = Text;
|
|
233
|
+
exports.Transform = Transform;
|
|
212
234
|
exports.computeLayout = require_render.computeLayout;
|
|
213
235
|
exports.createCanvas = createCanvas;
|
|
214
236
|
exports.createCanvasMeasureContext = require_render.createCanvasMeasureContext;
|
package/index.d.cts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { $ as
|
|
1
|
+
import { $ as GradientDescriptor, A as SvgRectChild, B as ContainerLayoutProps, C as SvgEllipseChild, D as SvgPolygonChild, E as SvgPathChild, F as TextProps, G as LayoutProps, H as JustifyContent, I as TransformElement, J as Border, K as MeasureContext, L as TransformProps, M as SvgTextChild, N as SvgTransformProps, O as SvgPolylineChild, P as TextElement, Q as FontProps, R as AlignItems, S as SvgElement, T as SvgLineChild, U as LayoutConstraints, V as FlexDirection, W as LayoutNode, X as Color, Y as Bounds, Z as ColorStop, _ as StackElement, a as BoxElement, at as StrokeProps, b as SvgChild, c as CustomDrawProps, d as ImageProps, et as LinearGradientDescriptor, f as ProxiedCanvasContextOptions, g as StackAlign, h as RichTextSpan, i as createCanvas, it as Spacing, j as SvgStyleProps, k as SvgProps, l as Element, m as RichTextProps, n as DrawCallCanvas, nt as Shadow, o as BoxProps, ot as linearGradient, p as RichTextElement, q as createCanvasMeasureContext, r as LayoutSize, rt as Size, s as CustomDrawElement, st as radialGradient, t as CanvasOptions, tt as RadialGradientDescriptor, u as ImageElement, v as StackProps, w as SvgGroupChild, x as SvgCircleChild, y as SvgAlign, z as AlignSelf } from "./canvas.cjs";
|
|
2
2
|
|
|
3
3
|
//#region src/components/Box.d.ts
|
|
4
4
|
declare function Box(props: BoxProps): BoxElement;
|
|
5
5
|
//#endregion
|
|
6
|
+
//#region src/components/CustomDraw.d.ts
|
|
7
|
+
declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
|
|
8
|
+
//#endregion
|
|
6
9
|
//#region src/components/Image.d.ts
|
|
7
10
|
declare function Image(props: ImageProps): ImageElement;
|
|
8
11
|
//#endregion
|
|
@@ -29,18 +32,8 @@ declare const svg: {
|
|
|
29
32
|
//#region src/components/Text.d.ts
|
|
30
33
|
declare function Text(props: TextProps): TextElement;
|
|
31
34
|
//#endregion
|
|
32
|
-
//#region src/
|
|
33
|
-
|
|
34
|
-
width: number;
|
|
35
|
-
height: number;
|
|
36
|
-
offset: number;
|
|
37
|
-
ascent: number;
|
|
38
|
-
descent: number;
|
|
39
|
-
}
|
|
40
|
-
interface MeasureContext {
|
|
41
|
-
measureText(text: string, font: FontProps): MeasureTextResult;
|
|
42
|
-
}
|
|
43
|
-
declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
|
|
35
|
+
//#region src/components/Transform.d.ts
|
|
36
|
+
declare function Transform(props: TransformProps): TransformElement;
|
|
44
37
|
//#endregion
|
|
45
38
|
//#region src/layout/engine.d.ts
|
|
46
39
|
declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
|
|
@@ -58,4 +51,4 @@ declare function printLayout(node: LayoutNode): void;
|
|
|
58
51
|
*/
|
|
59
52
|
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
60
53
|
//#endregion
|
|
61
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, 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, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
54
|
+
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 LayoutSize, 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 };
|
package/index.d.mts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { $ as
|
|
1
|
+
import { $ as GradientDescriptor, A as SvgRectChild, B as ContainerLayoutProps, C as SvgEllipseChild, D as SvgPolygonChild, E as SvgPathChild, F as TextProps, G as LayoutProps, H as JustifyContent, I as TransformElement, J as Border, K as MeasureContext, L as TransformProps, M as SvgTextChild, N as SvgTransformProps, O as SvgPolylineChild, P as TextElement, Q as FontProps, R as AlignItems, S as SvgElement, T as SvgLineChild, U as LayoutConstraints, V as FlexDirection, W as LayoutNode, X as Color, Y as Bounds, Z as ColorStop, _ as StackElement, a as BoxElement, at as StrokeProps, b as SvgChild, c as CustomDrawProps, d as ImageProps, et as LinearGradientDescriptor, f as ProxiedCanvasContextOptions, g as StackAlign, h as RichTextSpan, i as createCanvas, it as Spacing, j as SvgStyleProps, k as SvgProps, l as Element, m as RichTextProps, n as DrawCallCanvas, nt as Shadow, o as BoxProps, ot as linearGradient, p as RichTextElement, q as createCanvasMeasureContext, r as LayoutSize, rt as Size, s as CustomDrawElement, st as radialGradient, t as CanvasOptions, tt as RadialGradientDescriptor, u as ImageElement, v as StackProps, w as SvgGroupChild, x as SvgCircleChild, y as SvgAlign, z as AlignSelf } from "./canvas.mjs";
|
|
2
2
|
|
|
3
3
|
//#region src/components/Box.d.ts
|
|
4
4
|
declare function Box(props: BoxProps): BoxElement;
|
|
5
5
|
//#endregion
|
|
6
|
+
//#region src/components/CustomDraw.d.ts
|
|
7
|
+
declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
|
|
8
|
+
//#endregion
|
|
6
9
|
//#region src/components/Image.d.ts
|
|
7
10
|
declare function Image(props: ImageProps): ImageElement;
|
|
8
11
|
//#endregion
|
|
@@ -29,18 +32,8 @@ declare const svg: {
|
|
|
29
32
|
//#region src/components/Text.d.ts
|
|
30
33
|
declare function Text(props: TextProps): TextElement;
|
|
31
34
|
//#endregion
|
|
32
|
-
//#region src/
|
|
33
|
-
|
|
34
|
-
width: number;
|
|
35
|
-
height: number;
|
|
36
|
-
offset: number;
|
|
37
|
-
ascent: number;
|
|
38
|
-
descent: number;
|
|
39
|
-
}
|
|
40
|
-
interface MeasureContext {
|
|
41
|
-
measureText(text: string, font: FontProps): MeasureTextResult;
|
|
42
|
-
}
|
|
43
|
-
declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
|
|
35
|
+
//#region src/components/Transform.d.ts
|
|
36
|
+
declare function Transform(props: TransformProps): TransformElement;
|
|
44
37
|
//#endregion
|
|
45
38
|
//#region src/layout/engine.d.ts
|
|
46
39
|
declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
|
|
@@ -58,4 +51,4 @@ declare function printLayout(node: LayoutNode): void;
|
|
|
58
51
|
*/
|
|
59
52
|
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
60
53
|
//#endregion
|
|
61
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, 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, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
54
|
+
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 LayoutSize, 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 };
|
package/index.mjs
CHANGED
|
@@ -18,6 +18,8 @@ function createCanvas(options) {
|
|
|
18
18
|
}
|
|
19
19
|
const ctx = canvas.getContext("2d");
|
|
20
20
|
if (!ctx) throw new Error("Failed to get 2d context");
|
|
21
|
+
if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
|
|
22
|
+
if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
|
|
21
23
|
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
22
24
|
const measureCtx = createCanvasMeasureContext(ctx);
|
|
23
25
|
return {
|
|
@@ -61,6 +63,15 @@ function Box(props) {
|
|
|
61
63
|
};
|
|
62
64
|
}
|
|
63
65
|
|
|
66
|
+
//#endregion
|
|
67
|
+
//#region src/components/CustomDraw.ts
|
|
68
|
+
function CustomDraw(props) {
|
|
69
|
+
return {
|
|
70
|
+
type: "customdraw",
|
|
71
|
+
...props
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
|
|
64
75
|
//#endregion
|
|
65
76
|
//#region src/components/Image.ts
|
|
66
77
|
function Image(props) {
|
|
@@ -144,6 +155,15 @@ function Text(props) {
|
|
|
144
155
|
};
|
|
145
156
|
}
|
|
146
157
|
|
|
158
|
+
//#endregion
|
|
159
|
+
//#region src/components/Transform.ts
|
|
160
|
+
function Transform(props) {
|
|
161
|
+
return {
|
|
162
|
+
type: "transform",
|
|
163
|
+
...props
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
147
167
|
//#endregion
|
|
148
168
|
//#region src/layout/utils/print.ts
|
|
149
169
|
/**
|
|
@@ -203,4 +223,4 @@ function layoutToString(node, _indent = " ") {
|
|
|
203
223
|
}
|
|
204
224
|
|
|
205
225
|
//#endregion
|
|
206
|
-
export { Box, Image, RichText, Stack, Svg, Text, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
226
|
+
export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
package/node.cjs
CHANGED
|
@@ -12,6 +12,8 @@ function createNodeCanvas(options) {
|
|
|
12
12
|
const { width, height, pixelRatio = 1 } = options;
|
|
13
13
|
const canvas = (0, _napi_rs_canvas.createCanvas)(width * pixelRatio, height * pixelRatio);
|
|
14
14
|
const ctx = canvas.getContext("2d");
|
|
15
|
+
if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
|
|
16
|
+
if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
|
|
15
17
|
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
16
18
|
const measureCtx = require_render.createCanvasMeasureContext(ctx);
|
|
17
19
|
return {
|
package/node.mjs
CHANGED
|
@@ -12,6 +12,8 @@ function createNodeCanvas(options) {
|
|
|
12
12
|
const { width, height, pixelRatio = 1 } = options;
|
|
13
13
|
const canvas = createCanvas(width * pixelRatio, height * pixelRatio);
|
|
14
14
|
const ctx = canvas.getContext("2d");
|
|
15
|
+
if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
|
|
16
|
+
if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
|
|
15
17
|
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
16
18
|
const measureCtx = createCanvasMeasureContext(ctx);
|
|
17
19
|
return {
|