aida_front/src/component/home/tools/deReconstruction/canvas/index.vue

<template>
	<div class="generalCanvas">
		<div class="canvasBox" ref="canvasBox">
			<editCanvas v-if="canvasLoad" ref="editCanvas"
			 :config="canvasConfig"
			:clothingImageUrl="changeImageUrl" 
			@changeCanvas="changeCanvas"
			:clothing-image-opts="{
				imageMode:'contains',
			}"
			>
				<template #customTools="{ toolButtonProps }">
					<div class="custom-tool-btn" :class="{active:isHiddenModel}" @click="setHiddenmodel()">
						<i class="fi fi-rr-eye"></i>
						<div class="tool-tooltip">Hidden model</div>
					</div>
				</template>
			</editCanvas>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</div>
</template>
<script>
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import FemaleAdultModel from "@/assets/images/homePage/FemaleAdultModel.png"
import FemaleChildModel from "@/assets/images/homePage/FemaleChildModel.png"
import MaleAdultModel from "@/assets/images/homePage/MaleAdultModel.png"
import MaleChildModel from "@/assets/images/homePage/MaleChildModel.png"

export default defineComponent({
    components: {
		editCanvas,
    },
	props:{
		selectSexAge:{
			type:Object,
			default:()=>{
				return {
					sex:'',
					age:'',
				}
			}
		}
	},
	emits:['setGenerateImg','setCanvasJSON'],
    setup(props,{emit}) {
		const { t } = useI18n();
		const store = useStore();
		const isShowMark = ref(false)
		const component = reactive({
		})
		const createProbject = inject('createProbject',()=>{})
		const data = reactive({
			canvasLoad:false,
			isHiddenModel:true,
			canvasConfig:{},
			probjects:computed(()=>store.state.Workspace.probjects),
			canvasJSON:computed(()=>store.state.HomeStoreModule.canvasData.deReconstruction),
			undoStack:0,
			changeImageUrl:'',
		})
		watch(()=>data.canvasJSON,(newVal)=>{
			dataDom.editCanvas.loadJSON(newVal)
		})
		const dataDom = reactive({
			editCanvas:null,
			canvasBox:null
		})
		const openSetData = ()=>{
			// dataDom.canvasContent.openSetData()
		}

		const setFixedImg = ()=>{
			let sex = props.selectSexAge.value
			let age = props.selectSexAge.age
			let changeImageUrl = ''
			if(sex == 'Male' && age == 'Adult'){
				changeImageUrl = MaleAdultModel
			}else if(sex == 'Male' && age == 'Child'){
				changeImageUrl = MaleChildModel
			}else if(sex == 'Female' && age == 'Adult'){
				changeImageUrl = FemaleAdultModel
			}else if(sex == 'Female' && age == 'Child'){
				changeImageUrl = FemaleChildModel
			}
			changeImageUrl = new URL(changeImageUrl, import.meta.url).href
			return changeImageUrl
		}
		const changeFixedImage = async ()=>{
			await nextTick()
			data.changeImageUrl = setFixedImg()
			dataDom.editCanvas.changeFixedImage(data.changeImageUrl, {
				imageMode: "contains", // 设置底图包含在画布内
			});
		}
		const getData = async ()=>{
			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
				emit('setGenerateImg',rv)
			})
		}
		const getCanvasJSON = ()=>{
			return dataDom.editCanvas.getJSON()
		}
		const setCanvas = (url)=>{
			return new Promise((res,rev)=>{
				let img = new Image()
				img.onload = ()=>{
					let wH = [1,1]
					let domHeight = dataDom.canvasBox.offsetHeight - 200
					let imgHeight = img.height
					wH = [1,domHeight/imgHeight]
					data.canvasConfig.width = img.width * wH[1]
					data.canvasConfig.height = domHeight
					data.canvasLoad = true
					res('')
				}
				img.src = url
			})
		}
		let time = null
		const changeCanvas = async (value)=>{
			// if(!data?.probjects?.id){
			// 	await createProbject()
			// }
			clearTimeout(time)
			time = setTimeout(()=>{
				emit('setCanvasJSON',getCanvasJSON())
			},5000)
		}
		const setHiddenmodel = ()=>{
			data.isHiddenModel = !data.isHiddenModel
			let index = dataDom.editCanvas.layers.findIndex((item)=>item.type == "fixed")
			let layerId = dataDom.editCanvas.layers[index].id
			let canvasManager = dataDom.editCanvas.getCanvasManager()
			canvasManager?.layerManager?.toggleLayerVisibility(layerId);
		}
		const addImage = (url)=>{
			dataDom.editCanvas.addImageToLayer(url.url,{imageMode:'contains'})
		}
        onMounted(() => {
			nextTick(()=>{
				data.changeImageUrl = setFixedImg()
				setCanvas(data.changeImageUrl).then(()=>{
				})
			})
		});
		onBeforeUnmount(()=>{
			data.canvasLoad = false
			data.isHiddenModel = true
			// canvasGeneral.canvasClear()
		})
        return {
			...toRefs(data),
			...toRefs(dataDom),
			isShowMark,
			openSetData,
			getData,
			getCanvasJSON,
			changeCanvas,
			changeFixedImage,
			setHiddenmodel,
			addImage,
        };
    },
    data(prop) {
        return {
		};
    },
	computed: {
	},
    watch: {
      
    },
    mounted() {},

    methods: {
		
	},
});
</script>
<style lang="less" scoped>
.generalCanvas{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	> .canvasBox{
		width: 100%;
		height: 100%;
	}
	.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;
		i{
			font-size: 3rem;
			display: flex;
		}
		&.active{
			background-color: #e6f7ff;
			color: #1890ff;
		}
	}
	.custom-tool-btn:hover {
		background-color: #f0f0f0;
		&.active{
			background-color: #e6f7ff;
			color: #1890ff;
		}
	}
	.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>