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/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -51,7 +51,7 @@
 						</div> -->
 						<div class="color_setting_operateSingle">
 							<div class="started_btn" @click="setOperate">
-								{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual Change':'Single'}}
+								{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual':'Single'}}
 							</div>
 						</div>
 						<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
--- 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%;
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -43,7 +43,7 @@
 						<template #content>
 							<p>Seed</p>
 						</template>
-						<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
+						<input class="search_seed" max="9999" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
 					</a-popover>
 					
 					<input
@@ -99,10 +99,11 @@
 				</div>
 				<span class="inputShowText" ref="inputShowText"></span>
 			</div>
-            <div class="search_keyword" v-show="isInputFocus" @click.stop="">
+            <div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
 				<div class="search_keyword_center">
 					<div class="search_keyword_center_left">
-						<div v-for="item in workspace?.keyWord?.[type_.type2]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
+						<div v-if="type_.type2 == 'Printboard'" v-for="item in styleRecommend" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
+						<div v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
 					</div>
 				</div>
 			</div>
@@ -242,6 +243,7 @@ export default defineComponent({
 		let generateProceedList = ref([])
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
+		let styleRecommend:any = inject('styleRecommend')
        return {
            searchPictureName,
 			searchPictureSeed,
@@ -267,6 +269,7 @@ export default defineComponent({
 			generateProceedList,
 			remGenerate,
 			remGenerateTime,
+			styleRecommend,
        };
    },
    data(prop) {
@@ -392,6 +395,7 @@ export default defineComponent({
 		},
 		getgenerate(){
 			this.isTextarea = false
+			this.isInputFocus = false
 			if(this.isGenerate)return
 			clearInterval(this.remGenerateTime)
 			if(this.searchPictureName){
@@ -417,16 +421,28 @@ export default defineComponent({
 			let collectionElementId = ''
 			let base64 = ''
 			if(this.sketchboardList?.[0]){
-				level2Type = this.sketchboardList[0].categoryValue?this.sketchboardList[0].categoryValue:''
 				collectionElementId = this.sketchboardList[0].id
 				if(this.sketchboardList[0].base64){
 					base64 = this.sketchboardList[0].imgUrl
 				}
 			}
+			let sloganType = ['Blue and Yellow Starry Night','Green Cthulhu','Red and yellow fire style','Cyberpunk style','City skyline buildings','Red maple leaves','Golden Sunflower','Emerald Jungle Canopy','Pink Sakura Blossom']
+			let sloganText = ''
+			sloganText = this.searchPictureName
 			if(this.upload.level1Type == "Sketchboard"){
-				
+				level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
 			}else if(this.upload.level1Type == "Printboard"){
 				level2Type = this.scene?.value
+				if(level2Type == 'Slogan' && this.searchPictureName == ''){
+					var randomNumber = Math.floor(Math.random() * sloganType.length);
+					sloganText = sloganType[randomNumber]
+				}else if(level2Type == 'Pattern'){
+					sloganText = `${this.printModel.value},${sloganText}`
+				}
+				if(!base64 && level2Type == 'Slogan'){
+					message.info('请绘制Slogan');
+					return
+				}
 			}
 			let data = {
 				generateType:'text',
@@ -434,7 +450,7 @@ export default defineComponent({
 				collectionElementId:collectionElementId,
 				level1Type:this.upload.level1Type,
 				level2Type:level2Type,
-				text:this.searchPictureName,
+				text:sloganText,
 				seed:this.searchPictureSeed,
 				userId:this?.userInfo?.userId,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -559,6 +575,9 @@ export default defineComponent({
 			if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
 				str = ','
 			}
+			if(this.upload.level1Type == "Moodboard"){
+				this.styleRecommend.push(value)
+			}
 			this.searchPictureName += str + value
 		},
 		ifSeedValue(e:any){
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -154,7 +154,7 @@
 							<span class="icon iconfont icon-shanchu operate_icon"></span>
 						</div>
 						<div class="pin_block">
-							<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
+							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
 				</div>
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -1,5 +1,4 @@
 <template>
-	<keep-alive>
    <div v-if="showCollectionModal">
         <a-modal class="modal_component collection_modal Guide_1_2" 
            v-model:visible="showCollectionModal" 
@@ -56,7 +55,6 @@
 			</div>
        </a-modal>
    </div>
-</keep-alive>
 </template>
 <script lang="ts">
 import { defineComponent ,createVNode, ref,onUnmounted , computed,provide } from 'vue'
@@ -101,6 +99,8 @@ export default defineComponent({
 		let collectionStep=ref(1)
 		provide('driver__',driver__)
 		let isShowMark = ref(false)
+		let styleRecommend = ref([])
+		provide('styleRecommend',styleRecommend)
 		onUnmounted(()=>{
 			let data = {
 				showCollectionModal:showCollectionModal.value,
@@ -116,6 +116,7 @@ export default defineComponent({
 			position,
 			showCollectionModal,
 			collectionStep,
+			styleRecommend,
 		}
 		
 	},
@@ -203,6 +204,7 @@ export default defineComponent({
                    _this.showCollectionModal = false
                    _this.store.commit('clearAllData')
                    _this.collectionStep = 1
+					_this.styleRecommend = []
                }
            });
        },
@@ -285,9 +287,12 @@ export default defineComponent({
 		},
        //完成
        async finishCollection(){
+			console.log(123123);
+			
 			this.isShowMark = true
 			let sketchList = this.store.state.UploadFilesModule.sketchboard
 			let arr:any = []
+			console.log(sketchList);
 			sketchList.forEach((item:any) => {
 				let obj = {
 					designType:item.resData.designType,
@@ -302,6 +307,7 @@ export default defineComponent({
 				this.isShowMark = false
 				return
 			}
+			
 			let elList = document.querySelectorAll('.img_block_item_sketch img')
 			Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
 				.then((rv: any) => {
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -107,7 +107,7 @@ export default defineComponent({
 		let canvasWH = ref(0);
 		let textData = reactive({
 			fill:'#000000',
-			fontSize:'35',
+			fontSize:'51',
 			fontFamily:'Arial',
 			textAlign:'left',
 			overline: false,
@@ -144,21 +144,26 @@ export default defineComponent({
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".clearSlogan_modal .exportCanvasBox_center");
 				let height = canvasBox.offsetHeight;
+				textData.fontSize = (height/10*1.9).toFixed(0)
 				canvasBox.style.width = height+'px'
 				canvasWH.value = height
 				scale = exportWH/canvasWH.value
-				var canvasDom = document.createElement("canvas");
 				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-				if(oldCanvasDom)oldCanvasDom.remove()
-				canvasBox.appendChild(canvasDom);
-				canvas = new fabric.Canvas(canvasDom, {
-					backgroundColor: "#e6e6e6",
-					width: canvasWH.value,
-					height: canvasWH.value,
-					isDrawingMode: false, // 开启绘图模式
-				});
-				canvas.on('object:moving',canvasMoving)
-				setTextFun('请输入一段话吧~')
+				// if(oldCanvasDom)oldCanvasDom.remove()
+				if(!oldCanvasDom){
+					var canvasDom = document.createElement("canvas");
+					canvasBox.appendChild(canvasDom);
+					canvas = new fabric.Canvas(canvasDom, {
+						backgroundColor: "#e6e6e6",
+						width: canvasWH.value,
+						height: canvasWH.value,
+						isDrawingMode: false, // 开启绘图模式
+					});
+					canvas.on('object:moving',canvasMoving)
+					
+					setTextFun('请输入\n一段话吧~')
+				}
+				
 				if(!fabric.Object.prototype.controls.deleteControl){
 					JSSetRemoveImage(deleteObj)
 				}else{
@@ -171,6 +176,14 @@ export default defineComponent({
 			})
        }
 		let selectTextbox = ref(null)
+		let oldClickedObject = null
+		let clickObjChanged = (options)=>{
+			console.log(options);
+			console.log(oldClickedObject);
+			// var changedObject = options.target;
+			setBtnPosition(oldClickedObject)
+
+		}
 		let setTextBtn = (e) =>{//点击判断是否点击到文字
 			var clickedObject = e.target;
 			if (clickedObject instanceof fabric.IText){
@@ -183,6 +196,9 @@ export default defineComponent({
 				textData.linethrough = clickedObject.linethrough
 				textData.underline = clickedObject.underline
 				setBtnPosition(clickedObject)
+				clickedObject.on('changed',clickObjChanged);
+				if(oldClickedObject)oldClickedObject.off('changed',clickObjChanged);
+				oldClickedObject = clickedObject
 			}else{
 				selectTextbox.value = null
 				textBtnShow.value = false
@@ -206,6 +222,23 @@ export default defineComponent({
 		let messageShow = false
 		let canvasMoving = (options)=>{
 			let obj = options.target
+			let left,top
+			let canvasWidth = canvas.getWidth()
+			let canvasHeight = canvas.getHeight()
+			if(obj.left < 0){
+				left = obj.left<0?0:obj.left
+			}else{
+				left = obj.left + obj.width*obj.scaleX>canvasWidth?canvasWidth -  obj.width*obj.scaleX:obj.left
+			}
+			if(obj.top < 0){
+				top = obj.top<0?0:obj.top
+			}else{
+				top = obj.top + obj.height*obj.scaleY>canvasHeight?canvasHeight -  obj.height*obj.scaleY:obj.top
+			}
+			obj.set({
+				left,
+				top
+			})
 			isCanvasMoving(obj)
 		}
 		let isCanvasMoving = (obj)=>{
@@ -240,7 +273,6 @@ export default defineComponent({
 			textbox = new fabric.IText(str, {
 				fontSize: 20,
 				textAlign:'center'
-				
 				// fill:canvasPencilColor.value,
 			})
 			textbox.set(textData)
@@ -364,6 +396,12 @@ export default defineComponent({
 		flex-direction: column;
 		// height: calc(512px / 2);
 		margin: 0 auto;
+		.modal_title_text{
+			padding-bottom: calc(2rem* 1.2);
+			background: #fff;
+			z-index: 4;
+			margin-bottom: 0;
+		}
 		.clearSlogan_center_item{
 			// position: relative;
 			background: #fff;
@@ -391,14 +429,6 @@ export default defineComponent({
 					-webkit-appearance: none;
 					margin: 0;
 				}
-				>select{
-					height: 2.5rem;
-					border: 0.2rem solid #c4c4c4 !important;
-					border-radius: 4px; /* 设置圆角半径 */
-				}
-				>select:focus-visible{
-					border: 0.2rem solid #c4c4c4;
-				}
 				div{
 					padding: 0 1rem;
 					font-weight: 600;
@@ -442,7 +472,7 @@ export default defineComponent({
 			flex: 1;
 			position: relative;
 			margin: 0 auto;
-			overflow: hidden;
+			// overflow: hidden;
 			// overflow: scroll;
 			.canvas-container{
 				margin: 0 auto;
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -233,6 +233,7 @@ export default defineComponent({
 		let cleardata = ()=>{
 		    productImg.value = false
 			productImgData.isShowMark = false
+			productImgData.likeList = []
 		}

 		let fileUploadChange = (data: any)=> {