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="modelUrl" 
			@changeCanvas="changeCanvas"
			:clothing-image-opts="{
				imageMode:'contains',
			}"
			></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 defaultModel from "@/assets/images/homePage/defaultModel.png"

export default defineComponent({
    components: {
		editCanvas,
    },
	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,
			canvasConfig:{},
			modelUrl:'',
			probjects:computed(()=>store.state.Workspace.probjects),
			undoStack:0,
		})
		const dataDom = reactive({
			editCanvas:null,
			canvasBox:null
		})
		const openSetData = ()=>{
			// dataDom.canvasContent.openSetData()
		}
		const addImage = async (value)=>{
			if(!data?.probjects?.id){
				await createProbject()
			}
			// dataDom.editCanvas.addImageToLayer(value.imgUrl)
			dataDom.editCanvas.addImageToLayer(value.url)
		}
		const addBottomImage = (value)=>{
			dataDom.editCanvas.changeFixedImage(value)
		}
		const getData = async ()=>{
			console.log(dataDom.editCanvas.getCanvasManager().commandManager)
			// if(dataDom.editCanvas.getState())
			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()
				console.log(url)
				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)
		}
        onMounted(() => {
			nextTick(()=>{
				let url = new URL(defaultModel, import.meta.url).href
				data.modelUrl = url
				setCanvas(url).then(()=>{
				})
			})
		});
		onBeforeUnmount(()=>{
			data.canvasLoad = false
			// canvasGeneral.canvasClear()
		})
        return {
			...toRefs(data),
			...toRefs(dataDom),
			isShowMark,
			openSetData,
			addImage,
			getData,
			getCanvasJSON,
			changeCanvas,
        };
    },
    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%;
	}
}
</style>