修改generate流程，新增导出功能

2024-04-03 17:39:44 +08:00
parent ef3ebf05b0
commit 31a6d05e31
13 changed files with 721 additions and 176 deletions
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -49,6 +49,7 @@
                    >	

                        <div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
+                        <div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
                        <div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
                        <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
                        <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
@@ -130,7 +131,7 @@
 								</a-select-option>
 							</a-select>
 						</label>
-						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
+						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'">
 							<div >{{ $t('exportModel.FillBack') }}:</div>
 							<div class="exportCanvasBox_left_tool_item leftAlign">
 								<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
@@ -146,6 +147,14 @@
 								<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
 							</div>
 						</label>
+						<label v-show="allSelectWidth > -1">
+							<div >{{ $t('exportModel.Width') }}</div>
+							<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
+						</label>
+						<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+							<div >{{ $t('exportModel.Height') }}</div>
+							<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
+						</label> -->
 					</div>
 				</div>
 				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
@@ -169,9 +178,10 @@
 						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
 						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
 						<label class="uploadImage">
-							<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
+							<i class="icon iconfont icon-shangchuantupian" ></i>
 							<input type="file" @change="uploadImage">
 						</label>
+						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
 					</div>
 					
 				</div>
@@ -180,7 +190,7 @@
 						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
 					</div>
 					<div class="exportCanvasBox_left_btn">
-						<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
+						<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
 						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
 					</div>
 				</div>
@@ -223,7 +233,7 @@
 			</div>
 			<div class="modal_title_text">
 				<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
-				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
+				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
 			</div>
 			<div class="SRExport_operate">
 				<div class="SRExport_operate_box">
@@ -238,7 +248,7 @@
 					</a-select> -->
 					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==2}" @click="setScaleSR(2)">2</div>
 					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==4}" @click="setScaleSR(4)">4</div>
-					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div>
+					<!-- <div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div> -->
 				</div>
 				<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
 					<div class="check_block"><div class="check_block_body"></div></div>
@@ -254,7 +264,7 @@
 			</div>
 			<div class="generalModelOperate_endBtn">
 				<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
-				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
+				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
    </a-modal>
@@ -349,20 +359,17 @@ export default defineComponent({
                    isDrawingMode: false, // 开启绘图模式
                });
 				brushIndicator = clearBrushIndicator()
-
-				JSchangeType(canvas,'init')
 				canvasOnDrop()//开启鼠标到画布事件
 				setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
 				canvas.preserveObjectStacking = true;
-				console.log(canvas.wrapperEl);
 				//鼠标移动
 				// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
 				// canvas.wrapperEl.onmouseout  = clearCanvasKeyDown;//document上添加按下和抬起事件
-				canvas.on("mouse:over", event =>setCanvasKeyDown());//document上添加按下和抬起事件
-				canvas.on("mouse:out", event =>clearCanvasKeyDown(e));//document上添加按下和抬起事件
+				canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
+				canvas.on("mouse:out", event =>clearCanvasKeyDown(event));//document上添加按下和抬起事件

 				canvas.on("mouse:move", event =>setCanvasMove(event));
 				canvas.on("mouse:out", event=>setCanvasOut(event));
@@ -376,6 +383,8 @@ export default defineComponent({
 				// 	obj.target.cornerSize = 10
 				// 	obj.target.transparentCorners = false
 				// });
+				initAligningGuidelines(canvas,true)
+				JSchangeType(canvas,'init')
 				fabric.Object.prototype.cornerSize = 10
 				fabric.Object.prototype.transparentCorners = false 
 				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -502,6 +511,7 @@ export default defineComponent({
 				if(driver__.value.driver){
 					driverObj__.moveNext()
 				}
+				
            });
 			
        };
@@ -888,14 +898,15 @@ export default defineComponent({
 		}
 		//撤回
 		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){
-				canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
 				let obj = reverseCanvasState.value.pop()
+				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				canvasState.value = obj 
 				normalCanvasState.value.push(obj);
 			}else if(str == '' && normalCanvasState.value.length > 1){
 				let obj = normalCanvasState.value.pop()
-				reverseCanvasState.value.push(obj);
 				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
 				isLoadCanvas = true;
 			}else{
 				return
@@ -923,8 +934,6 @@ export default defineComponent({
 		// 监听键盘的 keydown 和 keyup 事件
 		let keyDown = []
 		let canvasKeyDown = (event) => {
-			console.log(123);
-			console.log(event);
 			if(keyDown.indexOf(event.key)>-1){
 			}else{
 				keyDown.push(event.code)
@@ -949,28 +958,34 @@ export default defineComponent({
 				})
 			}
 		let setCanvasKeyDown = (event)=>{
-			let e = event || window.event
-			e.stopPropagation();
-			document.addEventListener('keydown',canvasKeyDown,true);
-			document.addEventListener('keyup', canvasKeyUp,true);
+			// let e = event || window.event
+			// e.stopPropagation();
+			document.addEventListener('keydown',canvasKeyDown);
+			document.addEventListener('keyup', canvasKeyUp);
 		}
 		let clearCanvasKeyDown = (pointer)=>{
-			console.log(123222);
-			var pointer = canvas.getPointer(options.e);
-  var x = pointer.x;
-  var y = pointer.y;
+			// var pointer = canvas.getPointer(pointer);
+			if(!pointer?.target){
+				document.removeEventListener('keydown',canvasKeyDown);
+				document.removeEventListener('keyup', canvasKeyUp);
+			}
+			// var x = pointer.x;
+			// var y = pointer.y;

  // 检查是否鼠标离开了画布
-  if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
-    // 执行你的操作
-    console.log('鼠标离开了画布');
-  }
-			
-			document.removeEventListener('keydown',canvasKeyDown,true);
-			document.removeEventListener('keyup', canvasKeyUp,true);
+//   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
+//     // 执行你的操作
+//     console.log('鼠标离开了画布');
+//   }
+			// if(!x || !y){
+			// 	document.removeEventListener('keydown',canvasKeyDown);
+			// 	document.removeEventListener('keyup', canvasKeyUp);
+			// }	
 		}
-		let canvasPencilColor = ref('#000000')
-		let canvasPencilWidth = ref(20)
+		let canvasPencilColor = ref('#000000')//画笔颜色
+		let canvasPencilWidth = ref(20)//画笔大小
+		let allSelectWidth = ref(-1)//多选或单选的宽度
+		let allSelect = ref([])//多选或单选的宽度
 		let setOperation = (str)=>{
 			operation.value = str
 			//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
@@ -978,23 +993,41 @@ export default defineComponent({
 			if(createPatterningIs){
 				canvas.remove(currentPatterning)
 			}
+			removeSetText()
+			initAligningGuidelines(canvas,false)
 			canvas.remove(polyLineBtn)
-
 			if(str == 'pencil'){
 				setPencil()
 			}else if(str == 'move'){
 				setMove()
-				canvas.forEachObject((obj) =>obj.selectable = true);
 				JSchangeType(canvas,'init')
+				initAligningGuidelines(canvas,true)
+
 			}else if(str == 'texture'){
 				setTexture()
 			}else if(str == 'eraser'){
 				setEraser()
+			}else if(str == 'text'){
+				setText()
+				JSchangeType(canvas,'init')
 			}else{
 				canvas.forEachObject((obj) =>obj.selectable = false);
 				canvas.isDrawingMode = false
 			}
 		}
+		let _setAllSelectTime = null
+		let setAllSelectWidth = ()=>{
+			clearTimeout(_setAllSelectTime)
+			allSelect.value.forEach((item)=>{
+				// item.width = allSelectWidth.value
+				item.scaleX = allSelectWidth.value/item.width
+				item.scaleY = item.scaleX
+				item.setCoords()
+			})
+			_setAllSelectTime = setTimeout(() => {
+				updateCanvasState('')//加载完成后记录一下
+			}, 1500);
+		}
 		let _clipboard  = null // 复制到的内容
 		let copy = () => {//复制
 			var activeObject = canvas.getActiveObject();
@@ -1091,7 +1124,7 @@ export default defineComponent({
 				radius:canvasPencilWidth.value/2,
 				fill: '#fff',
 				stroke: '#000',
-				strokeWidth: 0,
+				strokeWidth: 1,
 				originX: 'center',
 				originY: 'center',
 				visible :true,
@@ -1192,6 +1225,50 @@ export default defineComponent({
 			canvas.freeDrawingBrush.isEraser = true
 			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
 		}
+		let setTextFun = (e)=>{
+			if(operation.value != 'text'){
+				return
+			}
+			
+			var clickedObject = e.target;
+			if (clickedObject instanceof fabric.Textbox) {
+			}else{
+				var pointer = canvas.getPointer(e.pointer);
+				var x = pointer.x;
+				var y = pointer.y;
+				let textbox = new fabric.Textbox('#', {
+					left: x,
+					top: y,
+					width: 150,
+					fontSize: canvasPencilWidth.value,
+					fill:canvasPencilColor.value,
+
+				})
+				canvas.add(textbox)
+				canvas.renderAll();
+				textbox.enterEditing();
+			}
+			
+		}
+		let setText = ()=>{
+			canvas.on('mouse:dblclick',setTextFun)
+		}
+		let removeSetText = ()=>{
+			canvas.off('mouse:dblclick',setTextFun)
+		}
+		// let setTextStyle = (x,y)=>{
+		// 	var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+		// 		left,
+		// 		top,
+		// 		width: rect.width,
+		// 		fill: "rgb(255,255,255)",
+		// 		stroke: "#212121",
+		// 		strokeWidth: 1,
+		// 	});
+		// 	canvas.add(group);
+		// }
+		
+		
 		let setTimeOut = {
 			color:null,
 			width:null,
@@ -1263,7 +1340,6 @@ export default defineComponent({
 		}
 		let setCanvasOut = (event)=>{
 			canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
-			clearCanvasKeyDown()//鼠标移出关闭键盘事件
 		}
 		//设置再画布上按下
 		let setCanvasDown = (event)=>{
@@ -1325,7 +1401,16 @@ export default defineComponent({
 			}else{
 				// event.target && (event.target.bringToFront())//设置优先级
 			}
+			var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
+			if (selectedObjects.length >= 1) {
+				allSelect.value = selectedObjects
+				// allSelectWidth.value = 0
+				allSelectWidth.value = selectedObjects[0].width * selectedObjects[0].scaleX
+			}else{
+				allSelectWidth.value = -1
+			}
 			if(createPatterningIs){
+				
 				switch (operation.value) {
 					case 'line':
 						currentPatterning.set({stroke: canvasPencilColor.value})
@@ -1354,12 +1439,12 @@ export default defineComponent({
 			}
 		}
 		let setHDExport = async ()=>{//获取选中内容的位置信息
-			if(allBoardData.value.printboardFiles.length <= 0){
-				message.info('Your print is empty')
-				return
-			}
+			// if(allBoardData.value.printboardFiles.length <= 0){
+			// 	message.info('Your print is empty')
+			// 	return
+			// }
 			if(credits.value < 30){
-				message.info('Your points are less than one SR')
+				message.info( useI18.t('exportModel.jsContent3'))
 				// return
 			}
 			showSRExport.value = true
@@ -1456,18 +1541,18 @@ export default defineComponent({
 		let setExportSR = ()=>{
 			let arr = []
 			let data = []
-			if(allExportSR.value.filter(item=> item.checked ).length <= 0){
-				message.info('Your print is empty')
-				return
-			}
+			// if(allExportSR.value.filter(item=> item.checked ).length <= 0){
+			// 	message.info('Your print is empty')
+			// 	return
+			// }
 			if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
-				message.info('Your points balance is insufficient')
+				message.info(useI18.t('exportModel.jsContent4'))
 				return
 			}
-			allExportSR.value.forEach(async (item,index)=>{
-				let obj = {}
-				await new Promise((resolve,reject)=>{
-					if(item.checked){
+			let allPromise = allExportSR.value.map(async (item,index)=>{
+				if(item.checked){
+					return await new Promise((resolve,reject)=>{
+						let obj = {}
 						obj = {
 							images:item.imgUrl,
 							scale: scaleSR.value,
@@ -1479,20 +1564,36 @@ export default defineComponent({
 							if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
 								arr.push(index)
 							}
+							resolve(img)
 						}
 						img.src = item.imgUrl
-					}
-				})
+					})
+				}else{
+					return
+				}
 			})
-			if(arr.length > 0){
-				let str = arr.join(',')
-				message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
-				return
-			}
-			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
-				emit('setTask',rv)
-				cancelSRExport()
+			Promise.all(allPromise)
+			.then(promiseArr => {
+				if(arr.length > 0){
+					let str = arr.join(',')
+					message.info(useI18.t('exportModel.jsContent5',{str:str}))
+					return
+				}
+				let aa = promiseArr.filter(item=> item == undefined)
+				if(aa.length == promiseArr.length){
+					message.info(useI18.t('exportModel.jsContent6'))
+
+				}else{
+					Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+						emit('setTask',rv)
+						cancelSRExport()
+					});
+				}
+				
+			})
+			.catch(error => {
 			});
+			
 		}
        onMounted(() => {});
        return {
@@ -1521,6 +1622,8 @@ export default defineComponent({
 			textureList,//材质列表
 			canvasPencilColor,//input选择颜色
 			canvasPencilWidth,//input选择宽度
+			setAllSelectWidth,//多选设置宽度
+			allSelectWidth,//多选设置宽度的值
 			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			setHDExport,//高清导出选择的图片
@@ -1827,10 +1930,11 @@ export default defineComponent({
 			margin-bottom: 2rem;
 			input{
 				position: absolute;
-				top: 0rem;
-				right: 0rem;
+				top: .5rem;
+				right: .5rem;
 				z-index: 2;
-				height: 3rem;
+				height: 2rem;
+				width: 2rem;
 			}
 		}
 		img{