深度画布

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;
+};

src/components/Canvas/DepthCanvas/tools/index.ts

@@ -0,0 +1,61 @@
+/**
+ * 精确检测设备类型，区分 PC、Mac、平板和移动设备
+ * @private
+ * @returns {Object} 设备信息对象
+ */
+export const detectDeviceType = () => {
+	const userAgent = navigator.userAgent.toLowerCase();
+	const platform = navigator.platform.toLowerCase();
+	const hasTouchSupport =
+		"ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+	// 检测操作系统
+	const isMac = /mac|darwin/.test(platform) || /macintosh/.test(userAgent);
+	const isWindows = /win/.test(platform);
+	const isLinux = /linux/.test(platform) && !/android/.test(userAgent);
+
+	// 检测设备类型 - 修复iPad检测逻辑
+	const isMobile = /mobile|phone|android.*mobile|iphone/.test(userAgent);
+	// 修复iPad检测：包括iOS iPad和Android平板
+	const isTablet =
+		/tablet|ipad|android(?!.*mobile)/.test(userAgent) ||
+		/ipad/.test(userAgent) ||
+		(navigator.maxTouchPoints &&
+			navigator.maxTouchPoints > 1 &&
+			/mac/.test(userAgent));
+	const isDesktop = !isMobile && !isTablet;
+
+	// 检测浏览器类型（用于特定优化）
+	const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
+	const isChrome = /chrome/.test(userAgent);
+	const isFirefox = /firefox/.test(userAgent);
+
+	// 调试日志 - 仅在开发环境输出
+	if (process.env.NODE_ENV === "development") {
+		//   console.log("设备检测结果:", {
+		//     userAgent,
+		//     platform,
+		//     isMobile,
+		//     isTablet,
+		//     isDesktop,
+		//     hasTouchSupport,
+		//     maxTouchPoints: navigator.maxTouchPoints,
+		//   });
+	}
+	return {
+		isMac,
+		isWindows,
+		isLinux,
+		isMobile,
+		isTablet,
+		isDesktop,
+		isSafari,
+		isChrome,
+		isFirefox,
+		hasTouchSupport,
+		// 判断是否应该使用触摸事件作为主要交互方式
+		preferTouchEvents: (isMobile || isTablet) && !isDesktop,
+		// 判断是否需要特殊的 Mac 触控板处理
+		needsMacTrackpadOptimization: isMac && isDesktop && hasTouchSupport,
+	};
+}

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

@@ -0,0 +1,66 @@
+
+/**
+ * 图层类型枚举
+ */
+export const LayerType = {
+	EMPTY: "empty", // 空图层
+	BITMAP: "bitmap", // 位图图层
+	VECTOR: "vector", // 矢量图层
+	TEXT: "text", // 文字图层
+	GROUP: "group", // 组图层
+	ADJUSTMENT: "adjustment", // 调整图层
+	SMART_OBJECT: "smartObject", // 智能对象
+	SHAPE: "shape", // 形状图层
+	VIDEO: "video", // 视频图层 (预留)
+	AUDIO: "audio", // 音频图层 (预留)
+	FIXED: "fixed", // 固定图层 - 位于背景图层之上，普通图层之下
+	BACKGROUND: "background", // 背景图层 - 位于固定图层之、普通图层之下
+};
+
+
+/**
+ * 画布操作模式枚举：draw(绘画)、select(选择)、pan(拖拽)....
+ */
+export const OperationType = {
+	// 编辑器模式
+	DISABLED: "disabled", // 禁用
+
+	SELECT: "select",// 选择工具模式
+	PAN: "pan", // 拖拽模式
+	DRAW: "draw", // 绘画模式
+	ERASER: "eraser", // 橡皮擦模式
+	IMAGE: "image",// 图片工具模式
+	SELECTBOX: "selectbox",// 选择框工具模式
+	RECTANGLE: "rectangle",// 矩形工具模式
+	TEXT: "text",// 文字工具模式
+	UNDO: "undo",// 撤销工具模式
+	REDO: "redo",// 重做工具模式
+};
+
+// 所有操作模式类型列表
+export const OperationTypes = Object.values(OperationType);
+
+/**
+ * 混合模式枚举
+ * 与 fabricjs 和 CSS3 的 globalCompositeOperation 对应
+ */
+export const BlendMode = {
+	NORMAL: "source-over", // 正常模式
+	MULTIPLY: "multiply", // 正片叠底
+	SCREEN: "screen", // 滤色
+	OVERLAY: "overlay", // 叠加
+	DARKEN: "darken", // 变暗
+	LIGHTEN: "lighten", // 变亮
+	COLOR_DODGE: "color-dodge", // 颜色减淡
+	COLOR_BURN: "color-burn", // 颜色加深
+	HARD_LIGHT: "hard-light", // 强光
+	SOFT_LIGHT: "soft-light", // 柔光
+	DIFFERENCE: "difference", // 差值
+	EXCLUSION: "exclusion", // 排除
+	HUE: "hue", // 色相
+	SATURATION: "saturation", // 饱和度
+	COLOR: "color", // 颜色
+	LUMINOSITY: "luminosity", // 明度
+	DESTINATION_IN: "destination-in", // 目标内
+	DESTINATION_OUT: "destination-out", // 目标外
+};