|
@@ -31,17 +31,17 @@ |
|
|
/> |
|
|
/> |
|
|
</el-select></div> |
|
|
</el-select></div> |
|
|
<!-- Y轴 --> |
|
|
<!-- Y轴 --> |
|
|
<div v-show="false" class="item">{{$t('createVideo.YAxis')}}: <el-input |
|
|
|
|
|
|
|
|
<div class="item">{{$t('createVideo.YAxis')}}: <el-input |
|
|
v-model="SubtitlesTop" |
|
|
v-model="SubtitlesTop" |
|
|
width="30" |
|
|
width="30" |
|
|
/></div> |
|
|
/></div> |
|
|
<!-- X轴 --> |
|
|
<!-- X轴 --> |
|
|
<div v-show="false" class="item" style="">{{$t('createVideo.XAxis')}}: <el-input |
|
|
|
|
|
|
|
|
<div class="item" style="">{{$t('createVideo.XAxis')}}: <el-input |
|
|
v-model="SubtitlesLeft" |
|
|
v-model="SubtitlesLeft" |
|
|
width="30" |
|
|
width="30" |
|
|
/></div> |
|
|
/></div> |
|
|
<!-- 单双行 --> |
|
|
<!-- 单双行 --> |
|
|
<div class="item" >{{$t('createVideo.rows')}}: <el-switch |
|
|
|
|
|
|
|
|
<div v-show="false" class="item" >{{$t('createVideo.rows')}}: <el-switch |
|
|
v-model="SubtitlesRow" |
|
|
v-model="SubtitlesRow" |
|
|
inline-prompt |
|
|
inline-prompt |
|
|
style="--el-switch-on-color: #000; --el-switch-off-color: #13ce66;" |
|
|
style="--el-switch-on-color: #000; --el-switch-off-color: #13ce66;" |
|
@@ -458,8 +458,8 @@ |
|
|
color="#000" |
|
|
color="#000" |
|
|
type="primary" |
|
|
type="primary" |
|
|
> |
|
|
> |
|
|
<my-loading :isLoading="createLoading"></my-loading> |
|
|
|
|
|
<span v-if="!createLoading">{{ |
|
|
|
|
|
|
|
|
<my-loading2 :isLoading="saveLoading"></my-loading2> |
|
|
|
|
|
<span v-if="!saveLoading">{{ |
|
|
$t("createVideo.saveVideo") |
|
|
$t("createVideo.saveVideo") |
|
|
}}</span></el-button |
|
|
}}</span></el-button |
|
|
> |
|
|
> |
|
@@ -577,8 +577,8 @@ |
|
|
color="#000" |
|
|
color="#000" |
|
|
type="primary" |
|
|
type="primary" |
|
|
> |
|
|
> |
|
|
<my-loading :isLoading="createLoading"></my-loading> |
|
|
|
|
|
<span v-if="!createLoading">{{ |
|
|
|
|
|
|
|
|
<my-loading2 :isLoading="saveLoading"></my-loading2> |
|
|
|
|
|
<span v-if="!saveLoading">{{ |
|
|
$t("createVideo.saveVideo") |
|
|
$t("createVideo.saveVideo") |
|
|
}}</span></el-button |
|
|
}}</span></el-button |
|
|
> |
|
|
> |
|
@@ -599,7 +599,6 @@ |
|
|
<!-- ----------------------- 3 --> |
|
|
<!-- ----------------------- 3 --> |
|
|
<el-tab-pane :label="$t('createVideo.music')"> |
|
|
<el-tab-pane :label="$t('createVideo.music')"> |
|
|
<div class="card3"> |
|
|
<div class="card3"> |
|
|
|
|
|
|
|
|
<!-- 选择音乐 --> |
|
|
<!-- 选择音乐 --> |
|
|
<p> |
|
|
<p> |
|
|
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> |
|
|
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> |
|
@@ -717,8 +716,8 @@ |
|
|
color="#000" |
|
|
color="#000" |
|
|
type="primary" |
|
|
type="primary" |
|
|
> |
|
|
> |
|
|
<my-loading :isLoading="createLoading"></my-loading> |
|
|
|
|
|
<span v-if="!createLoading">{{ |
|
|
|
|
|
|
|
|
<my-loading2 :isLoading="saveLoading"></my-loading2> |
|
|
|
|
|
<span v-if="!saveLoading">{{ |
|
|
$t("createVideo.saveVideo") |
|
|
$t("createVideo.saveVideo") |
|
|
}}</span></el-button |
|
|
}}</span></el-button |
|
|
> |
|
|
> |
|
@@ -1339,7 +1338,11 @@ const playRecording = () => { |
|
|
}; |
|
|
}; |
|
|
// 上传音频 |
|
|
// 上传音频 |
|
|
async function uploadAudio(isSaveVideo) { |
|
|
async function uploadAudio(isSaveVideo) { |
|
|
createLoading.value = true; |
|
|
|
|
|
|
|
|
if(isSaveVideo == "saveVideo") { |
|
|
|
|
|
saveLoading.value = true; |
|
|
|
|
|
} else { |
|
|
|
|
|
createLoading.value = true; |
|
|
|
|
|
} |
|
|
let formData = new FormData(); |
|
|
let formData = new FormData(); |
|
|
const timestamp = Date.now(); |
|
|
const timestamp = Date.now(); |
|
|
formData.append("file", audioData.value, timestamp + ".mp3"); |
|
|
formData.append("file", audioData.value, timestamp + ".mp3"); |
|
@@ -1455,16 +1458,18 @@ async function uploadProgress(videoId, isSaveVideo) { |
|
|
speakTypeStr: soundStyle.value, //声音风格 |
|
|
speakTypeStr: soundStyle.value, //声音风格 |
|
|
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 |
|
|
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 |
|
|
voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 |
|
|
voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 |
|
|
// subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关 |
|
|
|
|
|
// subtitleParams:{ |
|
|
|
|
|
// Fontname:SubtitlesFontFamily.value, |
|
|
|
|
|
// Fontsize:SubtitlesSize.value, |
|
|
|
|
|
// Boxwidth:SubtitlesWidth.value, |
|
|
|
|
|
// // Boxheight:Number(SubtitlesSize.value+10), |
|
|
|
|
|
// Boxheight:SubtitlesBox.value.style.height, |
|
|
|
|
|
// SecondaryColour:SubtitlesColorBGRA.value, |
|
|
|
|
|
// Marginl:SubtitlesLeft.value, |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关 |
|
|
|
|
|
subtitleParams:{ |
|
|
|
|
|
Fontname:SubtitlesFontFamily.value, //字体名字 |
|
|
|
|
|
Fontsize:SubtitlesSize.value, //字体大小 |
|
|
|
|
|
Boxwidth:SubtitlesWidth.value, //字幕宽 |
|
|
|
|
|
Boxheight:Number(SubtitlesSize.value+10), //字幕高 |
|
|
|
|
|
// Boxheight:SubtitlesBox.value.style.height, |
|
|
|
|
|
Marginl:SubtitlesLeft.value, //左边距 |
|
|
|
|
|
Marginy:SubtitlesTop.value, //上边距 |
|
|
|
|
|
SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色 |
|
|
|
|
|
OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
try { |
|
|
try { |
|
|
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
@@ -1474,6 +1479,7 @@ async function uploadProgress(videoId, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
@@ -1493,10 +1499,12 @@ async function uploadProgress(videoId, isSaveVideo) { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@@ -1506,13 +1514,23 @@ async function uploadProgress(videoId, isSaveVideo) { |
|
|
// tab栏切换 |
|
|
// tab栏切换 |
|
|
const tabFrom = ref(1); |
|
|
const tabFrom = ref(1); |
|
|
const createLoading = ref(false); |
|
|
const createLoading = ref(false); |
|
|
|
|
|
const saveLoading = ref(false); |
|
|
// 上传音频后,得到videoId |
|
|
// 上传音频后,得到videoId |
|
|
// 保存数据 |
|
|
// 保存数据 |
|
|
async function saveOrUpdate(index, isSaveVideo) { |
|
|
async function saveOrUpdate(index, isSaveVideo) { |
|
|
|
|
|
if (saveLoading.value == true) { |
|
|
|
|
|
ElMessage.error(lanChange.value == "zh-cn" ? `正在保存` : `Be saving`); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
if (createLoading.value == true) { |
|
|
if (createLoading.value == true) { |
|
|
ElMessage.error(lanChange.value == "zh-cn" ? `正在生成` : `Be generating`); |
|
|
ElMessage.error(lanChange.value == "zh-cn" ? `正在生成` : `Be generating`); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
if(isSaveVideo == "saveVideo") { |
|
|
|
|
|
saveLoading.value = true |
|
|
|
|
|
} else { |
|
|
|
|
|
createLoading.value = true |
|
|
|
|
|
} |
|
|
tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 |
|
|
tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 |
|
|
const saveOrUpdateData = { |
|
|
const saveOrUpdateData = { |
|
|
id: id.value, //从草稿或者重新编辑回到创建视频时有id |
|
|
id: id.value, //从草稿或者重新编辑回到创建视频时有id |
|
@@ -1524,14 +1542,26 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 |
|
|
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 |
|
|
voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 |
|
|
voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 |
|
|
musicId: musicItemAction.value, // 选中音乐的id,voiceFrom=3 时必传 |
|
|
musicId: musicItemAction.value, // 选中音乐的id,voiceFrom=3 时必传 |
|
|
|
|
|
subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关 |
|
|
|
|
|
subtitleParams:JSON.stringify({ |
|
|
|
|
|
Fontname:SubtitlesFontFamily.value, //字体名字 |
|
|
|
|
|
Fontsize:SubtitlesSize.value, //字体大小 |
|
|
|
|
|
Boxwidth:SubtitlesWidth.value, //字幕宽 |
|
|
|
|
|
Boxheight:Number(SubtitlesSize.value+10), //字幕高 |
|
|
|
|
|
// Boxheight:SubtitlesBox.value.style.height, |
|
|
|
|
|
Marginl:SubtitlesLeft.value, //左边距 |
|
|
|
|
|
Marginy:SubtitlesTop.value, //上边距 |
|
|
|
|
|
SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色 |
|
|
|
|
|
OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 |
|
|
|
|
|
}) |
|
|
}; |
|
|
}; |
|
|
if (index == 1) { |
|
|
if (index == 1) { |
|
|
createLoading.value = true; |
|
|
|
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
ElMessage.error( |
|
|
ElMessage.error( |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (!saveOrUpdateData.paperwork) { |
|
|
if (!saveOrUpdateData.paperwork) { |
|
@@ -1539,6 +1569,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy` |
|
|
lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (!saveOrUpdateData.voiceMouldId) { |
|
|
if (!saveOrUpdateData.voiceMouldId) { |
|
@@ -1546,6 +1577,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound` |
|
|
lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
try { |
|
|
try { |
|
@@ -1562,6 +1594,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
: `Video duration estimation failed, can not generate video, you can try to change the sound` |
|
|
: `Video duration estimation failed, can not generate video, you can try to change the sound` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (res4.data.data > 60) { |
|
|
if (res4.data.data > 60) { |
|
@@ -1575,6 +1608,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
)} long, and the free user-generated video is 60 seconds long and cannot be generated` |
|
|
)} long, and the free user-generated video is 60 seconds long and cannot be generated` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
ElMessage.success( |
|
|
ElMessage.success( |
|
@@ -1593,6 +1627,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
@@ -1608,12 +1643,14 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
}, 3000); |
|
|
}, 3000); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
// ElMessage.error($t(error.message)); |
|
|
// ElMessage.error($t(error.message)); |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if (index == 2) { |
|
|
if (index == 2) { |
|
@@ -1622,6 +1659,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (!audioData.value && !afterSaveAudioId.value) { |
|
|
if (!audioData.value && !afterSaveAudioId.value) { |
|
@@ -1633,6 +1671,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
: `Please select an audio file` |
|
|
: `Please select an audio file` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
try { |
|
|
try { |
|
@@ -1645,16 +1684,17 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
: `Generation failed, please re-select the audio` |
|
|
: `Generation failed, please re-select the audio` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if (index == 3) { |
|
|
if (index == 3) { |
|
|
createLoading.value = true; |
|
|
|
|
|
try { |
|
|
try { |
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
if (!saveOrUpdateData.personPhotoId) { |
|
|
ElMessage.error( |
|
|
ElMessage.error( |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (!saveOrUpdateData.musicId) { |
|
|
if (!saveOrUpdateData.musicId) { |
|
@@ -1664,6 +1704,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
: `Please select an music file` |
|
|
: `Please select an music file` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
|
const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 |
|
@@ -1674,6 +1715,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` |
|
|
); |
|
|
); |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
@@ -1694,6 +1736,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
router.push("/myCreating"); |
|
|
router.push("/myCreating"); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
if (error) { |
|
|
if (error) { |
|
@@ -1706,6 +1749,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
createLoading.value = false; |
|
|
createLoading.value = false; |
|
|
|
|
|
saveLoading.value = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@@ -1744,6 +1788,21 @@ async function findById(findId) { |
|
|
sound.value = res.data.voiceMouldId; //声音id |
|
|
sound.value = res.data.voiceMouldId; //声音id |
|
|
chooseStyle(); |
|
|
chooseStyle(); |
|
|
soundStyle.value = res.data.speakTypeStr; //选择风格 |
|
|
soundStyle.value = res.data.speakTypeStr; //选择风格 |
|
|
|
|
|
// 以下为字幕信息 |
|
|
|
|
|
SubtitlesSwitch.value=res.data.subtitleEnabled==1?true:false |
|
|
|
|
|
const subtitleParamsToObj=JSON.parse(res.data.subtitleParams) |
|
|
|
|
|
console.log(subtitleParamsToObj); |
|
|
|
|
|
SubtitlesFontFamily.value=subtitleParamsToObj.Fontname |
|
|
|
|
|
SubtitlesSize.value=subtitleParamsToObj.Fontsize |
|
|
|
|
|
SubtitlesWidth.value=subtitleParamsToObj.Boxwidth |
|
|
|
|
|
SubtitlesSize.value=Number(subtitleParamsToObj.Boxheight-10) |
|
|
|
|
|
// Boxheight:SubtitlesBox.value.style.height, |
|
|
|
|
|
SubtitlesLeft.value=subtitleParamsToObj.Marginl |
|
|
|
|
|
SubtitlesTop.value=subtitleParamsToObj.Marginy |
|
|
|
|
|
SubtitlesColor.value=BgraToRgba(subtitleParamsToObj.SecondaryColour |
|
|
|
|
|
) |
|
|
|
|
|
SubtitlesBgc.value=BgraToRgba(subtitleParamsToObj.OutlineColour |
|
|
|
|
|
) |
|
|
} |
|
|
} |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
@@ -2028,28 +2087,28 @@ const canvasImgBox = ref(null); // 图片外盒子dom |
|
|
const SubtitlesAngle = ref(20); //旋转度数 |
|
|
const SubtitlesAngle = ref(20); //旋转度数 |
|
|
const lastMouseAngle = ref(0); |
|
|
const lastMouseAngle = ref(0); |
|
|
const initialRotation = 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)'); // 字幕背景色 |
|
|
|
|
|
const SubtitlesBgcBGRA = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色 |
|
|
|
|
|
|
|
|
const SubtitlesColor = ref('#ff0000'); // 字幕字色 |
|
|
|
|
|
// const SubtitlesColorBGRA = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 |
|
|
|
|
|
const SubtitlesBgc = ref('#ffffff'); // 字幕背景色 |
|
|
|
|
|
// const SubtitlesBgcBGRA = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色 |
|
|
// 调色板 |
|
|
// 调色板 |
|
|
const colorList = [ |
|
|
|
|
|
'rgba(255, 0, 0, 1)', // 红色 |
|
|
|
|
|
'rgba(0, 255, 0, 1)', // 绿色 |
|
|
|
|
|
'rgba(0, 0, 255, 1)', // 蓝色 |
|
|
|
|
|
'rgba(255, 255, 0, 1)', // 黄色 |
|
|
|
|
|
'rgba(0, 0, 0, 1)', // 黑色 |
|
|
|
|
|
'rgba(0, 255, 255, 1)', // 青色 |
|
|
|
|
|
'rgba(128, 0, 0, 1)', // 深红色 |
|
|
|
|
|
'rgba(0, 128, 0, 1)', // 深绿色 |
|
|
|
|
|
'rgba(0, 0, 128, 1)', // 深蓝色 |
|
|
|
|
|
'rgba(255, 255, 255, 1)', // 白色 |
|
|
|
|
|
'rgba(128, 0, 128, 1)', // 深品红色 |
|
|
|
|
|
'rgba(0, 128, 128, 1)', // 深青色 |
|
|
|
|
|
'rgba(255, 128, 0, 1)', // 橙色 |
|
|
|
|
|
'rgba(255, 0, 128, 1)', // 粉红色 |
|
|
|
|
|
'rgba(0, 255, 128, 1)', // 中绿色 |
|
|
|
|
|
'rgba(128, 255, 0, 1)' // 中黄色 |
|
|
|
|
|
|
|
|
const colorList = [ |
|
|
|
|
|
'#ff0000', // 红色 |
|
|
|
|
|
'#00ff00', // 绿色 |
|
|
|
|
|
'#0000ff', // 蓝色 |
|
|
|
|
|
'#ffff00', // 黄色 |
|
|
|
|
|
'#000000', // 黑色 |
|
|
|
|
|
'#00ffff', // 青色 |
|
|
|
|
|
'#800000', // 深红色 |
|
|
|
|
|
'#008000', // 深绿色 |
|
|
|
|
|
'#000080', // 深蓝色 |
|
|
|
|
|
'#ffffff', // 白色 |
|
|
|
|
|
'#800080', // 深品红色 |
|
|
|
|
|
'#008080', // 深青色 |
|
|
|
|
|
'#ff8000', // 橙色 |
|
|
|
|
|
'#ff0080', // 粉红色 |
|
|
|
|
|
'#00ff80', // 中绿色 |
|
|
|
|
|
'#80ff00' // 中黄色 |
|
|
]; |
|
|
]; |
|
|
const fontFamilyList = [ |
|
|
const fontFamilyList = [ |
|
|
{label:"黑体",value:"SimHei"}, |
|
|
{label:"黑体",value:"SimHei"}, |
|
@@ -2081,40 +2140,43 @@ const handleClickOutside = () => { |
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
document.addEventListener('click',handleClickOutside); |
|
|
document.addEventListener('click',handleClickOutside); |
|
|
}); |
|
|
}); |
|
|
function rgbaToBgra(rgba) { |
|
|
|
|
|
const regex = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/; |
|
|
|
|
|
const match = regex.exec(rgba); |
|
|
|
|
|
if (match) { |
|
|
|
|
|
const red = parseInt(match[1]); |
|
|
|
|
|
const green = parseInt(match[2]); |
|
|
|
|
|
const blue = parseInt(match[3]); |
|
|
|
|
|
const alpha = parseFloat(match[4]); |
|
|
|
|
|
const b = blue; |
|
|
|
|
|
const g = green; |
|
|
|
|
|
const r = red; |
|
|
|
|
|
const a = Math.round(alpha * 255); |
|
|
|
|
|
const bgra = `bgra(${b}, ${g}, ${r}, ${a})`; |
|
|
|
|
|
return bgra; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Return the original value if no match is found |
|
|
|
|
|
return rgba; |
|
|
|
|
|
|
|
|
function rgbaToBgra(hexColor) { |
|
|
|
|
|
// 去除颜色前缀 |
|
|
|
|
|
hexColor = hexColor.replace("#", ""); |
|
|
|
|
|
// 分割颜色分量 |
|
|
|
|
|
const red = hexColor.substring(0, 2); |
|
|
|
|
|
const green = hexColor.substring(2, 4); |
|
|
|
|
|
const blue = hexColor.substring(4, 6); |
|
|
|
|
|
// 组合为新的颜色字符串 |
|
|
|
|
|
const convertedColor = `&H${red}${green}${blue}`; |
|
|
|
|
|
return convertedColor; |
|
|
} |
|
|
} |
|
|
watch( |
|
|
|
|
|
() => SubtitlesColor, |
|
|
|
|
|
(newValue, oldValue) => { |
|
|
|
|
|
SubtitlesColorBGRA.value = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
|
|
|
watch( |
|
|
|
|
|
() => SubtitlesBgc, |
|
|
|
|
|
(newValue, oldValue) => { |
|
|
|
|
|
SubtitlesBgcBGRA.value = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色 |
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
function BgraToRgba(hexColor) { |
|
|
|
|
|
// 去除颜色前缀 |
|
|
|
|
|
hexColor = hexColor.replace("&H", ""); |
|
|
|
|
|
// 分割颜色分量 |
|
|
|
|
|
const red = hexColor.substring(0, 2); |
|
|
|
|
|
const green = hexColor.substring(2, 4); |
|
|
|
|
|
const blue = hexColor.substring(4, 6); |
|
|
|
|
|
// 组合为新的颜色字符串 |
|
|
|
|
|
const convertedColor = `#${red}${green}${blue}`; |
|
|
|
|
|
return convertedColor; |
|
|
|
|
|
} |
|
|
|
|
|
// watch( |
|
|
|
|
|
// () => SubtitlesColor, |
|
|
|
|
|
// (newValue, oldValue) => { |
|
|
|
|
|
// SubtitlesColorBGRA.value = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 |
|
|
|
|
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
// { deep: true } |
|
|
|
|
|
// ); |
|
|
|
|
|
// watch( |
|
|
|
|
|
// () => SubtitlesBgc, |
|
|
|
|
|
// (newValue, oldValue) => { |
|
|
|
|
|
// SubtitlesBgcBGRA.value = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色 |
|
|
|
|
|
// }, |
|
|
|
|
|
// { deep: true } |
|
|
|
|
|
// ); |
|
|
// 计算属性来计算盒子位置 |
|
|
// 计算属性来计算盒子位置 |
|
|
const SubtitlesStyle = computed(() => { |
|
|
const SubtitlesStyle = computed(() => { |
|
|
return { |
|
|
return { |
|
@@ -2125,7 +2187,6 @@ watch( |
|
|
fontFamily: SubtitlesFontFamily.value, |
|
|
fontFamily: SubtitlesFontFamily.value, |
|
|
color: SubtitlesColor.value, |
|
|
color: SubtitlesColor.value, |
|
|
backgroundColor: SubtitlesBgc.value, |
|
|
backgroundColor: SubtitlesBgc.value, |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
@@ -2421,7 +2482,7 @@ onUnmounted(() => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.el-input { |
|
|
.el-input { |
|
|
width: 60px; |
|
|
|
|
|
|
|
|
width: 50px; |
|
|
height: 25px; |
|
|
height: 25px; |
|
|
} |
|
|
} |
|
|
.el-input__wrapper { |
|
|
.el-input__wrapper { |
|
|