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