|  |  | @@ -91,7 +91,7 @@ | 
		
	
		
			
			|  |  |  | <!-- 中间展示大图 --> | 
		
	
		
			
			|  |  |  | <div ref="canvasImgBox" class="bigImg inmiddle"> | 
		
	
		
			
			|  |  |  | <img  id="canvasImg" :src="imgUrl" alt="" class="" /> | 
		
	
		
			
			|  |  |  | <div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag" :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox"> | 
		
	
		
			
			|  |  |  | <div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag"  :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox"> | 
		
	
		
			
			|  |  |  | <div class="SubtitlesTip">{{$t('createVideo.SubtitlesTip')}}</div> | 
		
	
		
			
			|  |  |  | <div class="stretchBox box1"></div> | 
		
	
		
			
			|  |  |  | <div class="stretchBox box2"></div> | 
		
	
	
		
			
				|  |  | @@ -103,6 +103,7 @@ | 
		
	
		
			
			|  |  |  | <div class="stretchBox box6"></div> | 
		
	
		
			
			|  |  |  | <div class="stretchBox box7"></div> | 
		
	
		
			
			|  |  |  | <div class="stretchBox box8"></div> | 
		
	
		
			
			|  |  |  | <div class="stretchBox box9" @mousedown="startRotation" @mousemove="rotateBox" @mouseup="stopRotation"></div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | </div> | 
		
	
	
		
			
				|  |  | @@ -2002,6 +2003,11 @@ const canvasImgBox = ref(null);  // 图片外盒子dom | 
		
	
		
			
			|  |  |  | const SubtitlesTop = ref(400); // 字幕Y轴 | 
		
	
		
			
			|  |  |  | const SubtitlesLeft = ref(100); // 字幕X轴 | 
		
	
		
			
			|  |  |  | const SubtitlesSize = ref(18); // 字幕字号 | 
		
	
		
			
			|  |  |  | const isRotating = ref(false);  //控制是否旋转 | 
		
	
		
			
			|  |  |  | const rotationStartAngle = ref(0); //旋转中间件 | 
		
	
		
			
			|  |  |  | const SubtitlesAngle = ref(20); //旋转度数 | 
		
	
		
			
			|  |  |  | const lastMouseAngle = ref(0); | 
		
	
		
			
			|  |  |  | const initialRotation = ref(0); | 
		
	
		
			
			|  |  |  | const SubtitlesColor = ref('rgba(255, 255, 255, 1)'); // 字幕字色 | 
		
	
		
			
			|  |  |  | const SubtitlesColorBGRA = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 | 
		
	
		
			
			|  |  |  | const SubtitlesBgc = ref('rgba(0, 0, 0, 1)'); // 字幕背景色 | 
		
	
	
		
			
				|  |  | @@ -2099,6 +2105,7 @@ watch( | 
		
	
		
			
			|  |  |  | fontFamily: SubtitlesFontFamily.value, | 
		
	
		
			
			|  |  |  | color: SubtitlesColor.value, | 
		
	
		
			
			|  |  |  | backgroundColor: SubtitlesBgc.value, | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -2176,12 +2183,42 @@ watch( | 
		
	
		
			
			|  |  |  | startX.value = event.clientX; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //旋转盒子 | 
		
	
		
			
			|  |  |  | const startRotation = (event) => { | 
		
	
		
			
			|  |  |  | isRotating.value = true; | 
		
	
		
			
			|  |  |  | isResizing.value = true; | 
		
	
		
			
			|  |  |  | // document.removeEventListener('mousedown', handleDrag); | 
		
	
		
			
			|  |  |  | document.addEventListener('mousemove', rotateBox); | 
		
	
		
			
			|  |  |  | document.addEventListener('mouseup', stopRotation); | 
		
	
		
			
			|  |  |  | const box9CenterX = event.clientX; | 
		
	
		
			
			|  |  |  | const box9CenterY = event.clientY; | 
		
	
		
			
			|  |  |  | const SubtitlesBoxCenterX = SubtitlesBox.value.offsetLeft + SubtitlesBox.value.offsetWidth / 2; | 
		
	
		
			
			|  |  |  | const SubtitlesBoxCenterY = SubtitlesBox.value.offsetTop + SubtitlesBox.value.offsetHeight / 2; | 
		
	
		
			
			|  |  |  | rotationStartAngle.value = Math.atan2(box9CenterY - SubtitlesBoxCenterY, box9CenterX - SubtitlesBoxCenterX); | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  |  | 
		
	
		
			
			|  |  |  | const rotateBox = (event) => { | 
		
	
		
			
			|  |  |  | if (isRotating.value) { | 
		
	
		
			
			|  |  |  | const SubtitlesBoxCenterX = SubtitlesBox.value.offsetLeft + SubtitlesBox.value.offsetWidth / 2; | 
		
	
		
			
			|  |  |  | const SubtitlesBoxCenterY = SubtitlesBox.value.offsetTop + SubtitlesBox.value.offsetHeight / 2; | 
		
	
		
			
			|  |  |  | const mouseAngle = Math.atan2(event.clientY - SubtitlesBoxCenterY, event.clientX - SubtitlesBoxCenterX); | 
		
	
		
			
			|  |  |  | SubtitlesAngle.value = (mouseAngle - rotationStartAngle.value)*5; | 
		
	
		
			
			|  |  |  | SubtitlesBox.value.style.transform = `rotate(${SubtitlesAngle.value}rad)`; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | const stopRotation = () => { | 
		
	
		
			
			|  |  |  | isRotating.value = false; | 
		
	
		
			
			|  |  |  | isResizing.value = false; | 
		
	
		
			
			|  |  |  | document.removeEventListener('mousemove', rotateBox); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mouseup', stopRotation); | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | onBeforeUnmount(() => { | 
		
	
		
			
			|  |  |  | document.removeEventListener('mousemove', resizeBox); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mouseup', stopResize); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mousemove', resizeBox2); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mouseup', stopResize2); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mousemove', rotateBox); | 
		
	
		
			
			|  |  |  | document.removeEventListener('mouseup', stopRotation); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | // 监听字幕显示 | 
		
	
		
			
			|  |  |  | watch( | 
		
	
	
		
			
				|  |  | @@ -2404,13 +2441,14 @@ onUnmounted(() => { | 
		
	
		
			
			|  |  |  | // width: 200px; | 
		
	
		
			
			|  |  |  | padding: 5px 5px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | border: 2px solid rgba(0, 0, 0, 0); | 
		
	
		
			
			|  |  |  | // border: 2px solid rgba(0, 0, 0, 0); | 
		
	
		
			
			|  |  |  | border: 2px solid #00ff00; | 
		
	
		
			
			|  |  |  | background-color: #fff; | 
		
	
		
			
			|  |  |  | cursor: move; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | border: 2px solid #00ff00; | 
		
	
		
			
			|  |  |  | // border: 2px solid #00ff00; | 
		
	
		
			
			|  |  |  | .stretchBox { | 
		
	
		
			
			|  |  |  | opacity: 1; | 
		
	
		
			
			|  |  |  | // opacity: 1; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .SubtitlesTip { | 
		
	
	
		
			
				|  |  | @@ -2420,11 +2458,12 @@ onUnmounted(() => { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .stretchBox { | 
		
	
		
			
			|  |  |  | opacity: 0; | 
		
	
		
			
			|  |  |  | opacity: 1; | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | width: 10px; | 
		
	
		
			
			|  |  |  | height: 10px; | 
		
	
		
			
			|  |  |  | background-color: #fff; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .box1 { | 
		
	
		
			
			|  |  |  | top: -5px; | 
		
	
	
		
			
				|  |  | @@ -2479,6 +2518,12 @@ onUnmounted(() => { | 
		
	
		
			
			|  |  |  | transform: translate(-5px,-5px); | 
		
	
		
			
			|  |  |  | cursor: nwse-resize; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .box9 { | 
		
	
		
			
			|  |  |  | top: 150%; | 
		
	
		
			
			|  |  |  | left: 50%; | 
		
	
		
			
			|  |  |  | transform: translate(-5px,50%); | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | img { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
	
		
			
				|  |  | 
 |