diff --git a/public/image/brush/PencilBrush-2.jpg b/public/image/brush/PencilBrush-2.jpg deleted file mode 100644 index 4ae64cd3..00000000 Binary files a/public/image/brush/PencilBrush-2.jpg and /dev/null differ diff --git a/public/image/brush/CrayonBrush.jpg b/public/image/brush/crayon.jpg similarity index 100% rename from public/image/brush/CrayonBrush.jpg rename to public/image/brush/crayon.jpg diff --git a/public/image/brush/fur.jpg b/public/image/brush/fur.jpg new file mode 100644 index 00000000..6c4563c9 Binary files /dev/null and b/public/image/brush/fur.jpg differ diff --git a/public/image/brush/InkBrush.jpg b/public/image/brush/ink.jpg similarity index 100% rename from public/image/brush/InkBrush.jpg rename to public/image/brush/ink.jpg diff --git a/public/image/brush/LongfurBrush.jpg b/public/image/brush/longFur.jpg similarity index 100% rename from public/image/brush/LongfurBrush.jpg rename to public/image/brush/longFur.jpg diff --git a/public/image/brush/MarkerBrush.jpg b/public/image/brush/marker.jpg similarity index 100% rename from public/image/brush/MarkerBrush.jpg rename to public/image/brush/marker.jpg diff --git a/public/image/brush/pen.jpg b/public/image/brush/pen.jpg new file mode 100644 index 00000000..450979ad Binary files /dev/null and b/public/image/brush/pen.jpg differ diff --git a/public/image/brush/PencilBrush.jpg b/public/image/brush/pencil.jpg similarity index 100% rename from public/image/brush/PencilBrush.jpg rename to public/image/brush/pencil.jpg diff --git a/public/image/brush/RibbonBrush.jpg b/public/image/brush/ribbon.jpg similarity index 100% rename from public/image/brush/RibbonBrush.jpg rename to public/image/brush/ribbon.jpg diff --git a/public/image/brush/shaded.jpg b/public/image/brush/shaded.jpg new file mode 100644 index 00000000..a60d35c0 Binary files /dev/null and b/public/image/brush/shaded.jpg differ diff --git a/public/image/brush/spray.jpg b/public/image/brush/spray.jpg new file mode 100644 index 00000000..a4ecd7e5 Binary files /dev/null and b/public/image/brush/spray.jpg differ diff --git a/public/image/brush/imgBrush.webp b/public/image/brush/texture.jpg similarity index 100% rename from public/image/brush/imgBrush.webp rename to public/image/brush/texture.jpg diff --git a/public/image/brush/WritingBrush.jpg b/public/image/brush/writing.jpg similarity index 100% rename from public/image/brush/WritingBrush.jpg rename to public/image/brush/writing.jpg diff --git a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue index 0688d390..f78e5935 100644 --- a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue +++ b/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 }]" > -
+ + {{ brush.name }} @@ -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; } /* 保持笔刷预览内容样式一致 */ diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index f72cee5a..7715ed39 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/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, diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js b/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js index 051659ab..15ae7463 100644 --- a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js +++ b/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, })); } diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index 8d445c33..6ee603d6 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/src/component/Detail/detailRight/editPrintElement.vue @@ -1,6 +1,6 @@