aida_front/src/component/DetailCopy/canvas/index.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" :config="canvasConfig" 
							:clothingImageUrl="selectDetail.undividedLayer" 
							isFixedErasable
							:clothing-image-opts="{
								imageMode:'contains',
							}"
							ref="editCanvas"></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" :config="canvasConfig" 
							:enabledRedGreenMode="true"
							:clothingImageUrl="selectDetail.undividedLayer" 
							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
							@trigger-red-green-mouseup="frontBackChange"
							:clothing-image-opts="{
								imageMode:'contains',
							}"
							ref="editCanvasBackFront"></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,
		})
		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})
			})

		}
		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,
        }
    },
	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;
				}
			}
		}
		
	}
</style>