合并画布

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

@@ -1,7 +1,13 @@
 <template>
 	<div class="generalCanvas">
-		<div class="canvasBox">
-			<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
+		<div class="canvasBox" ref="canvasBox">
+			<editCanvas v-if="canvasLoad" ref="editCanvas"
+			 :config="canvasConfig"
+			:clothingImageUrl="modelUrl" 
+			:clothing-image-opts="{
+				imageMode:'contains',
+			}"
+			></editCanvas>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -17,7 +23,7 @@ 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: {
@@ -32,17 +38,20 @@ export default defineComponent({
 		})
 		const data = reactive({
 			canvasLoad:false,
+			canvasConfig:{},
+			modelUrl:'',
 		})
 		const dataDom = reactive({
 			editCanvas:null,
+			canvasBox:null
 		})
 		const openSetData = ()=>{
-			data.canvasLoad = true
 			// dataDom.canvasContent.openSetData()
 		}
 		const addImage = (value)=>{
 			console.log(value)
-			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+			// dataDom.editCanvas.addImageToLayer(value.imgUrl)
+			dataDom.editCanvas.addImageToLayer(value.url)
 		}
 		const addBottomImage = (value)=>{
 			dataDom.editCanvas.changeFixedImage(value)
@@ -54,7 +63,31 @@ export default defineComponent({
 			
 			return canvasExport
 		}
+		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
+					console.log(data.canvasConfig,123123123)
+					data.canvasLoad = true
+					res('')
+				}
+				img.src = url
+			})
+		}
         onMounted(() => {
+			nextTick(()=>{
+				let url = new URL(defaultModel, import.meta.url).href
+				data.modelUrl = url
+				setCanvas(url).then(()=>{
+				})
+			})
 		});
 		onBeforeUnmount(()=>{
 			data.canvasLoad = false

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

@@ -19,7 +19,7 @@
 					<input type="radio" value="sketch" v-model="segmentationType">
 				</label> -->
 			</div>
-			<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
+			<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
 		</div>
 		<div class="canvas itemBox">
 			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
@@ -66,6 +66,7 @@ export default defineComponent({
 				return store.state.Workspace.probjects.positionList
 			}),
 			segmentationType:'product',
+			segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
 			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
 			ceditorConfig:{
 				width: 800,
@@ -206,6 +207,8 @@ export default defineComponent({
 			// flex: 1;
 			&.selectSektch{
 				width: 37rem;
+				display:flex;
+				flex-direction: column;
 				flex-shrink: 0;
 				> .type{
 					display: flex;