接入画布

src/component/Canvas/CanvasEditor/utils/canvasFactory.js

@@ -0,0 +1,31 @@
+//import { fabric } from "fabric-with-all";
+import { canvasConfig } from "../config/canvasConfig";
+
+/**
+ * Factory for creating optimized fabric canvas instances
+ */
+export const createCanvas = (elementId, options = {}) => {
+  // Create the canvas instance
+  const canvas = new fabric.Canvas(elementId, {
+    enableRetinaScaling: canvasConfig.enableRetinaScaling,
+    renderOnAddRemove: false,
+    enableRetinaScaling: true,
+    preserveObjectStacking: true, // 保持对象堆叠顺序
+    // skipOffscreen: true, // 跳过离屏渲染
+    ...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: canvasConfig.enableRetinaScaling,
+    ...options,
+  });
+
+  return canvas;
+};