From fad2c220afd503e87ee4e050da194fc9679e88e1 Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Sun, 22 Jun 2025 15:20:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8Dicon=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98=E5=92=8C=E6=B7=BB=E5=8A=A0=E7=BA=A2?=
 =?UTF-8?q?=E7=BB=BF=E5=9B=BE=E6=A8=A1=E5=BC=8F=E7=A4=BA=E4=BE=8B=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=E8=B7=AF=E7=94=B1=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/RedGreenModeExample.vue |  89 +++++++++
 src/component/Canvas/canvasExample.vue       | 196 +++++++++++++++++++
 src/main.ts                                  |   6 +-
 src/router/index.ts                          |   7 +
 vite.config.js                               |  11 +-
 5 files changed, 302 insertions(+), 7 deletions(-)
 create mode 100644 src/component/Canvas/RedGreenModeExample.vue
 create mode 100644 src/component/Canvas/canvasExample.vue

diff --git a/src/component/Canvas/RedGreenModeExample.vue b/src/component/Canvas/RedGreenModeExample.vue
new file mode 100644
index 00000000..8fc88562
--- /dev/null
+++ b/src/component/Canvas/RedGreenModeExample.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="red-green-mode-example">
+    <!-- 画布编辑器 - 永久启用红绿图模式 -->
+    <div class="canvas-wrapper">
+      <div class="canvas-wrapper-btns">
+        <div @click="changeFixedImage">更换底图</div>
+        <div @click="getJSON">获取JSON</div>
+        <div @click="loadJSON">读取JSON</div>
+      </div>
+      <CanvasEditor
+        ref="canvasEditor"
+        :enabledRedGreenMode="true"
+        :clothingImageUrl="imageUrls.baseImage"
+        :redGreenImageUrl="imageUrls.maskImage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import CanvasEditor from "./CanvasEditor/index.vue";
+
+// 画布编辑器引用
+const canvasEditor = ref(null);
+
+// 图像URL配置
+const imageUrls = {
+  baseImage: "/src/assets/redGreenPic/clothing_base_image.png",
+  maskImage: "/src/assets/redGreenPic/clothing_mask_image.png",
+};
+
+const changeImageUrl = "/src/assets/work/1.PNG";
+const getJSON = () => {
+  if (canvasEditor.value) {
+    const json = canvasEditor.value.getJSON();
+    console.log("获取的JSON数据：", json);
+    localStorage.setItem("redGreenModeJSON", json);
+  }
+};
+
+const loadJSON = () => {
+  if (canvasEditor.value) {
+    const currentJSON = localStorage.getItem("redGreenModeJSON");
+    canvasEditor.value.loadJSON(currentJSON);
+    console.log("加载的JSON数据：", currentJSON);
+  }
+};
+
+const changeFixedImage = () => {
+  canvasEditor.value.changeFixedImage(changeImageUrl);
+};
+
+// 组件挂载时绑定键盘事件
+onMounted(() => {});
+
+// 组件卸载时移除键盘事件
+onUnmounted(() => {});
+</script>
+
+<style scoped lang="less">
+.red-green-mode-example {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.canvas-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.canvas-wrapper-btns {
+  position: fixed;
+  top: 0;
+  right: 150px;
+  z-index: 1000;
+  display: flex;
+  gap: 20px;
+  & > div {
+    cursor: pointer;
+    padding: 10px 20px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+  }
+}
+</style>
diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
new file mode 100644
index 00000000..c2873f4d
--- /dev/null
+++ b/src/component/Canvas/canvasExample.vue
@@ -0,0 +1,196 @@
+<script setup>
+import { ref } from "vue";
+import CanvasEditor from "./CanvasEditor/index.vue";
+import RedGreenModeExample from "./RedGreenModeExample.vue";
+
+// 当前显示的组件
+const canvasEditor = ref();
+const currentView = ref("canvasEditor"); // 默认显示红绿图示例
+
+const clothingImageUrl = "/src/assets/work/3.PNG";
+
+// 切换视图
+function switchView(view) {
+  currentView.value = view;
+}
+
+// 定义编辑器配置
+const editorConfig = {
+  width: 800,
+  height: 600,
+  backgroundColor: "#f8f8f8",
+};
+
+const getJSON = () => {
+  if (canvasEditor.value) {
+    const json = canvasEditor.value.getJSON();
+    console.log("获取的JSON数据：", json);
+    localStorage.setItem("redGreenModeJSON", json);
+  }
+};
+
+const loadJSON = () => {
+  if (canvasEditor.value) {
+    const currentJSON = localStorage.getItem("redGreenModeJSON");
+    canvasEditor.value.loadJSON(currentJSON);
+    console.log("加载的JSON数据：", currentJSON);
+  }
+};
+
+const changeFixedImage = () => {
+  canvasEditor.value.changeFixedImage(clothingImageUrl);
+};
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- <div class="canvas-wrapper-btns">
+      <div @click="changeFixedImage">更换底图</div>
+      <div @click="getJSON">获取JSON</div>
+      <div @click="loadJSON">读取JSON</div>
+    </div> -->
+    <!-- 内容区域 -->
+    <div class="app-content">
+      <div
+        style="
+          position: fixed;
+          top: 0px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          z-index: 999;
+        "
+      >
+        <div class="view-switcher">
+          <div
+            class="switch-btn"
+            :class="{ active: currentView === 'redGreenExample' }"
+            @click="switchView('redGreenExample')"
+          >
+            红绿图模式示例
+          </div>
+          <div
+            class="switch-btn"
+            :class="{ active: currentView === 'canvasEditor' }"
+            @click="switchView('canvasEditor')"
+          >
+            普通画布编辑器
+          </div>
+        </div>
+      </div>
+      <!-- 红绿图模式示例 -->
+      <RedGreenModeExample
+        v-if="currentView === 'redGreenExample'"
+        key="redGreenExample"
+      />
+
+      <!-- 普通画布编辑器 -->
+      <CanvasEditor
+        ref="canvasEditor"
+        key="canvasEditor"
+        v-if="currentView === 'canvasEditor'"
+        :config="editorConfig"
+        :clothingImageUrl="clothingImageUrl"
+        :clothing-image-opts="{
+          imageMode: 'contains', // 设置底图包含在画布内
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.canvas-wrapper-btns {
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  display: flex;
+  gap: 10px;
+}
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+.app-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.view-switcher {
+  display: flex;
+  gap: 8px;
+
+  .switch-btn {
+    padding: 8px 16px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background: white;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #007bff;
+      background: #f8f9fa;
+    }
+
+    &.active {
+      border-color: #007bff;
+      background: #007bff;
+      color: white;
+    }
+  }
+}
+
+.app-header {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.app-content {
+  flex: 1;
+  height: 100vh;
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .app-header {
+    background: rgba(45, 45, 45, 0.95);
+
+    .view-switcher .switch-btn {
+      background: #3d3d3d;
+      border-color: #555;
+      color: #e0e0e0;
+
+      &:hover {
+        border-color: #007bff;
+        background: #444;
+      }
+
+      &.active {
+        background: #007bff;
+        color: white;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index ee6905b5..17b8bf5a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,13 +17,13 @@ import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css";
 import "swiper/css";
 import "swiper/css/pagination";
 import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
-
+import "virtual:svg-icons-register";
 
 // import "@/tool/color-thief.js";
 // import "@/tool/fabric.brushes.js";
 // import "@/tool/fabric.min.js";
 const app = createApp(App);
-flexible()
+flexible();
 // alert(window.innerWidth)
 import { getCookie, setCookie } from "@/tool/cookie";
 import loadingGif from "./assets/images/homePage/loading.gif";
@@ -40,6 +40,6 @@ app
   .use(router)
   .use(Antd)
   .use(VueLazyload, loadingParam)
-.component("SvgIcon", SvgIcon)
+  .component("SvgIcon", SvgIcon)
   .use(i18n)
   .mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
index b2045259..2d6b200f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,13 @@ const routes: Array<RouteRecordRaw> = [
     meta: { enter: "all" },
     component: () => import("@/views/Login.vue"),
   },
+  {
+    path: "/canvasExample",
+    name: "canvasExample",
+    meta: { enter: "all" },
+    component: () => import("@/component/Canvas/canvasExample.vue"),
+  },
+
   {
     path: "/schoolLogin",
     name: "schoolLogin",
diff --git a/vite.config.js b/vite.config.js
index 36cae19f..1b24aca8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,7 @@ import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 import AutoImport from "unplugin-auto-import/vite";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import path from "path";
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
@@ -15,16 +15,19 @@ export default defineConfig(({ mode }) => {
   return {
     resolve: {
       alias: {
-        '@': path.resolve(__dirname, './src'),
+        "@": path.resolve(__dirname, "./src"),
       },
     },
     plugins: [
       vue(),
       Components({
-        resolvers: [AntDesignVueResolver({ importStyle: false }),ElementPlusResolver()],
+        resolvers: [
+          AntDesignVueResolver({ importStyle: false }),
+          ElementPlusResolver(),
+        ],
       }),
       AutoImport({
-		resolvers: [ElementPlusResolver()],
+        resolvers: [ElementPlusResolver()],
         imports: [
           "vue",
           "vue-router",