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

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,
    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: canvasConfig.enableRetinaScaling,
    imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
    imageSmoothingQuality: "high", // 设置高质量图像平滑
    skipOffscreen: false, // 不跳过离屏渲染
    ...options,
  });

  return canvas;
};