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

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", // 设置高质量图像平滑
		fireMiddleClick: true,// 启用中键点击事件
		fireRightClick: true,// 启用右键点击事件
		stopContextMenu: 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: true,
		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
		imageSmoothingQuality: "high", // 设置高质量图像平滑
		skipOffscreen: false, // 不跳过离屏渲染
		...options,
	});

	return canvas;
};