90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
|
<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>
|