fix: 修复多个已知问题

src/component/Canvas/CanvasEditor/store/BrushStore.js

@@ -12,6 +12,13 @@ const state = reactive({
   opacity: 1, // 笔刷透明度
   type: "pencil", // 当前笔刷类型
 
+  // 阴影相关属性
+  shadowEnabled: false, // 是否启用阴影
+  shadowColor: "#000000", // 阴影颜色（默认为笔刷颜色）
+  shadowWidth: 0, // 阴影宽度
+  shadowOffsetX: 0, // 阴影X偏移
+  shadowOffsetY: 0, // 阴影Y偏移
+
   // 笔刷材质相关
   textureScale: 1, // 材质缩放
   textureEnabled: false, // 是否启用材质
@@ -130,6 +137,27 @@ const actions = {
     state.texturePath = path;
   },
 
+  // 阴影相关方法
+  setShadowEnabled(enabled) {
+    state.shadowEnabled = enabled;
+  },
+
+  setShadowColor(color) {
+    state.shadowColor = color;
+  },
+
+  setShadowWidth(width) {
+    state.shadowWidth = Math.max(0, Math.min(50, width));
+  },
+
+  setShadowOffsetX(offsetX) {
+    state.shadowOffsetX = Math.max(-50, Math.min(50, offsetX));
+  },
+
+  setShadowOffsetY(offsetY) {
+    state.shadowOffsetY = Math.max(-50, Math.min(50, offsetY));
+  },
+
   setAvailableBrushes(brushes) {
     state.availableBrushes = brushes;
   },
@@ -611,4 +639,78 @@ export const BrushStore = {
 
     return `rgba(${r}, ${g}, ${b}, ${state.opacity})`;
   },
+
+  /**
+   * 获取当前笔刷的实际绘制颜色（包含透明度）
+   * @returns {String} RGBA格式的颜色字符串
+   */
+  getCurrentBrushColor() {
+    return this.getRGBAColor();
+  },
+
+  /**
+   * 从RGBA颜色字符串中提取RGB值
+   * @param {String} rgbaColor RGBA颜色字符串
+   * @returns {Object} {r, g, b, a} 颜色值对象
+   */
+  parseRGBAColor(rgbaColor) {
+    const rgbaMatch = rgbaColor.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+    );
+    if (rgbaMatch) {
+      return {
+        r: parseInt(rgbaMatch[1]),
+        g: parseInt(rgbaMatch[2]),
+        b: parseInt(rgbaMatch[3]),
+        a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1,
+      };
+    }
+    return null;
+  },
+
+  /**
+   * 将RGB值转换为十六进制颜色
+   * @param {Number} r 红色值 (0-255)
+   * @param {Number} g 绿色值 (0-255)
+   * @param {Number} b 蓝色值 (0-255)
+   * @returns {String} 十六进制颜色字符串
+   */
+  rgbToHex(r, g, b) {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  },
+
+  /**
+   * 获取当前阴影配置对象
+   * @returns {Object|null} fabric.Shadow配置对象或null
+   */
+  getShadowConfig() {
+    if (!state.shadowEnabled) {
+      return null;
+    }
+
+    return {
+      color: state.shadowColor,
+      blur: state.shadowWidth,
+      offsetX: state.shadowOffsetX,
+      offsetY: state.shadowOffsetY,
+    };
+  },
+
+  /**
+   * 创建fabric.Shadow实例
+   * @returns {fabric.Shadow|null} fabric.Shadow实例或null
+   */
+  createFabricShadow() {
+    const config = this.getShadowConfig();
+    if (!config) {
+      return null;
+    }
+
+    // 确保fabric已加载
+    if (typeof fabric !== "undefined" && fabric.Shadow) {
+      return new fabric.Shadow(config);
+    }
+
+    return null;
+  },
 };