调整canvas笔触样式改为图片

src/component/Canvas/CanvasEditor/components/BrushPanel.vue

@@ -14,7 +14,8 @@
               @click="setBrushTypeWithCommand(brush.id)"
               :class="['brush-type-item', { active: brushStore.state.type === brush.id }]"
             >
-              <div class="brush-preview" :style="getBrushPreviewStyle(brush)"></div>
+              <!-- <div class="brush-preview" :style="getBrushPreviewStyle(brush)"></div> -->
+			  <img class="brush-preview" :src="brush.imgUrl" :title="brush.name" alt="">
               <span class="brush-name">{{ brush.name }}</span>
             </div>
           </div>
@@ -886,6 +887,7 @@ onMounted(() => {
     const availableBrushes = toolManager.brushManager
       .getBrushTypes()
       ?.filter((brush) => brush.id !== "eraser");
+	  console.log(availableBrushes)
     BrushStore.setAvailableBrushes(availableBrushes);
   }
 });
@@ -1178,6 +1180,8 @@ const brushStore = BrushStore;
   margin-bottom: 8px;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.02);
+  object-fit: contain;
+  background-color: #fff;
 }
 
 /* 保持笔刷预览内容样式一致 */

src/component/Canvas/CanvasEditor/index.vue

@@ -340,7 +340,7 @@ onMounted(async () => {
     props.redGreenImageUrl
   ) {
     canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色    // 初始化红绿图模式管理器
-    redGreenModeManager = new RedGreenModeManager({
+    redGreenModeManager = new toolManagerRedGreenModeManager({
       canvas: canvasManager.canvas,
       canvasManager,
       layerManager,

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

@@ -65,6 +65,7 @@ export class BrushManager {
       description: "基础铅笔工具，适合精细线条绘制",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/pencil.jpg',
     });
 
     // 注册材质笔刷
@@ -73,6 +74,7 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/texture.jpg',
     });
 
     // 注册集成的笔刷类型
@@ -81,54 +83,63 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/crayon.jpg',
     });
     brushRegistry.register("fur", FurBrush, {
       name: this.t("Canvas.Fur"),	
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/fur.jpg',
     });
     brushRegistry.register("ink", InkBrush, {
       name: this.t("Canvas.Ink"),
       description: "墨水笔刷，适合书写和绘图",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/ink.jpg',
     });
     brushRegistry.register("", LongfurBrush, {
       name: this.t("Canvas.Longfur"),
       description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/longFur.jpg',
     });
     brushRegistry.register("writing", WritingBrush, {
       name: this.t("Canvas.Writing"),
       description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/writing.jpg',
     });
     brushRegistry.register("marker", MarkerBrush, {
       name: this.t("Canvas.Marker"),
       description: "马克笔笔刷，适合粗线条和填充",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/marker.jpg',
     });
     brushRegistry.register("pen", CustomPenBrush, {
       name: this.t("Canvas.Pen"),
       description: "自定义钢笔笔刷，适合书写和绘图",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/pen.jpg',
     });
     brushRegistry.register("ribbon", RibbonBrush, {
       name: this.t("Canvas.Ribbon"),
       description: "丝带笔刷，适合创建流动的丝带效果",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/ribbon.jpg',
     });
     brushRegistry.register("shaded", ShadedBrush, {
       name: this.t("Canvas.Shaded"),
       description: "阴影笔刷，适合创建渐变和阴影效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/shaded.jpg',
     });
 
     brushRegistry.register("spray", SprayBrush, {
@@ -136,6 +147,7 @@ export class BrushManager {
       description: "模拟喷枪效果，创建散点效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/spray.jpg',
     });
 
     // brushRegistry.register("sketchy", SketchyBrush);
@@ -365,6 +377,7 @@ export class BrushManager {
       description: brushInfo.metadata.description || "",
       category: brushInfo.metadata.category || "默认",
       icon: brushInfo.metadata.icon || null,
+      imgUrl: brushInfo.metadata.imgUrl || null,
     }));
   }
 

src/component/Detail/detailRight/editPrintElement.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="editPrintElement">
-		<div class="detailText" style="text-align: left; margin-bottom: 1rem;">
+		<div class="detailText" style="text-align: left; margin-bottom: 1rem;" v-if="type == 'print'">
 			{{ $t('DesignPrintOperation.ModifyPrint') }}
 		</div>
 		<div class="printOverallBtn" v-if="type == 'print'">