深度画布

src/components/Canvas/DepthCanvas/tools/canvasFactory.js

@@ -0,0 +1,34 @@
+import { fabric } from "fabric-with-all";
+
+/**
+ * Factory for creating optimized fabric canvas instances
+ */
+export const createCanvas = (elementId, options = {}) => {
+	// Create the canvas instance
+	const canvas = new fabric.Canvas(elementId, {
+		enableRetinaScaling: true,
+		renderOnAddRemove: false,
+		preserveObjectStacking: true, // 保持对象堆叠顺序
+		// skipOffscreen: true, // 跳过离屏渲染
+		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
+		imageSmoothingQuality: "high", // 设置高质量图像平滑
+		...options,
+	});
+
+	return canvas;
+};
+
+/**
+ * Utility to create a static canvas (for improved performance when interaction is not needed)
+ */
+export const createStaticCanvas = (elementId, options = {}) => {
+	const canvas = new fabric.StaticCanvas(elementId, {
+		enableRetinaScaling: true,
+		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
+		imageSmoothingQuality: "high", // 设置高质量图像平滑
+		skipOffscreen: false, // 不跳过离屏渲染
+		...options,
+	});
+
+	return canvas;
+};