修复印花线稿合成图显示异常

2026-01-16 13:39:00 +08:00
parent 2b7db933d9
commit a720fba84e
5 changed files with 106 additions and 52 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -85,7 +85,7 @@
 						" alt="">
 					</div>
 					<div class="contentRight" v-else-if="currentDetailType && !isEditPattern.value">
-						<detailRight ref="detailRight"></detailRight>
+						<detailRight ref="detailRight" :sketchSize="sketchSize"></detailRight>
 						<div class="btn" 
 							v-show="
 								currentDetailType !== 'color' &&
@@ -101,7 +101,7 @@
 						</div>
 					</div>
 					<div class="contentRight canvas" v-if="selectDetail && selectDetail.id && currentDetailType" :class="{'active': isEditPattern.value}">
-						<canvasBox ref="canvasBox" :key="canvasKey" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
+						<canvasBox ref="canvasBox" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -170,13 +170,29 @@ export default defineComponent({
 			},
 			positionKey:0,
 			detailLeftColorKey:0,
+			sketchSize:{
+				width:0,
+				height:0,
+			}
 		})
-		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
+		const getSketchSize:any = async ()=>{
+			let img = new Image();
+			img.src = detailData.selectDetail.path;	
+			await new Promise((resolve, reject) => {
+				img.onload = () => {
+					detailData.sketchSize.width = img.width
+					detailData.sketchSize.height = img.height
+					resolve([img.width, img.height]);
+				}
+				img.onerror = reject;
+			});
+		}
+		watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+			if(newValue)await getSketchSize()
 			detailData.canvasKey += 1
 			// privewDetail(oldValue)
 		},{immediate: true})
-
 		provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
 		provide('singleOveral',detailData.singleOveral)
 		provide('isEditPattern',detailData.isEditPattern)
--- a/src/component/Detail/canvas/index.vue
+++ b/src/component/Detail/canvas/index.vue
@@ -13,8 +13,6 @@
 							:clothingImageUrl="selectDetail.path"
 							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
 							showFixedLayer
-							:width="sketchWidth"
-							:height="sketchHeight"
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 							:clothing-image-opts="{
@@ -81,7 +79,11 @@ export default defineComponent({
 		updateOtherLayers:{
 			type:Function,
 			default:()=>{}
-		}
+		},
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
 	},
    setup(props,{emit}) {
        const store = useStore();
@@ -121,8 +123,6 @@ export default defineComponent({
 				printObject: store.state.DesignDetail.selectDetail.printObject,
 				trims: store.state.DesignDetail.selectDetail.trims,
 			})),
-			sketchWidth:0,
-			sketchHeight:0,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -177,7 +177,11 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
+				await detailDom.editCanvas.exportImage({
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
 					if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
 				})
 				//包含平铺图层 single+overall模式的图
@@ -188,6 +192,7 @@ export default defineComponent({
 				// await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
 				// 	oldSelectDetail.undividedLayer = rv
 				// })
+				await setUndivideLayer()
 				res('')
 			})
 		}
@@ -203,11 +208,14 @@ export default defineComponent({
 				let img = new Image()
 				img.onload = ()=>{
 					let wH = [1,1]
-					let domHeight = detailDom.canvasContent.offsetHeight - 200
+					let domHeight = detailDom.canvasContent?.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					detailData.canvasConfig.width = img.width * wH[1]
-					detailData.canvasConfig.height = domHeight
+					// detailData.canvasConfig.width = img.width * wH[1]
+					// detailData.canvasConfig.height = domHeight
+					console.log(detailData.canvasConfig,'===============')
+					detailData.canvasConfig.width = img.width
+					detailData.canvasConfig.height = img.height

 					res('')
 				}
@@ -335,34 +343,45 @@ export default defineComponent({
 		// }
 		const canvasLoadJsonSuccess = async ()=>{
 			let otherData = await props.updateOtherLayers()
-			updateOtherLayers(otherData)
-			if(!detailData.selectDetail.undividedLayerColor){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayerColor = rv
-				})
-			}
-			if(!detailData.selectDetail.undividedLayer){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayer = rv
-				})
-			}
+
+			await updateOtherLayers(otherData)
+			await setUndivideLayer()
+		}
+		const setUndivideLayer = async ()=>{
+			await new Promise<void>(async (resolve, reject) => {
+				// if(!detailData.selectDetail.undividedLayerColor){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsRepeat:false,
+						isPrintTrimsNoRepeat:false,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height}).then((rv)=>{
+						detailData.selectDetail.undividedLayerColor = rv
+					})
+				// }
+				// if(!detailData.selectDetail.undividedLayer){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsNoRepeat:false,
+						isPrintTrimsRepeat:true,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height,
+					}).then((rv)=>{
+						console.log(rv,'======')
+						detailData.selectDetail.undividedLayer = rv
+					})
+				// }
+				resolve()
+			})
+			
 		}

 		const submitBase64Data = ()=>{
 			return detailDom.generalMiniCanvas.submitBase64Data()
 		}
-		const sketchSize:any = async ()=>{
-			let img = new Image();
-			img.src = detailData.selectDetail.path;	
-			await new Promise((resolve, reject) => {
-				img.onload = () => {
-					detailData.sketchWidth = img.width
-					detailData.sketchHeight = img.height
-					resolve([img.width, img.height]);
-				}
-				img.onerror = reject;
-			});
-		}
+	
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
@@ -403,7 +422,6 @@ export default defineComponent({
 						});
 					})
 				}
-				await sketchSize()
 				setCanvas(detailData.selectDetail.path).then(()=>{
 					detailData.canvasLoad = true
 				})
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -110,7 +110,7 @@
 						</ul> -->
 					</div>
 					<div class="designOpenrtion_pingpu" v-else>
-						<pingpu :list="printStyleList[type].overall" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
+						<pingpu :list="printStyleList[type].overall" :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
 					</div>
 				</div>
 			</div>
@@ -141,7 +141,11 @@ export default defineComponent({
 		type: {
 		    type: String,
 			default: 'print',
-		}
+		},
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
 	},
    setup(props,{emit}) {
 		const { t } = useI18n()
@@ -352,18 +356,9 @@ export default defineComponent({
 			}
 			editPrintElementData.printZIndex++
 			item.pattern = pattern
-			function isJSONString(str) {
-				try {
-					JSON.parse(str);
-					return true;  // 解析成功，是有效的JSON字符串
-				} catch (e) {
-					return false; // 解析失败，不是有效的JSON字符串
-				}
-			}
+			
 			if(item.object){
-				if(isJSONString(item.object)){
-					item.object = JSON.parse(item.object)
-				}
+				
 			}else{
 				item.object = {
 					top: 0,
--- a/src/component/Detail/detailRight/index.vue
+++ b/src/component/Detail/detailRight/index.vue
@@ -6,8 +6,8 @@
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
 		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
-		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
-		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print" :sketchSize="sketchSize"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element" :sketchSize="sketchSize"></editPrintElement>
 		<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
    </div>
    
@@ -24,6 +24,12 @@ export default defineComponent({
    components:{
 		sketchType,printType,editPrintElement,modelsType
    },
+	props:{
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
+	},
    setup(props,{emit}) {
        const store = useStore();
 		const detailData = reactive({
--- a/src/store/Detail/designDetail.ts
+++ b/src/store/Detail/designDetail.ts
@@ -54,6 +54,25 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			data.clothes.forEach((v:any,index:any)=>{
 				// if(!v?.partialDesignDTO){
 				// }
+				function isJSONString(str) {
+					try {
+						JSON.parse(str);
+						return true;  // 解析成功，是有效的JSON字符串
+					} catch (e) {
+						return false; // 解析失败，不是有效的JSON字符串
+					}
+				}
+				v?.printObject?.prints?.forEach((item:any) => {
+					console.log(item.object)
+					if(isJSONString(item.object)){
+						item.object = JSON.parse(item.object)
+					}
+				});
+				v?.trims?.prints?.forEach((item:any) => {
+					if(isJSONString(item.object)){
+						item.object = JSON.parse(item.object)
+					}
+				});
 				for (let i = v.layersObject.length-1; i >= 0; i--) {
 					v.layersObject[i].style = {
 						top:v.layersObject[i].position?.[0],