画布增加的新功能

src/component/Canvas/canvasExample.vue

@@ -9,7 +9,7 @@ import ToolButton from "@/component/Canvas/ExistsImageList/ToolButton.vue";
 const canvasEditor = ref();
 const currentView = ref("canvasEditor"); // 默认显示红绿图示例 canvasEditor      redGreenExample
 
-const clothingImageUrl = "/src/assets/work/3.PNG";
+const clothingImageUrl = "https://www.minio-api.aida.com.hk/aida-collection-element/24299/Printboard/4eba03bd-4367-4c69-b1a3-3f3177a1be1f.jpg?response-content-type=image%2Fjpeg&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251217%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251217T081126Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b8223ba37625370c9716024536a08ce1ee5c5a7aaefc47d9baf8bd1e0e4d2d91";
 const clothingImageUrlInit = "/src/assets/work/5.PNG";
 
 const imageData = [
@@ -84,6 +84,20 @@ const exportImage = async () => {
     document.body.removeChild(link); // 下载后移除链接元素
   }
 };
+// 导出颜色图层
+const exportColorLayer = async () => {
+  if (canvasEditor.value) {
+    const colorLayer = await canvasEditor.value.exportColorLayer();
+	console.log("导出颜色图层:",colorLayer);
+    // 模拟下载图片
+    const link = document.createElement("a");
+    link.href = colorLayer.base64;
+    link.download = "canvas_image.png"; // 设置下载文件名
+    document.body.appendChild(link);
+    link.click(); // 触发下载
+    document.body.removeChild(link); // 下载后移除链接元素
+  }
+};
 
 const changeCanvas = (command) => {
   console.log(command);
@@ -106,32 +120,6 @@ const loadImageUrlToLayer = async () => {
   }
 };
 
-// 自定义工具配置相关
-const customToolsList = ref([
-  {
-    id: "exportPNG",
-    title: "导出PNG", //导出画布图片
-    action: exportAsPNG,
-    icon: { name: "CExport", size: "24" },
-    class: "export-btn",
-  },
-  {
-    id: "saveCanvas",
-    title: "保存画布",
-    action: saveCanvas,
-    icon: { name: "CBottom", size: "24" },
-    class: "save-btn",
-  },
-
-  {
-    id: "readCanvas",
-    title: "读取画布",
-    action: canvasProject,
-    icon: { name: "CMiniMap", size: "24" },
-    class: "clear-btn",
-  },
-]);
-
 // 自定义工具方法
 function exportAsPNG() {
   console.log("导出PNG");
@@ -201,10 +189,89 @@ const canvasInit = () => {
 };
 
 const frontBackChange =(value)=>{
-	console.log(value)
 }
 
-const isShowLeft = ref(true);
+// 自定义工具配置相关
+const customToolsList = ref([
+  {
+    id: "exportPNG",
+    title: "导出颜色图层",
+    action: exportColorLayer,
+	label: "导颜",
+    class: "export-btn",
+  },
+  {
+    id: "exportPNG",
+    title: "导出PNG", //导出画布图片
+    action: exportAsPNG,
+    icon: { name: "CExport", size: "24" },
+    class: "export-btn",
+  },
+  {
+    id: "saveCanvas",
+    title: "保存画布",
+    action: saveCanvas,
+    icon: { name: "CBottom", size: "24" },
+    class: "save-btn",
+  },
+
+  {
+    id: "readCanvas",
+    title: "读取画布",
+    action: canvasProject,
+    icon: { name: "CMiniMap", size: "24" },
+    class: "clear-btn",
+  },
+  {
+    id: "loadImageUrlToLayer",
+    title: "添加画布图片",
+    action: loadImageUrlToLayer,
+	label: "🎨",
+    class: "export-btn",
+  },
+  {
+    id: "redGreenExample",
+    title: "红绿图模式",
+    action: () => switchView('redGreenExample'),
+	label: "红",
+    class: "export-btn",
+  },
+  {
+    id: "canvasEditor",
+    title: "普通模式",
+    action: () => switchView('canvasEditor'),
+	label: "普",
+    class: "export-btn",
+  },
+  {
+    id: "changeFixedImage",
+    title: "更换底图",
+    action: changeFixedImage,
+	label: "更",
+    class: "export-btn",
+  },
+  {
+    id: "exportJSON",
+    title: "导出JSON",
+    action: exportJSON,
+	label: "导J",
+    class: "export-btn",
+  },
+  {
+    id: "copyJSON",
+    title: "复制JSON",
+    action: copyJSON,
+	label: "复J",
+    class: "export-btn",
+  },
+  {
+    id: "getLayers",
+    title: "查询图层",
+    action: getLayers,
+	label: "查L",
+    class: "export-btn",
+  },
+]);
 </script>
 
 <template>
@@ -250,46 +317,15 @@ const isShowLeft = ref(true);
         <template #customToolsBottom="{ toolButtonProps }">
           <!-- 分隔线 -->
           <div class="tool-separator"></div>
-
-          <!-- 自定义工具按钮 -->
+		  <!-- 自定义工具按钮 -->
           <ToolButton
             v-for="tool in customToolsList"
             :key="tool.id"
             :tool="tool"
             :active-tool="toolButtonProps.activeTool"
             @click="handleCustomToolClick"
+			tipBody
           />
-
-          <!-- 也可以直接使用普通的按钮 -->
-          <div class="custom-tool-btn" @click="loadImageUrlToLayer">
-            <span>🎨</span>
-            <div class="tool-tooltip">添加画布图片</div>
-          </div>
-
-          <div class="custom-tool-btn" @click="switchView('redGreenExample')">
-            <span>红</span>
-            <div class="tool-tooltip">红绿图模式</div>
-          </div>
-          <div class="custom-tool-btn" @click="switchView('canvasEditor')">
-            <span>普</span>
-            <div class="tool-tooltip">普通模式</div>
-          </div>
-          <div class="custom-tool-btn" @click="changeFixedImage">
-            <span>更</span>
-            <div class="tool-tooltip">更换底图</div>
-          </div>
-          <div class="custom-tool-btn" @click="exportJSON">
-            <span>导</span>
-            <div class="tool-tooltip">导出JSON</div>
-          </div>
-          <div class="custom-tool-btn" @click="copyJSON">
-            <span>复</span>
-            <div class="tool-tooltip">复制JSON</div>
-          </div>
-          <div class="custom-tool-btn" @click="getLayers">
-            <span>查</span>
-            <div class="tool-tooltip">查询图层</div>
-          </div>
         </template>
       </CanvasEditor>
     </div>
@@ -424,15 +460,17 @@ body {
 
 .tool-tooltip {
   display: none;
+  pointer-events: none;
   position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
+  writing-mode: vertical-rl; /* 竖直排列 */
+  text-orientation: upright; /* 保持文字正常显示 *///   left: 100%;
+  left: 50%;
+  top: -0.8rem;
+  transform: translate(-50%, -100%);
+  background-color: rgba(0, 0, 0, 0.9);
   color: white;
-  padding: 0.4rem 0.8rem;
+  padding: 0.8rem 0.4rem;
   border-radius: 0.4rem;
-  margin-left: 0.8rem;
   white-space: nowrap;
   font-size: 1.2rem;
   z-index: 10;
@@ -441,12 +479,12 @@ body {
 .tool-tooltip:before {
   content: "";
   position: absolute;
-  top: 50%;
-  right: 100%;
-  margin-top: -0.5rem;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 100%);
   border-width: 0.5rem;
   border-style: solid;
-  border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
+  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
 }
 
 /* 深色模式适配 */