diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e5c7bdb..9ea2d5d 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,7 +2,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] - const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly asyncComputed: UnwrapRef diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index af0bfe2..70af472 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -91,7 +91,7 @@
-
+
{{$t('createVideo.SubtitlesTip')}}
@@ -103,6 +103,7 @@
+
@@ -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;