@codehz/draw-call 0.2.1 → 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/canvas.d.cts +2 -0
- package/canvas.d.mts +2 -0
- package/examples/image-smoothing.ts +46 -0
- package/index.cjs +2 -0
- package/index.mjs +2 -0
- package/node.cjs +2 -0
- package/node.mjs +2 -0
- package/package.json +1 -1
package/canvas.d.cts
CHANGED
|
@@ -368,6 +368,8 @@ interface CanvasOptions {
|
|
|
368
368
|
width: number;
|
|
369
369
|
height: number;
|
|
370
370
|
pixelRatio?: number;
|
|
371
|
+
imageSmoothingEnabled?: boolean;
|
|
372
|
+
imageSmoothingQuality?: "low" | "medium" | "high";
|
|
371
373
|
canvas?: {
|
|
372
374
|
getContext(type: "2d"): CanvasRenderingContext2D | null;
|
|
373
375
|
width: number;
|
package/canvas.d.mts
CHANGED
|
@@ -368,6 +368,8 @@ interface CanvasOptions {
|
|
|
368
368
|
width: number;
|
|
369
369
|
height: number;
|
|
370
370
|
pixelRatio?: number;
|
|
371
|
+
imageSmoothingEnabled?: boolean;
|
|
372
|
+
imageSmoothingQuality?: "low" | "medium" | "high";
|
|
371
373
|
canvas?: {
|
|
372
374
|
getContext(type: "2d"): CanvasRenderingContext2D | null;
|
|
373
375
|
width: number;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Box, createCanvas } from "@codehz/draw-call";
|
|
2
|
+
|
|
3
|
+
// 创建 Canvas，禁用图像平滑
|
|
4
|
+
const canvas1 = createCanvas({
|
|
5
|
+
width: 300,
|
|
6
|
+
height: 200,
|
|
7
|
+
pixelRatio: 2,
|
|
8
|
+
imageSmoothingEnabled: false, // 禁用平滑
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
// 创建 Canvas，启用高质量图像平滑
|
|
12
|
+
const canvas2 = createCanvas({
|
|
13
|
+
width: 300,
|
|
14
|
+
height: 200,
|
|
15
|
+
pixelRatio: 2,
|
|
16
|
+
imageSmoothingEnabled: true, // 启用平滑
|
|
17
|
+
imageSmoothingQuality: "high", // 高质量
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
// 示例：渲染图像（实际使用时需要加载图像数据）
|
|
21
|
+
const element = Box({
|
|
22
|
+
width: 300,
|
|
23
|
+
height: 200,
|
|
24
|
+
padding: 20,
|
|
25
|
+
children: [
|
|
26
|
+
// 这里可以添加 Image 组件来测试平滑效果
|
|
27
|
+
Box({
|
|
28
|
+
width: "fill",
|
|
29
|
+
height: "fill",
|
|
30
|
+
background: "#f0f0f0",
|
|
31
|
+
}),
|
|
32
|
+
],
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
canvas1.render(element);
|
|
36
|
+
canvas2.render(element);
|
|
37
|
+
|
|
38
|
+
// 导出图像查看效果差异
|
|
39
|
+
console.log("Canvas 1 (禁用平滑):", canvas1.toDataURL());
|
|
40
|
+
console.log("Canvas 2 (高质量平滑):", canvas2.toDataURL());
|
|
41
|
+
|
|
42
|
+
// 在浏览器环境中，可以将图像显示在页面上
|
|
43
|
+
if (typeof document !== "undefined") {
|
|
44
|
+
document.body.appendChild(canvas1.canvas);
|
|
45
|
+
document.body.appendChild(canvas2.canvas);
|
|
46
|
+
}
|
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 {
|
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 {
|
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 {
|