@codehz/draw-call 0.5.2 → 0.6.0

package/{node → dist/node}/index.mjs

@@ -1,10 +1,8 @@
 import { DOMMatrix, Path2D, createCanvas as createCanvas$1 } from "@napi-rs/canvas";
-
 //#region src/compat/index.ts
 function createRawCanvas(width, height) {
 	return createCanvas$1(width, height);
 }
-
 //#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
@@ -75,7 +73,6 @@ function normalizeBorderRadius(value) {
 	];
 	return value;
 }
-
 //#endregion
 //#region src/layout/components/box.ts
 /**
@@ -188,7 +185,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/customDraw.ts
 /**
@@ -205,7 +201,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -231,7 +226,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/richtext.ts
 /**
@@ -399,7 +393,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 	}];
 	return lines;
 }
-
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -436,7 +429,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/svg.ts
 /**
@@ -470,7 +462,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/render/utils/font.ts
 /**
@@ -481,23 +472,42 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 function buildFontString(font) {
 	return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
 }
-
 //#endregion
 //#region src/layout/utils/measure.ts
+const MEASURE_CACHE_LIMIT = 256;
 function createCanvasMeasureContext(ctx) {
+	const cache = /* @__PURE__ */ new Map();
+	let lastFontString = null;
 	return { measureText(text, font) {
-		ctx.font = buildFontString(font);
-		ctx.textBaseline = "middle";
+		const fontString = buildFontString(font);
+		const key = fontString + "\0" + text;
+		const hit = cache.get(key);
+		if (hit !== void 0) {
+			cache.delete(key);
+			cache.set(key, hit);
+			return hit;
+		}
+		if (fontString !== lastFontString) {
+			ctx.font = fontString;
+			ctx.textBaseline = "middle";
+			lastFontString = fontString;
+		}
 		const metrics = ctx.measureText(text);
 		const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
 		const fontSize = font.size || 16;
-		return {
+		const result = {
 			width: metrics.width,
 			height: height || fontSize,
 			offset: (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2,
 			ascent: metrics.actualBoundingBoxAscent,
 			descent: metrics.actualBoundingBoxDescent
 		};
+		if (cache.size >= MEASURE_CACHE_LIMIT) {
+			const oldest = cache.keys().next().value;
+			if (oldest !== void 0) cache.delete(oldest);
+		}
+		cache.set(key, result);
+		return result;
 	} };
 }
 function wrapText(ctx, text, maxWidth, font) {
@@ -573,7 +583,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
 		offset
 	};
 }
-
 //#endregion
 //#region src/layout/components/text.ts
 /**
@@ -599,7 +608,6 @@ function measureTextSize(element, ctx, availableWidth) {
 		height: Math.max(height, lineHeightPx)
 	};
 }
-
 //#endregion
 //#region src/layout/components/transform.ts
 /**
@@ -610,7 +618,6 @@ function measureTextSize(element, ctx, availableWidth) {
 function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
 	return measureIntrinsicSize(element.children, ctx, availableWidth);
 }
-
 //#endregion
 //#region src/layout/components/index.ts
 /**
@@ -632,7 +639,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		};
 	}
 }
-
 //#endregion
 //#region src/layout/utils/offset.ts
 /**
@@ -645,7 +651,6 @@ function applyOffset(node, dx, dy) {
 	node.layout.contentY += dy;
 	for (const child of node.children) applyOffset(child, dx, dy);
 }
-
 //#endregion
 //#region src/types/layout.ts
 function resolveSize(size, available, auto) {
@@ -660,7 +665,6 @@ function sizeNeedsParent(size) {
 	if (typeof size === "string" && size.endsWith("%")) return true;
 	return false;
 }
-
 //#endregion
 //#region src/layout/engine.ts
 /**
@@ -780,7 +784,14 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	if (layoutElement.type === "richtext") {
 		const lineHeight = layoutElement.lineHeight ?? 1.2;
-		let lines = wrapRichText(ctx, layoutElement.spans, contentWidth, lineHeight);
+		const elementStyle = {
+			font: layoutElement.font,
+			color: layoutElement.color,
+			background: layoutElement.background,
+			underline: layoutElement.underline,
+			strikethrough: layoutElement.strikethrough
+		};
+		let lines = wrapRichText(ctx, layoutElement.spans, contentWidth, lineHeight, elementStyle);
 		if (layoutElement.maxLines && lines.length > layoutElement.maxLines) {
 			lines = lines.slice(0, layoutElement.maxLines);
 			if (layoutElement.ellipsis && lines.length > 0) {
@@ -1078,7 +1089,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/utils/colors.ts
 function isGradientDescriptor$1(color) {
@@ -1114,7 +1124,6 @@ function resolveColor$1(ctx, color, x, y, width, height) {
 	if (isGradientDescriptor$1(color)) return resolveGradient$1(ctx, color, x, y, width, height);
 	return color;
 }
-
 //#endregion
 //#region src/render/utils/shadows.ts
 function applyShadow$1(ctx, shadow) {
@@ -1136,7 +1145,6 @@ function clearShadow$1(ctx) {
 	ctx.shadowBlur = 0;
 	ctx.shadowColor = "transparent";
 }
-
 //#endregion
 //#region src/render/utils/shapes.ts
 function roundRectPath(ctx, x, y, width, height, radius) {
@@ -1153,7 +1161,6 @@ function roundRectPath(ctx, x, y, width, height, radius) {
 	ctx.quadraticCurveTo(x, y, x + tl, y);
 	ctx.closePath();
 }
-
 //#endregion
 //#region src/render/components/box.ts
 function renderBox(ctx, node) {
@@ -1182,125 +1189,90 @@ function renderBox(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
-//#region src/render/components/ProxiedCanvasContext.ts
-/**
-* ProxiedCanvasContext - Canvas 上下文代理类
-*
-* 该类提供对真实 CanvasRenderingContext2D 的代理，有以下功能：
-* 1. 管理 save/restore 的平衡（计数器）
-* 2. 追踪相对变换而不是绝对变换
-* 3. 在析构时自动恢复所有未恢复的状态
-* 4. 转发所有其他 Canvas API 调用
-*/
-var ProxiedCanvasContext = class {
-	/**
-	* 真实的 Canvas 上下文
-	*/
-	ctx;
-	/**
-	* 基础变换矩阵（初始化时设置，保持不变）
-	*/
+//#region src/render/components/CustomDrawContext.ts
+function cloneMatrix(matrix) {
+	return new DOMMatrix([
+		matrix.a,
+		matrix.b,
+		matrix.c,
+		matrix.d,
+		matrix.e,
+		matrix.f
+	]);
+}
+function toRelativeMatrix(transform) {
+	if (transform === void 0) return new DOMMatrix();
+	if (transform instanceof DOMMatrix) return cloneMatrix(transform);
+	return new DOMMatrix(transform);
+}
+var ManagedCustomDrawContext = class {
+	canvas;
 	baseTransform;
-	/**
-	* 相对变换矩阵（用户通过 setTransform 设置）
-	*/
 	relativeTransform;
-	/**
-	* save/restore 计数器
-	*/
+	transformStack = [];
 	saveCount = 0;
-	/**
-	* 构造函数
-	* @param ctx 真实的 CanvasRenderingContext2D
-	* @param baseTransform 初始的基础变换矩阵
-	*/
-	constructor(ctx, baseTransform) {
-		this.ctx = ctx;
-		this.baseTransform = baseTransform;
+	constructor(canvas, baseTransform) {
+		this.canvas = canvas;
+		this.baseTransform = cloneMatrix(baseTransform);
 		this.relativeTransform = new DOMMatrix();
 	}
-	/**
-	* save() - 保存当前状态并增加计数
-	*/
 	save() {
 		this.saveCount++;
-		this.ctx.save();
+		this.transformStack.push(cloneMatrix(this.relativeTransform));
+		this.canvas.save();
 	}
-	/**
-	* restore() - 恢复上一个状态并减少计数
-	*/
 	restore() {
-		if (this.saveCount > 0) {
-			this.saveCount--;
-			this.ctx.restore();
-		}
+		if (this.saveCount === 0) return;
+		this.saveCount--;
+		this.relativeTransform = this.transformStack.pop() ?? new DOMMatrix();
+		this.canvas.restore();
+		this.applyRelativeTransform();
 	}
-	/**
-	* setTransform() - 设置相对变换
-	*/
-	setTransform(...args) {
-		let matrix;
-		if (args.length === 1 && args[0] instanceof DOMMatrix) matrix = args[0];
-		else if (args.length === 6) matrix = new DOMMatrix([
-			args[0],
-			args[1],
-			args[2],
-			args[3],
-			args[4],
-			args[5]
-		]);
-		else return;
-		this.relativeTransform = matrix;
-		const actualTransform = this.baseTransform.multiply(matrix);
-		this.ctx.setTransform(actualTransform);
-	}
-	/**
-	* getTransform() - 返回相对变换（而不是绝对变换）
-	*/
 	getTransform() {
-		return this.relativeTransform;
+		return cloneMatrix(this.relativeTransform);
+	}
+	setTransform(transform) {
+		this.relativeTransform = toRelativeMatrix(transform);
+		this.applyRelativeTransform();
+	}
+	resetTransform() {
+		this.relativeTransform = new DOMMatrix();
+		this.applyRelativeTransform();
+	}
+	translate(x, y) {
+		this.relativeTransform = this.relativeTransform.translate(x, y);
+		this.applyRelativeTransform();
+	}
+	rotate(angle) {
+		this.relativeTransform = this.relativeTransform.rotate(angle * 180 / Math.PI);
+		this.applyRelativeTransform();
+	}
+	scale(x, y) {
+		this.relativeTransform = this.relativeTransform.scale(x, y ?? x);
+		this.applyRelativeTransform();
+	}
+	transform(a, b, c, d, e, f) {
+		this.relativeTransform = this.relativeTransform.multiply(new DOMMatrix([
+			a,
+			b,
+			c,
+			d,
+			e,
+			f
+		]));
+		this.applyRelativeTransform();
 	}
-	/**
-	* 析构函数级的清理 - 自动恢复所有未恢复的 save
-	*/
 	destroy() {
-		while (this.saveCount > 0) {
-			console.log("destroy restore", this.saveCount);
-			this.saveCount--;
-			this.ctx.restore();
-		}
+		while (this.saveCount > 0) this.restore();
+	}
+	applyRelativeTransform() {
+		this.canvas.setTransform(this.baseTransform.multiply(this.relativeTransform));
 	}
 };
-function createProxiedCanvasContext(ctx, baseTransform) {
-	const proxy = new ProxiedCanvasContext(ctx, baseTransform);
-	return new Proxy(proxy, {
-		get(target, prop, receiver) {
-			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return Reflect.get(target, prop, receiver).bind(proxy);
-			const ownValue = Reflect.get(target, prop, receiver);
-			if (ownValue !== void 0) return ownValue;
-			const contextValue = target.ctx[prop];
-			if (typeof contextValue === "function") return contextValue.bind(target.ctx);
-			return contextValue;
-		},
-		set(target, prop, value, _receiver) {
-			target.ctx[prop] = value;
-			return true;
-		},
-		has(target, prop) {
-			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return true;
-			return prop in target.ctx;
-		},
-		ownKeys(target) {
-			return Reflect.ownKeys(target.ctx);
-		},
-		getOwnPropertyDescriptor(target, prop) {
-			return Reflect.getOwnPropertyDescriptor(target.ctx, prop);
-		}
-	});
+function createCustomDrawContext(canvas, baseTransform) {
+	return new ManagedCustomDrawContext(canvas, baseTransform);
 }
-
 //#endregion
 //#region src/render/components/customDraw.ts
 /**
@@ -1311,7 +1283,7 @@ function renderCustomDraw(ctx, node) {
 	const element = node.element;
 	ctx.save();
 	ctx.translate(node.layout.x, node.layout.y);
-	const proxyCtx = createProxiedCanvasContext(ctx, ctx.getTransform());
+	const customCtx = createCustomDrawContext(ctx, ctx.getTransform());
 	const inner = () => {
 		if (node.children && node.children.length > 0) {
 			ctx.save();
@@ -1320,15 +1292,14 @@ function renderCustomDraw(ctx, node) {
 			ctx.restore();
 		}
 	};
-	element.draw(proxyCtx, {
+	element.draw(customCtx, {
 		inner,
 		width: node.layout.contentWidth,
 		height: node.layout.contentHeight
 	});
-	proxyCtx.destroy();
+	customCtx.destroy();
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/image.ts
 function renderImage(ctx, node) {
@@ -1414,7 +1385,6 @@ function renderImage(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
 //#region src/render/components/richtext.ts
 function renderRichText(ctx, node) {
@@ -1465,7 +1435,6 @@ function renderRichText(ctx, node) {
 		currentY += line.height;
 	}
 }
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1737,7 +1706,6 @@ function renderSvg(ctx, node) {
 	for (const child of element.children) renderSvgChild(ctx, child, transform, bounds, baseTransform);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/text.ts
 function renderText(ctx, node) {
@@ -1772,7 +1740,6 @@ function renderText(ctx, node) {
 	}
 	if (element.shadow) clearShadow$1(ctx);
 }
-
 //#endregion
 //#region src/render/components/transform.ts
 /**
@@ -1848,7 +1815,6 @@ function renderTransform(ctx, node) {
 	renderNode(ctx, childNode);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1888,7 +1854,6 @@ function renderNode(ctx, node) {
 			break;
 	}
 }
-
 //#endregion
 //#region src/canvas.ts
 /**
@@ -1958,7 +1923,6 @@ function createCanvas(options) {
 		}
 	};
 }
-
 //#endregion
 //#region src/components/Box.ts
 function Box(props) {
@@ -1967,7 +1931,6 @@ function Box(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/CustomDraw.ts
 function CustomDraw(props) {
@@ -1976,7 +1939,6 @@ function CustomDraw(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -1985,7 +1947,6 @@ function Image(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/RichText.ts
 function RichText(props) {
@@ -1994,7 +1955,6 @@ function RichText(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -2003,7 +1963,6 @@ function Stack(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Svg.ts
 function Svg(props) {
@@ -2050,7 +2009,6 @@ const svg = {
 		...props
 	})
 };
-
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -2059,7 +2017,6 @@ function Text(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Transform.ts
 function Transform(props) {
@@ -2068,7 +2025,6 @@ function Transform(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/layout/utils/print.ts
 /**
@@ -2128,6 +2084,5 @@ function printLayout(node) {
 function layoutToString(node, _indent = "  ") {
 	return printLayoutToString(node, "", true).join("\n");
 }
-
 //#endregion
-export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
+export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/examples/card.ts

@@ -2,7 +2,7 @@
  * 示例：使用 draw-call 绘制一个卡片
  * 运行: bun examples/card.ts
  */
-import { Box, createCanvas, linearGradient, printLayout, Svg, svg, Text } from "@codehz/draw-call";
+import { Box, createCanvas, linearGradient, printLayout, Svg, svg, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/customdraw-basic.ts

@@ -3,7 +3,7 @@
  * 展示如何使用 CustomDraw 进行简单的自定义绘制
  * 运行: bun examples/customdraw-basic.ts
  */
-import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 
@@ -20,13 +20,14 @@ const SimpleRect = CustomDraw({
   width: 150,
   height: 80,
   draw(ctx, { width, height }) {
-    ctx.fillStyle = "#667eea";
-    ctx.fillRect(0, 0, width, height);
-    ctx.fillStyle = "#000000";
-    ctx.font = "bold 16px sans-serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText("Simple Rect", width / 2, height / 2);
+    const canvas = ctx.canvas;
+    canvas.fillStyle = "#667eea";
+    canvas.fillRect(0, 0, width, height);
+    canvas.fillStyle = "#000000";
+    canvas.font = "bold 16px sans-serif";
+    canvas.textAlign = "center";
+    canvas.textBaseline = "middle";
+    canvas.fillText("Simple Rect", width / 2, height / 2);
   },
 });
 
@@ -35,20 +36,21 @@ const RotatedRect = CustomDraw({
   width: 150,
   height: 80,
   draw(ctx, { width, height }) {
+    const canvas = ctx.canvas;
     // save/restore 会自动平衡，即使不显式调用也能正确恢复
     ctx.save();
     ctx.translate(width / 2, height / 2);
     ctx.rotate((Math.PI / 4) * 0.3); // 15 度
-    ctx.fillStyle = "#764ba2";
-    ctx.fillRect(-width / 2, -height / 2, width, height);
+    canvas.fillStyle = "#764ba2";
+    canvas.fillRect(-width / 2, -height / 2, width, height);
     ctx.restore();
 
     // 恢复后可以正常绘制
-    ctx.fillStyle = "#000000";
-    ctx.font = "16px sans-serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText("Rotated", width / 2, height / 2);
+    canvas.fillStyle = "#000000";
+    canvas.font = "16px sans-serif";
+    canvas.textAlign = "center";
+    canvas.textBaseline = "middle";
+    canvas.fillText("Rotated", width / 2, height / 2);
   },
 });
 
@@ -57,24 +59,25 @@ const CircleProgress = CustomDraw({
   width: 140,
   height: 140,
   draw(ctx, { width, height, inner }) {
+    const canvas = ctx.canvas;
     const centerX = width / 2;
     const centerY = height / 2;
     const radius = Math.min(width, height) / 2 - 8;
 
     // 绘制背景圆
-    ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
-    ctx.lineWidth = 8;
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-    ctx.stroke();
+    canvas.strokeStyle = "rgba(0, 0, 0, 0.1)";
+    canvas.lineWidth = 8;
+    canvas.beginPath();
+    canvas.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    canvas.stroke();
 
     // 绘制进度圆（65% 完成）
     const percentage = 65;
-    ctx.strokeStyle = "#ff6b6b";
-    ctx.lineCap = "round";
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + (percentage / 100) * Math.PI * 2);
-    ctx.stroke();
+    canvas.strokeStyle = "#ff6b6b";
+    canvas.lineCap = "round";
+    canvas.beginPath();
+    canvas.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + (percentage / 100) * Math.PI * 2);
+    canvas.stroke();
 
     // 调用 inner() 在中央渲染子元素（百分比文本）
     inner?.();
@@ -99,14 +102,15 @@ const StarShape = CustomDraw({
   width: 150,
   height: 150,
   draw(ctx, { width, height }) {
+    const canvas = ctx.canvas;
     const centerX = width / 2;
     const centerY = height / 2;
     const points = 5;
     const outerRadius = Math.min(width, height) / 2 - 5;
     const innerRadius = outerRadius * 0.4;
 
-    ctx.fillStyle = "#ffd93d";
-    ctx.beginPath();
+    canvas.fillStyle = "#ffd93d";
+    canvas.beginPath();
 
     for (let i = 0; i < points * 2; i++) {
       const radius = i % 2 === 0 ? outerRadius : innerRadius;
@@ -115,19 +119,19 @@ const StarShape = CustomDraw({
       const y = centerY + radius * Math.sin(angle);
 
       if (i === 0) {
-        ctx.moveTo(x, y);
+        canvas.moveTo(x, y);
       } else {
-        ctx.lineTo(x, y);
+        canvas.lineTo(x, y);
       }
     }
 
-    ctx.closePath();
-    ctx.fill();
+    canvas.closePath();
+    canvas.fill();
 
     // 描边
-    ctx.strokeStyle = "#fa8c16";
-    ctx.lineWidth = 2;
-    ctx.stroke();
+    canvas.strokeStyle = "#fa8c16";
+    canvas.lineWidth = 2;
+    canvas.stroke();
   },
 });
 
@@ -246,7 +250,7 @@ const layout = canvas.render(
           }),
           Text({
             content:
-              "CustomDraw 支持直接调用 Canvas API。内部的 save/restore 会自动平衡，transform 也会自动相对处理。使用 inner() 方法可以在自定义绘制中渲染子元素。",
+              "CustomDraw 提供受控的 transform/save/restore 能力，并通过 ctx.canvas 暴露原生 Canvas API。使用 inner() 方法可以在自定义绘制中渲染子元素。",
             font: { size: 12, family: "unifont" },
             color: "#1890ff",
             wrap: true,