合并画布

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{