95 lines
2.2 KiB
Vue
95 lines
2.2 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"
|
||
@trigger-red-green-mouseup="frontBackChange"
|
||
:clothingImageOpts="{ imageMode: 'contains' }"
|
||
/>
|
||
</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);
|
||
};
|
||
const frontBackChange = (value) =>{
|
||
console.log(value)
|
||
}
|
||
|
||
// 组件挂载时绑定键盘事件
|
||
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>
|