fix

2024-06-20 10:36:45 +08:00
parent 814dd1205c
commit dc93403506
28 changed files with 1506 additions and 394 deletions
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -101,7 +101,34 @@
 						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
 						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
 					</div>
+					<div class="exportCanvasBox_left_tool_item">
+						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
+						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
+						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
+						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
+						<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" ></i>
+							<input type="file" @change="uploadImage">
+						</label>
+						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
+					</div>
 					
+				</div>
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+					{{ $t('exportModel.More') }}
+					<!-- <div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+							closeNav.move?'icon-rotate':''
+                        ]"
+                    >
+					</div> -->
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
 					<div class="exportCanvasBox_left_tool_item">
 						<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 							<div >{{ $t('exportModel.Color') }}</div>
@@ -109,7 +136,7 @@
 						</label>
 						<label v-show="operation != 'move'">
 							<div >{{ $t('exportModel.Size') }}:</div>
-							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[operation]">
+							<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
 						</label>
 						<label v-show="operation == 'pencil'">
 							<div >{{ $t('exportModel.Brushwork') }}:</div>
@@ -135,7 +162,7 @@
 								</a-select-option>
 							</a-select>
 						</label>
-						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'">
+						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
 							<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>
@@ -155,40 +182,24 @@
 							<div >{{ $t('exportModel.Width') }}</div>
 							<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
 						</label>
+						<label v-show="operation == '' || operation == 'text' || textDataShow">
+							<div>Font Family</div>
+							<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
+								style="flex: 1"
+								@change="setFontFamily"
+								>
+								<!-- v-model:value="brushwork" -->
+								<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+									{{item.name}}
+								</a-select-option>
+							</a-select>
+						</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')">
-					{{ $t('exportModel.More') }}
-					<div
-                        :class="[
-                            'icon',
-                            'iconfont',
-                            'icon-xiala',
-							closeNav.move?'icon-rotate':''
-                        ]"
-                    >
-					</div>
-				</div>
-				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
-					<div class="exportCanvasBox_left_tool_item">
-						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
-						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
-						<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" ></i>
-							<input type="file" @change="uploadImage">
-						</label>
-						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-					</div>
-					
-				</div>
 				<div class="exportCanvasBox_left_bottom">
 					<div class="exportCanvasBox_left_credits" v-show="credits<1">
 						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
@@ -443,11 +454,9 @@ export default defineComponent({
 					Https.axiosPost(Https.httpUrls.exportSearch, data)
 					.then((rv) => {
 						resolve(rv)
-						isShowMark.value = false
 					})
 					.catch((rv) => {
 						resolve(null)
-						isShowMark.value = false
 					});
 				})
 				
@@ -456,6 +465,7 @@ export default defineComponent({
 					canvasWH.value.height = oldExportCanvas.canvasHeight
 					canvas.setHeight(canvasWH.value.height);
 					canvas.loadFromJSON(oldExportCanvas, () => {});
+					isShowMark.value = false
 				}else{
 					for (const item of arr) {
 						for (const key in allBoardData.value) {
@@ -560,6 +570,7 @@ export default defineComponent({
 							canvas.setHeight(canvasWH.value.height);
 						}
 					}
+					isShowMark.value = false
 				}
 				updateCanvasState('')//加载完成后记录一下
 				if(driver__.value.driver){
@@ -638,6 +649,9 @@ export default defineComponent({
 				minioUrl = data.url
 			}else if(key == 'likePorductImg'){
 				imgId = data.id
+				let url = data.imgUrl.split('?')[0]
+				var match = url.match(/:(\d+)\/(.*)/);
+				minioUrl = match[2]
 			}else if(key == 'disposeMoodboard'){
 				let url = data.imgUrl.split('?')[0]
 				var match = url.match(/:(\d+)\/(.*)/);
@@ -665,14 +679,33 @@ export default defineComponent({
 				lockRotation: true,
 			});
 		}
-		
-        //设置导出
-        let setExport = async () => {
-			initAligningGuidelines(canvas,false)
-            var imageDataURL = canvas.toDataURL({
+		let setExportCanvas = ()=>{
+			var objects = canvas.getObjects();
+			var maxHeight = 0;
+
+			// 计算所有对象的最大高度
+			objects.forEach(function(obj) {
+				var objBottom = obj.top + obj.height*obj.scaleY;
+				if (objBottom > maxHeight) {
+					console.log(obj);
+					maxHeight = objBottom;
+				}
+			});
+			canvasWH.height = maxHeight+30
+			// 调整 Canvas 的高度
+			canvas.setDimensions({ height: canvasWH.height });
+
+			// 重新渲染 Canvas
+			canvas.renderAll();
+			return canvas.toDataURL({
                format: "png", // 导出格式为 PNG
                quality: 1, // 图片质量为 1（最高质量）
            });
+		}
+        //设置导出
+        let setExport = async () => {
+			initAligningGuidelines(canvas,false)
+            var imageDataURL = setExportCanvas()
            let a = document.createElement("a");
            let img = [];
            let index = 0;
@@ -1107,6 +1140,8 @@ export default defineComponent({
 		let canvasPencilWidth = ref({

 		})
+		let fontFamily = ref({})
+		let textFontFamilyList = ref([])
 		let allSelectWidth = ref(-1)//多选或单选的宽度
 		let allSelect = ref([])//多选或单选的宽度
 		let setOperation = (str)=>{
@@ -1122,10 +1157,9 @@ export default defineComponent({
 			if(str == 'pencil'){
 				setPencil()
 			}else if(str == 'move'){
-				setMove()
 				JSchangeType(canvas,'init')
 				initAligningGuidelines(canvas,true)
-
+				setMove()
 			}else if(str == 'texture'){
 				setTexture()
 			}else if(str == 'eraser'){
@@ -1134,8 +1168,8 @@ export default defineComponent({
 				setMove()
 				setText()
 				JSchangeType(canvas,'init')
-			}else{
-				canvas.forEachObject((obj) =>obj.selectable = false);
+			}else if(str){
+				// canvas.forEachObject((obj) =>obj.selectable = false);
 				canvas.isDrawingMode = false
 			}
 		}
@@ -1356,43 +1390,50 @@ export default defineComponent({
 			canvas.freeDrawingBrush.isEraser = true
 			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
 		}
+		let createText = {}
 		let setTextFun = (e)=>{
 			if(operation.value != 'text'){
 				return
 			}
 			var clickedObject = e.target;
 			if (clickedObject instanceof fabric.Textbox) {
+				createText = clickedObject
 			}else{
 				var pointer = canvas.getPointer(e.pointer);
 				var x = pointer.x;
 				var y = pointer.y;
-				let textbox = new fabric.Textbox('', {
+				createText = new fabric.Textbox('', {
 					left: x,
 					top: y,
 					width: 150,
 					fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
+					fontFamily:fontFamily.value,
 					fill:canvasPencilColor.value,

 				})
-				canvas.add(textbox)
-				textbox.enterEditing();
-				canvas.setActiveObject(textbox).renderAll();
+				canvas.add(createText)
+				createText.enterEditing();
+				canvas.setActiveObject(createText).renderAll();
+				operation.value = ''
+				removeSetText()
 			}
 			
 		}
 		let setText = ()=>{
-			if(isMoible()){
 				canvas.on('mouse:down',setTextFun)
-			}else{
-				canvas.on('mouse:dblclick',setTextFun)
-			}
+			// if(isMoible()){
+			// 	canvas.on('mouse:down',setTextFun)
+			// }else{
+			// 	canvas.on('mouse:dblclick',setTextFun)
+			// }
 		}
 		let removeSetText = ()=>{
-			if(isMoible()){
 				canvas.off('mouse:down',setTextFun)
-			}else{
-				canvas.off('mouse:dblclick',setTextFun)
-			}
+			// if(isMoible()){
+			// 	canvas.off('mouse:down',setTextFun)
+			// }else{
+			// 	canvas.off('mouse:dblclick',setTextFun)
+			// }
 		}
 		// let setTextStyle = (x,y)=>{
 		// 	var group = new fabric.Group([rect.color, rect.text, rect.text1],{
@@ -1414,6 +1455,10 @@ export default defineComponent({
 		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.color)
 			setTimeOut.color = setTimeout(()=>{
+				if(createText){
+					setFontFamily()
+					return
+				}
 				// brushIndicator.fill = canvasPencilColor.value;
 				
 				if(canvas.freeDrawingBrush.isEraser){
@@ -1484,6 +1529,7 @@ export default defineComponent({
 		let setCanvasDown = (event)=>{
 			// brushIndicator.set({fill: '#FFF',strokeWidth:0});
 			//设置移动端按下添加元素
+			
 			if(isMoible && present.upScaleChecked){
 				present.upScaleChecked = false
 				present = {}
@@ -1527,6 +1573,15 @@ export default defineComponent({
 					}
 				}
 			}else{
+				var clickedObject = event.target;
+				if (clickedObject instanceof fabric.Textbox && operation.value != 'text') {
+					textDataShow.value = true
+					createText = clickedObject
+					setTextData(clickedObject)
+				}else{
+					textDataShow.value = false
+					createText = {}
+				}
 				createPatterningIs = false
 			}
 		}
@@ -1549,6 +1604,7 @@ export default defineComponent({
 			// currentPatterning.set({stroke: canvasPencilColor.value})
 			createPatterningIs = false
 			clearPatterning()//临时图形置为空并且添加撤回对象里面
+			setOperation('move')
 		}
 		//设置再画布上抬起
 		let setCanvasUp = (event)=>{
@@ -1592,9 +1648,10 @@ export default defineComponent({
 				if(operation.value == 'fold'){
 					canvas.forEachObject((obj) =>obj.selectable = false);
 					canvas.bringToFront(polyLineBtn);//设置优先级最高
-				}else{
+				}else if(operation.value){
 					createPatterningIs = false
 					clearPatterning()//临时图形置为空并且添加撤回对象里面
+					setOperation('move')
 				}
 			}
 		}
@@ -1768,10 +1825,7 @@ export default defineComponent({
 			initAligningGuidelines(canvas,false)
 			let publishModal = publish.value
 			publishModal.publishMask = true
-			var imageDataURL = canvas.toDataURL({
-                format: "jpeg", // 导出格式为 PNG
-                quality: 1, // 图片质量为 1（最高质量）
-            });
+			var imageDataURL = setExportCanvas()
 			let data = {
 				"imgUrl":imageDataURL,
 				userlikeGroupId:userlikeGroupId,
@@ -1801,7 +1855,43 @@ export default defineComponent({
 			})
 			return json
 		}
-        onMounted(() => {});
+		let textDataShow = ref(false)
+		let setTextData = (obj)=>{
+			fontFamily.value = obj.fontFamily
+			canvasPencilWidth.value['text'] = obj.fontSize
+			canvasPencilColor.value = obj.fill
+		}
+		let setFontFamily = ()=>{
+			if(createText){
+				createText.set({
+					fontFamily:fontFamily.value,
+					fontSize:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
+					fill:canvasPencilColor.value,
+				})
+				canvas.renderAll();
+			}
+		}
+        onMounted(() => {
+			let arr = [
+					{ value: 'Arial', name: 'select font' },
+					{ value: 'EN_slogan_art1', name: 'select font' },
+					{ value: 'EN_slogan_art2', name: 'select font' },
+					{ value: 'EN_slogan_art3', name: 'select font' },
+					{ value: 'EN_slogan_art4', name: 'select font' },
+					{ value: 'EN_slogan_art5', name: 'select font' },
+					{ value: 'EN_slogan_art6', name: 'select font' },
+					{ value: 'EN_slogan_art7', name: 'select font' },
+					{ value: '微软雅黑', name: '请选择字体' },
+					{ value: 'CN_slogan_art1', name: '请选择字体' },
+					{ value: 'CN_slogan_art2', name: '请选择字体' },
+					{ value: 'CN_slogan_art3', name: '请选择字体' },
+					{ value: 'CN_slogan_art4', name: '请选择字体' },
+					{ value: '华文行楷', name: '请选择字体' },
+					{ value: '隶书', name: '请选择字体' },
+				]
+			textFontFamilyList.value = arr
+			fontFamily.value = arr[0].value
+		});
        return {
 			toSvg,
 			t,
@@ -1853,6 +1943,10 @@ export default defineComponent({
 			setExportSR,//设置SR导出
 			setShare,
 			setSubmit,
+			textFontFamilyList,
+			fontFamily,
+			textDataShow,
+			setFontFamily,
        };
    },
    data(prop) {
@@ -1989,11 +2083,13 @@ export default defineComponent({
                div {
                    width: 8rem;
                }
-                input {
+                input,select {
                    // width: 10em;
 					flex: 1;
 					overflow: hidden;
+					height: 4.5rem;
                }
+				
 				.label_select{
 					img{
 						width: 100%;