congzc 1 год назад
Родитель
Сommit
68fd505f08
2 измененных файлов: 51 добавлений и 8 удалений
  1. +0
    -2
      src/types/auto-imports.d.ts
  2. +51
    -6
      src/views/createVideo/index.vue

+ 0
- 2
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<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>


+ 51
- 6
src/views/createVideo/index.vue Просмотреть файл

@@ -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;


Загрузка…
Отмена
Сохранить