From 44912baee32f10769751d3a3fa9fcecc814db967 Mon Sep 17 00:00:00 2001
From: wxd <1627315083@qq.com>
Date: Thu, 3 Oct 2024 14:16:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=B3=BB=E7=BB=9F=E6=A8=A1?=
 =?UTF-8?q?=E7=89=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Detail/editFrontBack.vue       | 34 ++++----
 src/component/HomePage/SketchboardUpload.vue |  9 +-
 src/component/LibraryPage/ModelPlacement.vue |  8 +-
 src/component/WorksPage/publish.vue          | 23 +++++-
 src/component/modules/generalMiniCanvas.vue  | 86 ++++++++++++++++----
 src/component/modules/liquefaction.vue       | 37 +++++++++
 src/lang/cn.ts                               |  1 +
 src/lang/en.ts                               |  1 +
 src/tool/webSocket.js                        |  3 +
 src/views/HomeMain.vue                       | 47 +++++------
 10 files changed, 184 insertions(+), 65 deletions(-)

diff --git a/src/component/Detail/editFrontBack.vue b/src/component/Detail/editFrontBack.vue
index 55451329..f46b1cb3 100644
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -125,23 +125,23 @@ export default defineComponent({
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.maskUrl
-					canvas.on('mouse:wheel', opt => {
-						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-						let zoom = canvas.getZoom() // 获取画布当前缩放值
-						zoom *= 0.999 ** delta
-						if (zoom > 20) zoom = 20
-						if (zoom < 0.01) zoom = 0.01
-						// console.log(zoom);
-						canvas.zoomToPoint(
-							{ // 关键点
-							x: opt.e.offsetX,
-							y: opt.e.offsetY
-							},
-							zoom
-						)
-						opt.e.preventDefault()
-						opt.e.stopPropagation()
-					})
+					// canvas.on('mouse:wheel', opt => {
+					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
+					// 	zoom *= 0.999 ** delta
+					// 	if (zoom > 20) zoom = 20
+					// 	if (zoom < 0.01) zoom = 0.01
+					// 	// console.log(zoom);
+					// 	canvas.zoomToPoint(
+					// 		{ // 关键点
+					// 		x: opt.e.offsetX,
+					// 		y: opt.e.offsetY
+					// 		},
+					// 		zoom
+					// 	)
+					// 	opt.e.preventDefault()
+					// 	opt.e.stopPropagation()
+					// })
 					await new Promise((resolve, reject) => {
 						fabric.Image.fromURL(data.maskUrl, function(img) {
 							// 设置背景图对象的宽度和高度与 canvas 相同
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 808cf57e..ba7b587b 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -228,14 +228,15 @@ export default defineComponent({
 			level2Type:'',
 			designType:'',
 		})
-		let scene = ref({
-			name:'Generate Sketch',
-			value:'generate'
-		})
+		
 		let openMenu = ref(false)
 		let sketchStyleList:any = computed(()=>{
 			return store.state.UserHabit.SketchGenerateType
 		})
+		let scene = ref({
+			name: t('SketchboardUpload.GenerateSketch'),
+			value:'generate'
+		})
         return {
             fileList,
             openClick,
diff --git a/src/component/LibraryPage/ModelPlacement.vue b/src/component/LibraryPage/ModelPlacement.vue
index 82a5cff2..8cced248 100644
--- a/src/component/LibraryPage/ModelPlacement.vue
+++ b/src/component/LibraryPage/ModelPlacement.vue
@@ -215,10 +215,12 @@ export default defineComponent({
 				autoCropWidth: '0',  //默认生成截图框宽度
 				autoCropHeight: '0', //默认生成截图框高度
 				fixed: true,         //是否开启截图框宽高固定比例
-				fixedBox: true,      //固定截图框大小，不允许改变
+				fixedBox: false,      //固定截图框大小，不允许改变//上传系统模特使用
+				// fixedBox: true,      //固定截图框大小，不允许改变
 				fixedNumber: [1, 2.125], //截图框的宽高比例
 				full: false,         //false按原比例裁切图片，不失真
-				canMove: true,      //上传图片是否可以移动
+				canMove: false,      //上传图片是否可以移动//上传系统模特使用
+				// canMove: true,      //上传图片是否可以移动
 				canMoveBox: false,    //截图框能否拖动
 				original: false,     //上传图片按照原始比例渲染
 				centerBox: false,    //截图框是否被限制在图片里面
@@ -741,6 +743,8 @@ export default defineComponent({
                     returnData[v.type] = [v.left, v.top]
                 });
             }
+            console.log(returnData);
+            
             return returnData
         },
 
diff --git a/src/component/WorksPage/publish.vue b/src/component/WorksPage/publish.vue
index 8f886a5e..228e77f7 100644
--- a/src/component/WorksPage/publish.vue
+++ b/src/component/WorksPage/publish.vue
@@ -33,7 +33,11 @@
 				<div class="publidh_right">
 					<div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
-						<input type="text" v-model="subPublishDate.portfolioName">
+						<div class="publidh_content_item_tag">
+							<input type="text" v-model="subPublishDate.portfolioName">
+							<a-tag closable  color="purple">#RCAworkshop_2024</a-tag> 
+						</div>
+						<a-tag color="purple">#RCAworkshop_2024</a-tag> 
 					</div>
 					<div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
@@ -275,6 +279,22 @@ export default defineComponent({
 		display: flex;
 	    flex-direction: column;
 		height: 100%;
+		
+	}
+	:deep(.ant-tag){
+		// position: absolute;
+		// left: 10px;
+		// top: 50%;
+		// transform: translateY(-50%);
+	}
+	.publidh_content_item_tag{
+		position: relative;
+		.ant-tag{
+			position: absolute;
+			left: 10px;
+			top: 50%;
+			transform: translateY(-50%);
+		}
 	}
 	.publish_content_bottom{
 		--border-color: #c4c4c4;
@@ -292,6 +312,7 @@ export default defineComponent({
 				font-weight: 600;
 				font-size: 1.8rem;
 				margin-bottom: 1rem;
+				
 			}
 			.publidh_content_item_intro{
 				font-size: 1.4rem;
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 3ee110b2..4a368bdb 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -10,6 +10,7 @@
 				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
 				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
 				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 				<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
 			</div>
@@ -27,6 +28,7 @@
 				{{ $t('addDetails.submit') }}
 			</div>
 		</div>
+		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 	</div>
 </template>
 <script>
@@ -42,10 +44,11 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneral";
 import { getMousePosition } from "@/tool/mdEvent";
+import liquefaction from "@/component/modules/liquefaction.vue";
 export default defineComponent({
     components: {
 		creditsDetail,
-		allOrder,
+		allOrder,liquefaction
     },
 	emits: ['submitBase64Data'],
 	props: {
@@ -164,24 +167,24 @@ export default defineComponent({
 							updateCanvasState('mouseUp')
 						}
 					});
-					canvas.on('mouse:wheel', opt => {
+					// canvas.on('mouse:wheel', opt => {
 						
-						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-						let zoom = canvas.getZoom() // 获取画布当前缩放值
-						zoom *= 0.999 ** delta
-						if (zoom > 20) zoom = 20
-						if (zoom < 0.01) zoom = 0.01
-						// console.log(zoom);
-						canvas.zoomToPoint(
-							{ // 关键点
-							x: opt.e.offsetX,
-							y: opt.e.offsetY
-							},
-							zoom
-						)
-						opt.e.preventDefault()
-						opt.e.stopPropagation()
-					})
+					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
+					// 	zoom *= 0.999 ** delta
+					// 	if (zoom > 20) zoom = 20
+					// 	if (zoom < 0.01) zoom = 0.01
+					// 	// console.log(zoom);
+					// 	canvas.zoomToPoint(
+					// 		{ // 关键点
+					// 		x: opt.e.offsetX,
+					// 		y: opt.e.offsetY
+					// 		},
+					// 		zoom
+					// 	)
+					// 	opt.e.preventDefault()
+					// 	opt.e.stopPropagation()
+					// })
 
 					//画布上移动
 					document.addEventListener('mousemove', mouseMove);
@@ -358,6 +361,7 @@ export default defineComponent({
 				let data = exportCanvas.toDataURL('jpg')
 				cancelDsign()
 				clearCanvas()
+				console.log(data);
 				emit('submitBase64Data',data)
 			})
 		}
@@ -366,6 +370,47 @@ export default defineComponent({
 			document.removeEventListener('keyup', canvasKeyUp);
 			showPayOrder.value = false
 		}
+		let liquefactionData = ref(null)
+		let liquefaction = ref(null)
+		let submitLiquefaction = (rv)=>{
+			const originalWidth = liquefactionData.value.width // 保存原始宽度
+			const originalHeight = liquefactionData.value.height; // 保存原始高度
+			liquefactionData.value.setSrc(rv, function(img) {
+				let wScale = 1
+				let hScale = 1
+				if(img.width>img.height){
+					hScale = img.height/img.width
+					exportWH = img.width
+				}else{
+					wScale = img.width/img.height
+					exportWH = img.height
+				}
+				img.scaleToWidth(canvas.width);
+				img.scaleToHeight(canvas.height);
+				img.set({
+					scaleX: canvas.width / img.width,
+					scaleY: canvas.height / img.height
+				});
+				// img.set({
+				// 	scaleX: 1,
+				// 	scaleY: 1
+				// });
+			
+				canvas.renderAll();
+			});
+		}
+		let setLiquefaction = ()=>{
+			const activeObjects = canvas.backgroundImage // 获取选中的对象
+			if (activeObjects) {
+				liquefactionData.value = activeObjects
+				console.log(liquefactionData.value);
+				
+				liquefaction.value.init(activeObjects)
+			} else {
+				// message.info(useI18.t('exportModel.jsContent6'))
+				return null;
+			}
+		}
         return {
             presentState,
             showPayOrder,
@@ -373,12 +418,17 @@ export default defineComponent({
             t,
 			pencilbtnStyle,
 			...toRefs(canvasBtn),
+
+			liquefactionData,
+			liquefaction,
 			init,
 			setOperation,
 			setPencilWidth,
 			historyState,
 			setSubmit,
 			cancelDsign,
+			submitLiquefaction,
+			setLiquefaction,
         };
     },
     data() {
diff --git a/src/component/modules/liquefaction.vue b/src/component/modules/liquefaction.vue
index 65864270..7686b235 100644
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -95,6 +95,8 @@ export default defineComponent({
 			let img = new Image()
 			img.setAttribute('crossOrigin', 'Anonymous')
 			img.onload = () => {
+				canvasImgData.width = img.width
+				canvasImgData.height = img.height
 				let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
 				let width = canvasBox.offsetHeight / img.height * img.width
 				canvas = document.getElementById('c')
@@ -295,6 +297,41 @@ export default defineComponent({
 			}
 		}
 		let submit = ()=>{
+			const newCanvas = document.createElement('canvas');
+			let exportCanvas = new fabric.Canvas(newCanvas, {
+				width: canvasImgData.width,
+				height:canvasImgData.height,
+				isDrawingMode: false, // 开启绘图模式
+			});
+			fabric.Image.fromURL(canvas.toDataURL('png'), function(img) {
+				img.scaleToWidth(exportCanvas.width);
+				img.scaleToHeight(exportCanvas.height);
+				img.set({
+					scaleX: exportCanvas.width / img.width,
+					scaleY: exportCanvas.height / img.height
+				});
+				exportCanvas.setBackgroundImage(img, exportCanvas.renderAll.bind(exportCanvas));
+				let data = exportCanvas.toDataURL({
+					format: "png", // 导出格式为 PNG
+					quality: 1, // 图片质量为 1（最高质量）
+				});
+			},{ crossOrigin: "Anonymous" });
+
+			
+            // newCanvas.width = canvasImgData.width;
+            // newCanvas.height = canvasImgData.height;
+			// const newCtx = newCanvas.getContext('2d');
+			// newCtx.drawImage(
+            //     canvas,  
+            //     0, 0,                   
+            //     canvas.width,
+            //     canvas.height, 
+            //     0, 0,               
+			// 	newCanvas.width,     
+            //     newCanvas.height  
+            // );
+			// console.log(exportCanvas.toDataURL('jpg'));
+			
 			emit('submitLiquefaction',canvas.toDataURL('image/png'))
 			cancelDsign()
 		}
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 1ca7b727..6f650daf 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -303,6 +303,7 @@ export default {
 		Thumbnail:'选择的线稿',
 		inputContent1:'生成图片的标题',
 		maximumLength:'输入的内容超过允许输入的最大长度',
+		GenerateSketch:'生成线稿',
 		jsContent1:"上传失败",
 		jsContent2:"您只能上传图片文件！",
 		jsContent3:'图片必须小于5MB',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 055e69e5..6a4787a0 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -303,6 +303,7 @@ export default {
 		Thumbnail:'Selected sketchboard',
 		inputContent1:'Input prompt',
 		maximumLength:'The entered content exceeds the maximum length.',
+		GenerateSketch:'Generate Sketch',
 		jsContent1:"upload failed",
 		jsContent2:"You can only upload Image file!",
 		jsContent3:'Image must smaller than 5MB!',
diff --git a/src/tool/webSocket.js b/src/tool/webSocket.js
index 007282e9..5a8111c7 100644
--- a/src/tool/webSocket.js
+++ b/src/tool/webSocket.js
@@ -22,9 +22,12 @@ class MyWs {
 			}
 		}
 		this.ws.onclose = (e)=>{
+			console.log('',e);
+			console.log('错误');
 			this.reconnection()
 		}
 		this.ws.onerror = (e)=>{
+			console.log('失败',e);
 			this.reconnection()
 		}
 	}
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 0a861cb6..88ac9b87 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -214,29 +214,7 @@ export default defineComponent({
 		let activeCredits = ref(false)
 		let getLangIsShowMark = ref(true)
 		let AdministratorUserIdList = [88,6,46,31,73,83,87,4]
-		let navRouterList = [
-			{
-				routerName:['homePage'],
-				router:'/home/homePage',
-				name:t('Header.HOME')
-			},{
-				routerName:['library'],
-				router:'/home/library',
-				name:t('Header.LIBRARY')
-			},{
-				routerName:['history'],
-				router:'/home/history',
-				name:t('Header.HISTORY')
-			},{
-				routerName:['works'],
-				router:'/home/works',
-				name:t('Header.WORKS')
-			},{
-				routerName:['events','eventsDetail'],
-				router:'/home/events',
-				name:t('Header.EVENTS')
-			},
-		]
+		let navRouterList = ref([])
 		let messageNum = computed(()=>{
 			return store.state.UserHabit.messageSystem.messageNum
 		})
@@ -322,6 +300,29 @@ export default defineComponent({
 
 		onMounted(()=>{
 			getUnreadCount()
+			navRouterList.value = [
+				{
+					routerName:['homePage'],
+					router:'/home/homePage',
+					name:t('Header.HOME')
+				},{
+					routerName:['library'],
+					router:'/home/library',
+					name:t('Header.LIBRARY')
+				},{
+					routerName:['history'],
+					router:'/home/history',
+					name:t('Header.HISTORY')
+				},{
+					routerName:['works'],
+					router:'/home/works',
+					name:t('Header.WORKS')
+				},{
+					routerName:['events','eventsDetail'],
+					router:'/home/events',
+					name:t('Header.EVENTS')
+				},
+			]
 		})
 		return {
 			store,