@codehz/draw-call 0.5.3 → 0.6.0

package/README.md

@@ -244,7 +244,7 @@ Transform({
 
 ### CustomDraw
 
-自定义绘制组件，提供原生 Canvas 上下文进行自定义绘制。
+自定义绘制组件，提供受控的绘制上下文。原生 Canvas API 可通过 `ctx.canvas` 访问，`save`/`restore`/transform 由 `CustomDrawContext` 管理。
 
 ```typescript
 CustomDraw({
@@ -252,12 +252,12 @@ CustomDraw({
   height: 100,
   draw: (ctx, options) => {
     // 使用原生 Canvas API 进行绘制
-    ctx.fillStyle = "#667eea";
-    ctx.fillRect(10, 10, 180, 80);
-    ctx.fillStyle = "#ffffff";
-    ctx.font = "bold 16px sans-serif";
-    ctx.textAlign = "center";
-    ctx.fillText("Custom Draw", 100, 60);
+    ctx.canvas.fillStyle = "#667eea";
+    ctx.canvas.fillRect(10, 10, 180, 80);
+    ctx.canvas.fillStyle = "#ffffff";
+    ctx.canvas.font = "bold 16px sans-serif";
+    ctx.canvas.textAlign = "center";
+    ctx.canvas.fillText("Custom Draw", 100, 60);
   },
 });
 ```

package/dist/browser/index.cjs

@@ -479,20 +479,40 @@ function buildFontString(font) {
 }
 //#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) {
@@ -769,7 +789,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) {
@@ -1168,121 +1195,88 @@ 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
@@ -1294,7 +1288,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();
@@ -1303,12 +1297,12 @@ 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

package/dist/browser/index.d.cts

@@ -1,4 +1,4 @@
-import { Canvas } from "@napi-rs/canvas";
+import { Canvas, DOMMatrix } from "@napi-rs/canvas";
 
 //#region src/types/base.d.ts
 type Size = number | `${number}%` | "auto" | "fill";
@@ -152,7 +152,19 @@ interface LayoutConstraints {
 //#endregion
 //#region src/types/components.d.ts
 type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack" | "transform" | "customdraw";
-interface ProxiedCanvasContextOptions {
+interface CustomDrawContext {
+  readonly canvas: CanvasRenderingContext2D;
+  save(): void;
+  restore(): void;
+  getTransform(): DOMMatrix;
+  setTransform(transform?: DOMMatrix | [number, number, number, number, number, number]): void;
+  resetTransform(): void;
+  translate(x: number, y: number): void;
+  rotate(angle: number): void;
+  scale(x: number, y?: number): void;
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+}
+interface CustomDrawOptions {
   inner?: () => void;
   width: number;
   height: number;
@@ -357,7 +369,7 @@ interface TransformElement extends ElementBase, TransformProps {
   type: "transform";
 }
 interface CustomDrawProps extends LayoutProps {
-  draw: (ctx: CanvasRenderingContext2D, options: ProxiedCanvasContextOptions) => void;
+  draw: (ctx: CustomDrawContext, options: CustomDrawOptions) => void;
   children?: Element;
 }
 interface CustomDrawElement extends ElementBase, CustomDrawProps {
@@ -451,4 +463,4 @@ declare function printLayout(node: LayoutNode): void;
  */
 declare function layoutToString(node: LayoutNode, _indent?: string): string;
 //#endregion
-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 LayoutElement, 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 };
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawContext, type CustomDrawElement, type CustomDrawOptions, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutElement, type LayoutNode, type LayoutProps, 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, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/dist/browser/index.d.ts

@@ -1,4 +1,4 @@
-import { Canvas } from "@napi-rs/canvas";
+import { Canvas, DOMMatrix } from "@napi-rs/canvas";
 
 //#region src/types/base.d.ts
 type Size = number | `${number}%` | "auto" | "fill";
@@ -152,7 +152,19 @@ interface LayoutConstraints {
 //#endregion
 //#region src/types/components.d.ts
 type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack" | "transform" | "customdraw";
-interface ProxiedCanvasContextOptions {
+interface CustomDrawContext {
+  readonly canvas: CanvasRenderingContext2D;
+  save(): void;
+  restore(): void;
+  getTransform(): DOMMatrix;
+  setTransform(transform?: DOMMatrix | [number, number, number, number, number, number]): void;
+  resetTransform(): void;
+  translate(x: number, y: number): void;
+  rotate(angle: number): void;
+  scale(x: number, y?: number): void;
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+}
+interface CustomDrawOptions {
   inner?: () => void;
   width: number;
   height: number;
@@ -357,7 +369,7 @@ interface TransformElement extends ElementBase, TransformProps {
   type: "transform";
 }
 interface CustomDrawProps extends LayoutProps {
-  draw: (ctx: CanvasRenderingContext2D, options: ProxiedCanvasContextOptions) => void;
+  draw: (ctx: CustomDrawContext, options: CustomDrawOptions) => void;
   children?: Element;
 }
 interface CustomDrawElement extends ElementBase, CustomDrawProps {
@@ -451,4 +463,4 @@ declare function printLayout(node: LayoutNode): void;
  */
 declare function layoutToString(node: LayoutNode, _indent?: string): string;
 //#endregion
-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 LayoutElement, 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 };
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawContext, type CustomDrawElement, type CustomDrawOptions, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutElement, type LayoutNode, type LayoutProps, 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, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/dist/browser/index.js

@@ -478,20 +478,40 @@ function buildFontString(font) {
 }
 //#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) {
@@ -768,7 +788,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) {
@@ -1167,121 +1194,88 @@ 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
@@ -1293,7 +1287,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();
@@ -1302,12 +1296,12 @@ 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