fix: 修复多个已知问题

src/component/Canvas/CanvasEditor/managers/brushes/BaseBrush.js

@@ -36,8 +36,137 @@ export class BaseBrush {
    * @param {Object} brush fabric笔刷实例
    * @param {Object} options 配置选项
    */
-  configure(brush, options) {
-    throw new Error("必须由子类实现configure方法");
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined && options.opacity !== undefined) {
+      // 使用RGBA颜色而不是设置globalAlpha
+      brush.color = this._createRGBAColor(options.color, options.opacity);
+      brush.opacity = 1; // 保持fabric层面的opacity为1
+    } else if (options.color !== undefined) {
+      brush.color = options.color;
+    } else if (options.opacity !== undefined) {
+      // 如果只设置了透明度，基于当前颜色创建RGBA
+      const currentColor = brush.color || this.options.color || "#000000";
+      brush.color = this._createRGBAColor(currentColor, options.opacity);
+      brush.opacity = 1;
+    }
+
+    // 配置阴影
+    this.configureShadow(brush, options);
+
+    // 确保不使用globalAlpha，避免圆圈绘制问题
+    if (brush.canvas && brush.canvas.contextTop) {
+      brush.canvas.contextTop.globalAlpha = 1;
+      brush.canvas.contextTop.lineCap = "round";
+      brush.canvas.contextTop.lineJoin = "round";
+      brush.canvas.contextTop.globalCompositeOperation = "source-over";
+    }
+  }
+
+  /**
+   * 配置笔刷阴影
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configureShadow(brush, options = {}) {
+    if (!brush) return;
+
+    // 简化的阴影配置获取方法
+    let shadowConfig = null;
+
+    // 尝试从全局获取BrushStore（在Vue组件中已经导入）
+    if (typeof window !== "undefined" && window.BrushStore) {
+      shadowConfig = window.BrushStore.getShadowConfig();
+    } else {
+      // 如果没有全局BrushStore，尝试从选项中获取
+      if (options.shadowEnabled) {
+        shadowConfig = {
+          color: options.shadowColor || "#000000",
+          blur: options.shadowWidth || 0,
+          offsetX: options.shadowOffsetX || 0,
+          offsetY: options.shadowOffsetY || 0,
+        };
+      }
+    }
+
+    if (shadowConfig) {
+      // 创建fabric.Shadow实例
+      if (typeof fabric !== "undefined" && fabric.Shadow) {
+        brush.shadow = new fabric.Shadow(shadowConfig);
+      }
+    } else {
+      // 清除阴影
+      brush.shadow = null;
+    }
+  }
+
+  /**
+   * 更新笔刷阴影设置
+   */
+  updateShadow() {
+    if (this.brush) {
+      this.configureShadow(this.brush);
+    }
+  }
+
+  /**
+   * 创建RGBA颜色字符串
+   * @private
+   * @param {String} color 十六进制颜色或已有颜色
+   * @param {Number} opacity 透明度 (0-1)
+   * @returns {String} RGBA颜色字符串
+   */
+  _createRGBAColor(color, opacity) {
+    // 如果已经是rgba颜色，先提取RGB部分
+    if (color.startsWith("rgba")) {
+      const rgbaMatch = color.match(
+        /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
+      );
+      if (rgbaMatch) {
+        const [, r, g, b] = rgbaMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 如果是rgb颜色，提取RGB部分
+    if (color.startsWith("rgb")) {
+      const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      if (rgbMatch) {
+        const [, r, g, b] = rgbMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 处理十六进制颜色
+    if (color.startsWith("#")) {
+      const hex = color.replace("#", "");
+      let r, g, b;
+
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+      } else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+      } else {
+        // 无效的十六进制颜色，使用默认
+        r = g = b = 0;
+      }
+
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    // 如果是其他格式的颜色，尝试转换（例如颜色名称）
+    // 这里简化处理，实际项目中可以使用更复杂的颜色解析
+    return color; // fallback到原颜色
   }
 
   /**
@@ -145,23 +274,26 @@ export class BaseBrush {
    * @returns {Boolean} 是否更新成功
    */
   updateProperty(propId, value) {
-    // 基础实现，可以被子类覆盖以处理特殊属性
     if (propId === "size") {
       if (this.brush) {
         this.brush.width = value;
-        return true;
+        this.configure(this.brush, { width: value });
       }
+      return true;
     } else if (propId === "color") {
       if (this.brush) {
         this.brush.color = value;
-        return true;
+        this.configure(this.brush, { color: value });
       }
+      return true;
     } else if (propId === "opacity") {
       if (this.brush) {
         this.brush.opacity = value;
-        return true;
+        this.configure(this.brush, { opacity: value });
       }
+      return true;
     }
+
     return false;
   }