feat: 修复icon显示问题和添加红绿图模式示例组件并更新路由配置
This commit is contained in:
bighuixiang
89
src/component/Canvas/RedGreenModeExample.vue
Normal file
89
src/component/Canvas/RedGreenModeExample.vue
Normal file
@@ -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>
|
||||
196
src/component/Canvas/canvasExample.vue
Normal file
196
src/component/Canvas/canvasExample.vue
Normal file
@@ -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>
|
||||
@@ -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");
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user