语言适配

2024-07-03 17:32:06 +08:00
parent b08a0f85ad
commit 3fd6343e53
17 changed files with 219 additions and 81 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -59,12 +59,12 @@
 						<!-- 全屏 --> 
 						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
 						<!-- 编辑 -->
-						<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
-						<i v-show="!body && !deleteShow" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
+						<i v-show="!body" class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+						<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 						<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>

 						<!-- 层 -->
-						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
+						<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
 						<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
 						<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 					</div>
@@ -79,7 +79,7 @@
 								<i class="fi fi-rs-comments"></i>
 								<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
-								<i v-show="current?.id" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
+								<i v-show="current?.id" :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
 							</div>
 							<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
 								<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -89,6 +89,7 @@ export default defineComponent({
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
 		let canvasState = ref()//存放canvas操作
+		let keyDown = []//监听键盘的 keydown 和 keyup 事件
 		let init = (data,index)=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -103,6 +104,10 @@ export default defineComponent({
 				canvasBox.style.width = height+'px'
 				canvasWH.value = height
 				var canvasDom = document.createElement("canvas");
+				document.addEventListener("keydown", canvasKeyDown);
+				document.addEventListener("keyup", canvasKeyUp);
+				
+
 				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 				if(oldCanvasDom)oldCanvasDom.remove()
 				canvasBox.appendChild(canvasDom);
@@ -128,12 +133,7 @@ export default defineComponent({
 					scale = img.height/canvas.height
 					
 					JSchangeType(canvas,'init')
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState()
-						}
-					});
+					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.path
@@ -150,11 +150,17 @@ export default defineComponent({
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
 						updateCanvasState()
-
-						// img.selectable = false
-						// canvas.add(img)
 					},{ crossOrigin: "Anonymous" });
-					
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+						if(canvasBtn.canvasState != 'move'){
+							updateCanvasState('mouseUp')
+						}
+					});
+
+					//画布上移动
+					canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.add(brushIndicator)
 				    loadingShow.value = false
 					setOperation('pencil')
 					img.remove()
@@ -163,23 +169,58 @@ export default defineComponent({
 				
 			})
        }
+		let canvasKeyDown = (event) => {
+			if(keyDown.indexOf(event.key)>-1){
+			}else{
+				keyDown.push(event.code)
+				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+					historyState('reverse')
+				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
+					historyState('')
+				}
+			}
+		}
+		let canvasKeyUp = (event) =>{
+				keyDown = keyDown.filter(function(item) {
+					return event.code !== item;
+				})
+			}
 		let clearCanvas = ()=>{
 		    canvasBtn.canvasState = 'move'
 		    canvasBtn.spreadState = false
 		}
 		let rgba = 'rgba(0, 0, 0, 1)'
 		let brushIndicator = new fabric.Circle({
-			radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]/2),
-			fill: '#fff',
+			radius:2,
+			fill: 'rgba(0, 0, 0, 0)',
 			stroke: '#000',
 			strokeWidth: 1,
 			originX: 'center',
 			originY: 'center',
 			visible :true,
-			left: -100,
-			top: -100,
+			// left: -100,
+			// top: -100,
 			erasable: false,
 		});
+
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				console.log(12,canvas.contains(brushIndicator));
+				if(!canvas.contains(brushIndicator)){
+					canvas.add(brushIndicator)
+					brushIndicator.set({// left:0,
+						// top:0,
+						radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
+					})
+					canvas.bringToFront(brushIndicator);//设置优先级最高
+				}
+				// brushIndicator.fill = canvasPencilColor.value
+				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+			}
+			canvas.requestRenderAll()
+		}
 		let setOperation = (str)=>{
 			canvasBtn.canvasState = str
 			if(str == 'move'){
@@ -237,9 +278,12 @@ export default defineComponent({
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
 			},300)
 		}
-		let updateCanvasState = () =>{
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				normalCanvasState.value.push(canvasAsJson);
+		let updateCanvasState = (str) =>{
+			if(str != 'mouseUp'){
+				canvas.remove(brushIndicator)
+			}
+			const canvasAsJson = JSON.stringify(canvas.toJSON());
+			normalCanvasState.value.push(canvasAsJson);
 		}
 		//撤回
 		let historyState = (str)=> {
@@ -295,17 +339,20 @@ export default defineComponent({
 					exportCanvas.add(obj)
 					if(allObjects.length-1 == index){
 						let data = exportCanvas.toDataURL('jpg')
-						showPayOrder.value = false;
+						cancelDsign()
 						clearCanvas()
 						emit('setSloganData',data)
 					}
 				})
 				
 			})
-				
-			
 		}
-		
+		let cancelDsign = ()=>{
+			canvas.dispose();
+			showPayOrder.value = false
+			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('keyup', canvasKeyUp);
+		}
        return {
            presentState,
            showPayOrder,
@@ -317,6 +364,7 @@ export default defineComponent({
 			setPencilWidth,
 			historyState,
 			setSubmit,
+			cancelDsign,
        };
    },
    data() {
@@ -326,10 +374,6 @@ export default defineComponent({
    mounted() {},
    methods: {
       
-		
-		cancelDsign(){
-			this.showPayOrder = false
-		}
    },
 });
 </script>
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -461,6 +461,7 @@ export default defineComponent({
 				})
 				resolve('')
 			})
+			this.store.commit("setWorkspaceAllPosition", [...this.position[0].value,...this.position[1].value]);
 			// this.getworkspace()
 			// this.setPosition('')
 		},