合并画布

src/component/home/design/index.vue

@@ -50,6 +50,9 @@
 										</div>
 									</div>
 								</div>
+								<div class="gallery_btn" @click="openCanvas()" style="margin-left: auto;">
+									Canvas
+								</div>
 								
 								<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
 									@click="resDesignCollection()">
@@ -435,6 +438,9 @@ export default defineComponent({
 		const openEditTools = ()=>{
 			dataDom.designTools.init(speed.speedData.value,likeDesignCollectionList.value)
 		}
+		const openCanvas = ()=>{
+			dataDom.designTools.init('editCanvas')
+		}
 		const editToolsSuccess = ()=>{
 			nextTick().then(()=>{
 				designData.isUnfold = true
@@ -1155,6 +1161,7 @@ export default defineComponent({
 			openSpeed,
 			setSpeed,
 			openEditTools,
+			openCanvas,
 			editToolsSuccess,
 
 			likeItemDom,

src/component/home/design/tools.vue

@@ -28,7 +28,7 @@
 			<!-- <div class="modal_title_text">
 				<div>Setting</div>
 			</div> -->
-			<div class="collectionBox">
+			<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
 				<toProductRelight ref="toProduct" 
 					:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
 					:isDesignPage="true"
@@ -46,6 +46,10 @@
 					v-if="openType == 'relight'"
 				></toProductRelight>
 				<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
+				<div class="canvasBox" ref="canvasBox">
+					<editCanvas v-if="openType == 'editCanvas'" ref="editCanvas"
+					></editCanvas>
+				</div>
 			</div>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
@@ -61,10 +65,11 @@ import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import toProductRelight from '../tools/toProduct/index.vue'
 import poseTransfer from '../tools/poseTransfer/index.vue'
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
 
 export default defineComponent({
 	components:{
-		toProductRelight,poseTransfer
+		toProductRelight,poseTransfer,editCanvas
 	},
 	props:{
 	},
@@ -83,12 +88,14 @@ export default defineComponent({
 			toProduct:null as any,
 			relight:null as any,
 			poseTransfer:null as any,
+			editCanvas:null as any,
 		}) as any
 		const init = (value:any,list:any)=>{
 			data.designTools = true
 			data.openType = value
+			if(value == 'editCanvas')
+			return
 			data.likeDesignList = list
-			console.log(list)
 			nextTick(()=>{
 				let fileList = [] as any
 				if(value == 'toProduct'){
@@ -169,6 +176,16 @@ export default defineComponent({
 			height: 100%;
 			> .collectionBox{
 				height: 100%;
+				&.editCanvas{
+					padding-top: 5rem;
+					padding-right: 5rem;
+					display: flex;
+				}
+				> .canvasBox{
+					height: 100%;
+					flex:1;
+					position: relative;
+				}
 			}
 		}
 		.fullScreen{

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;