414 lines
11 KiB
Vue
414 lines
11 KiB
Vue
<template>
|
|
<div class="canvasBox">
|
|
<!-- designDetailShow -->
|
|
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
|
<div class="canvasContent" ref="canvasContent">
|
|
<!-- <div class="argument-box">
|
|
<argument
|
|
ref="argument"
|
|
class="argument"
|
|
v-if="canvasObj.id || frontBackCanvasObj.id"
|
|
@toolLiquefaction="toolLiquefaction"
|
|
@setFrontBackColor="setFrontBackColor"
|
|
:isEditFrontBack="isEditFrontBack">
|
|
</argument>
|
|
</div> -->
|
|
<div class="content-bottom" ref="canvasContent">
|
|
<!-- <div class="tool-box">
|
|
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
|
|
</div> -->
|
|
<div class="contet">
|
|
<div class="canvas" v-if="!isEditFrontBack" @click.stop>
|
|
<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig"
|
|
:clothingImageUrl="selectDetail.undividedLayer"
|
|
isFixedErasable
|
|
:clothing-image-opts="{
|
|
imageMode:'contains',
|
|
}"
|
|
ref="editCanvas">
|
|
<template #customTools="{ toolButtonProps }">
|
|
<!-- 也可以直接使用普通的按钮 -->
|
|
{{toolButtonProps}}
|
|
<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
|
|
<i class="fi fi-sr-layers"></i>
|
|
<div class="tool-tooltip">Edit the front and back sections</div>
|
|
</div>
|
|
</template>
|
|
</editCanvas>
|
|
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
|
|
</div>
|
|
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
|
|
<!-- <editFrontBack
|
|
:patchData="frontBack"
|
|
:imgDomIndex="imgDomIndex"
|
|
|
|
ref="editFrontBack">
|
|
</editFrontBack> -->
|
|
<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig"
|
|
:enabledRedGreenMode="true"
|
|
:clothingImageUrl="selectDetail.undividedLayer"
|
|
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
|
|
@trigger-red-green-mouseup="frontBackChange"
|
|
:clothing-image-opts="{
|
|
imageMode:'contains',
|
|
}"
|
|
ref="editCanvasBackFront">
|
|
<template #customTools="{ toolButtonProps }">
|
|
<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
|
|
<i class="fi fi-sr-layers"></i>
|
|
<div class="tool-tooltip">Edit the front and back sections</div>
|
|
</div>
|
|
</template>
|
|
</editCanvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="Finish">
|
|
<div class="gallery_btn" @click="privewDetail">Finish</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="Finish" style="text-align: right;margin-top:1rem;">
|
|
<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div> -->
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
|
|
import { Https } from "@/tool/https";
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
import editFrontBack from '@/component/Detail/editFrontBack.vue'
|
|
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
|
|
import { formatTime,segmentImage } from "@/tool/util";
|
|
|
|
|
|
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
|
import argument from './argument.vue'
|
|
import canvasContent from './canvasContent.vue'
|
|
import tool from "./tool.vue"
|
|
|
|
export default defineComponent({
|
|
components:{
|
|
tool,argument,editFrontBack,editCanvas
|
|
},
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const {t} = useI18n();
|
|
|
|
const detailDom = reactive({
|
|
editFrontBack:null as any,
|
|
model:null,
|
|
editCanvas:null as any,
|
|
editCanvasBackFront:null as any,
|
|
canvasContent:null as any,
|
|
})
|
|
const userDetail = computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
const detailData = reactive({
|
|
canvasObj:new canvasGeneral('aa'),
|
|
frontBackCanvasObj:new canvasGeneral('vv'),
|
|
isShowMark:false,
|
|
liquefactionData:null as any,
|
|
liquefaction:null as any,
|
|
canvasType:'export',
|
|
imgDomIndex:-1,
|
|
isEditFrontBack:false,
|
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
|
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
|
|
canvasLoad:false,
|
|
canvasConfig:{
|
|
} as any,
|
|
currentView:'canvasEditor',
|
|
})
|
|
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
|
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
|
// privewDetail(oldValue)
|
|
},{immediate: true})
|
|
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
|
provide('canvasObj',detailData.canvasObj)
|
|
provide('isShowMark',detailData.isShowMark)
|
|
provide('canvasType',detailData.canvasType)
|
|
|
|
const setLiquefaction = async ()=>{//进入液化页面
|
|
detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
|
|
if(data?.img){
|
|
detailData.liquefactionData = data
|
|
detailData.liquefaction.init(data.img)
|
|
}else {
|
|
message.info(t('exportModel.jsContent6'))
|
|
return null;
|
|
}
|
|
})
|
|
}
|
|
const toolLiquefaction = ()=>{//工具点击按钮
|
|
setLiquefaction()
|
|
}
|
|
const editFront = ()=>{//编辑前后片
|
|
|
|
let canvasJSON = '' as any
|
|
if(!detailData.isEditFrontBack){
|
|
sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
|
|
canvasJSON = sessionStorage.getItem('frontBackEdit');
|
|
}else{
|
|
sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
|
|
canvasJSON = sessionStorage.getItem('sketchEdit');
|
|
}
|
|
detailData.canvasLoad = false
|
|
detailData.isEditFrontBack = !detailData.isEditFrontBack
|
|
if(canvasJSON){
|
|
detailData.canvasLoad = true
|
|
nextTick(()=>{
|
|
if(!detailData.isEditFrontBack){
|
|
detailDom.editCanvas.loadJSON(canvasJSON)
|
|
}else{
|
|
detailDom.editCanvasBackFront.loadJSON(canvasJSON)
|
|
}
|
|
})
|
|
}else{
|
|
if(!detailData.isEditFrontBack){
|
|
nextTick(()=>{
|
|
setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
|
|
detailData.canvasLoad = true
|
|
})
|
|
})
|
|
}else{
|
|
nextTick(()=>{
|
|
setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
|
|
detailData.canvasLoad = true
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
|
return new Promise((res,reject)=>{
|
|
detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
|
|
// let data = await detailData.canvasObj.detailSubmit()
|
|
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
|
|
res('')
|
|
})
|
|
})
|
|
|
|
|
|
}
|
|
const setFrontBackColor = (data:any)=>{
|
|
detailDom.editFrontBack.setBackground(data)
|
|
}
|
|
const setCanvas = (url:any)=>{
|
|
return new Promise((res,rev)=>{
|
|
let img = new Image()
|
|
img.onload = ()=>{
|
|
let wH = [1,1]
|
|
let domHeight = detailDom.canvasContent.offsetHeight - 200
|
|
let imgHeight = img.height
|
|
wH = [1,domHeight/imgHeight]
|
|
detailData.canvasConfig.width = img.width * wH[1]
|
|
detailData.canvasConfig.height = domHeight
|
|
|
|
res('')
|
|
}
|
|
img.src = url
|
|
})
|
|
}
|
|
const frontBackChange = (value:any)=>{
|
|
let full = detailData.frontBack.front[detailData.imgDomIndex].undividedLayer
|
|
let size = {
|
|
...detailData.canvasConfig,
|
|
}
|
|
segmentImage(value,full,size).then((rv)=>{
|
|
detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
|
|
detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
|
|
detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
|
|
store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
|
|
})
|
|
|
|
}
|
|
const setCurrentView = (str:string)=>{
|
|
detailData.currentView = str
|
|
}
|
|
onBeforeUnmount(()=>{
|
|
console.log(12312)
|
|
sessionStorage.removeItem('frontBackEdit');
|
|
sessionStorage.removeItem('sketchEdit');
|
|
detailData.canvasLoad = false
|
|
privewDetail()
|
|
})
|
|
onMounted(()=>{
|
|
nextTick(()=>{
|
|
setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
|
|
detailData.canvasLoad = true
|
|
})
|
|
})
|
|
})
|
|
return{
|
|
...toRefs(detailDom),
|
|
...toRefs(detailData),
|
|
toolLiquefaction,
|
|
editFront,
|
|
privewDetail,
|
|
setFrontBackColor,
|
|
frontBackChange,
|
|
setCurrentView,
|
|
}
|
|
},
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.canvasBox{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
// top: -100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.tool-box{
|
|
width: 4rem;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.Finish{
|
|
margin-top: auto;
|
|
> .gallery_btn{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.argument-box{
|
|
height: 4rem;
|
|
width: 100%;
|
|
margin-bottom: 3rem;
|
|
margin-left: 4rem;
|
|
}
|
|
.argument-box,
|
|
.content-bottom,
|
|
.detail-box{
|
|
|
|
:deep(i){
|
|
font-size: 2.5rem;
|
|
cursor: pointer;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: all .3s;
|
|
margin-bottom: .5rem;
|
|
&.active{
|
|
border: 1px solid;
|
|
border-radius: .4rem;
|
|
}
|
|
&.icon-xiala{
|
|
transform: rotate(-90deg);
|
|
}
|
|
&.icon-xialaActive{
|
|
transform: rotate(90deg);
|
|
}
|
|
&.eventNone{
|
|
cursor: no-drop;
|
|
border: none;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
.canvasContent{
|
|
height: 100%;
|
|
// height: 70rem;
|
|
width: 100%;
|
|
border: 2px solid #000;
|
|
border-radius: 3rem;
|
|
padding: 4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content-bottom{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
> .contet{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.canvas,.editFrontBack{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.editFrontBack{
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.custom-tool-btn {
|
|
position: relative;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
color: #333;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.custom-tool-btn:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.custom-tool-btn:hover .tool-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.tool-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tool-tooltip:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 100%;
|
|
margin-top: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
|
|
}
|
|
|
|
</style> |