|
|
@@ -114,6 +114,7 @@ |
|
|
|
<div class="ItemName">{{ $t("createVideo.abscissa") }}</div> |
|
|
|
<div class="ItemValue"> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="showImgInfo.data.x" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
@@ -122,6 +123,7 @@ |
|
|
|
<div class="ItemName">{{ $t("createVideo.ordinate") }}</div> |
|
|
|
<div class="ItemValue"> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="showImgInfo.data.y" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
@@ -140,6 +142,7 @@ |
|
|
|
<div class="ItemName">{{ $t("createVideo.ratio") }}</div> |
|
|
|
<div class="ItemValue"> |
|
|
|
<el-input-number |
|
|
|
:precision="2" |
|
|
|
v-model="showImgInfo.data.w" |
|
|
|
:min="0.4" |
|
|
|
:max="1.3" |
|
|
@@ -468,7 +471,7 @@ |
|
|
|
<!-- 开关 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p>{{ $t("createVideo.subtitles") }}</p> |
|
|
|
<p>{{ $t("createVideo.subtitlesSwitch") }}</p> |
|
|
|
<el-switch |
|
|
|
v-model="Subtitles.SubtitlesSwitch" |
|
|
|
style="--el-switch-on-color: #000" |
|
|
@@ -483,12 +486,12 @@ |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesFontFamily" |
|
|
|
style="width: 80px" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in fontFamilyList" |
|
|
|
v-for="item in Subtitles.fontFamilyList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
@@ -500,9 +503,14 @@ |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `Y轴` : `Y-axis` }} |
|
|
|
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} |
|
|
|
</p> |
|
|
|
<el-input v-model="Subtitles.SubtitlesTop" width="30" /> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="Subtitles.SubtitlesTop" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字号大小 --> |
|
|
@@ -511,9 +519,73 @@ |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-input v-model="Subtitles.SubtitlesTop" width="30" /> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesSize" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontSizeList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
:style="{ |
|
|
|
height: item + 'px', |
|
|
|
lineHeight: item + 'px', |
|
|
|
}" |
|
|
|
> |
|
|
|
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ |
|
|
|
item |
|
|
|
}}</span> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字色 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} |
|
|
|
</p> |
|
|
|
<div |
|
|
|
@click="handleSubtitlesColorShow" |
|
|
|
class="myColorBox" |
|
|
|
:style="{ backgroundColor: Subtitles.SubtitlesColor }" |
|
|
|
> |
|
|
|
<div v-show="SubtitlesColorShow" class="selectColor"> |
|
|
|
<div |
|
|
|
v-for="item in Subtitles.colorList" |
|
|
|
:style="{ backgroundColor: item }" |
|
|
|
class="selectColor-item" |
|
|
|
@click="Subtitles.SubtitlesColor = item" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字粗 --> |
|
|
|
<!-- <div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesWeight" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontWeightList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 试听的mp3 --> |
|
|
@@ -699,9 +771,10 @@ async function chooseType() { |
|
|
|
const soundStyleOptions = ref(null); |
|
|
|
async function chooseStyle() { |
|
|
|
const item = soundOptions.value.find((element) => element.id == sound.value); |
|
|
|
|
|
|
|
soundStyle.value = null; |
|
|
|
soundStyleOptions.value = item.style; |
|
|
|
if (item) { |
|
|
|
soundStyleOptions.value = item.style; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 试听 |
|
|
@@ -994,11 +1067,13 @@ function delImg(id) { |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 字幕 |
|
|
|
const SubtitlesColorShow = ref(false); // 字色调色板开关 |
|
|
|
const Subtitles = reactive({ |
|
|
|
SubtitlesSwitch: false, //开关 |
|
|
|
SubtitlesFontFamily: "仿宋", //字体系列 |
|
|
|
SubtitlesTop: 400, //Y轴 |
|
|
|
SubtitlesSize: 70, //字号大小 |
|
|
|
SubtitlesSize: 30, //字号大小 |
|
|
|
SubtitlesWeight: 500, //字粗 |
|
|
|
SubtitlesColor: "#FFFFFF", //字色 |
|
|
|
SubtitlesWidth: 500, //宽度 |
|
|
|
colorList: [ |
|
|
@@ -1031,8 +1106,44 @@ const Subtitles = reactive({ |
|
|
|
{ label: "Times New Roman", value: "Times New Roman" }, |
|
|
|
{ label: "Verdana", value: "Verdana" }, |
|
|
|
], |
|
|
|
fontSizeList: [12, 16, 20, 30, 44, 60, 80, 100], |
|
|
|
fontWeightList: [100, 500, 900], |
|
|
|
}); |
|
|
|
|
|
|
|
const handleSubtitlesColorShow = (e) => { |
|
|
|
e.stopPropagation(); // 阻止事件冒泡 |
|
|
|
SubtitlesColorShow.value = true; |
|
|
|
// SubtitlesBgcShow.value = false; |
|
|
|
}; |
|
|
|
const handleClickOutside = () => { |
|
|
|
if (SubtitlesColorShow.value == true) { |
|
|
|
} |
|
|
|
SubtitlesColorShow.value = false; |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
document.addEventListener("click", handleClickOutside); |
|
|
|
}); |
|
|
|
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${blue}${green}${red}`; |
|
|
|
return convertedColor; |
|
|
|
} |
|
|
|
function BgraToRgba(hexColor) { |
|
|
|
// 去除颜色前缀 |
|
|
|
hexColor = hexColor.replace("&H", ""); |
|
|
|
// 分割颜色分量 |
|
|
|
const blue = hexColor.substring(0, 2); |
|
|
|
const green = hexColor.substring(2, 4); |
|
|
|
const red = hexColor.substring(4, 6); |
|
|
|
// 组合为新的颜色字符串 |
|
|
|
const convertedColor = `#${red}${green}${blue}`; |
|
|
|
return convertedColor; |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 编辑区域 |
|
|
@@ -1048,16 +1159,14 @@ watch( |
|
|
|
// 根据横竖屏来确定比例 1竖2横 |
|
|
|
await nextTick(); |
|
|
|
elementWidth.value = document.getElementById("editPosition").clientWidth; |
|
|
|
console.log(elementWidth.value); |
|
|
|
|
|
|
|
if (videoType.value == 1) { |
|
|
|
proportion.value = 1080 / elementWidth.value; |
|
|
|
// proportion.value = 1080 / 432; |
|
|
|
proportion.value = Number(1080 / elementWidth.value).toFixed(2); |
|
|
|
} else if (videoType.value == 2) { |
|
|
|
// proportion.value = 1920 / 768; |
|
|
|
proportion.value = 1920 / elementWidth.value; |
|
|
|
proportion.value = Number(1920 / elementWidth.value).toFixed(2); |
|
|
|
} |
|
|
|
console.log("设置比例"); |
|
|
|
Subtitles.SubtitlesWidth = elementWidth.value * 0.7 * proportion.value; |
|
|
|
// console.log(EditPositionDom.value); |
|
|
|
console.log(proportion.value, "比例"); |
|
|
|
}, |
|
|
|
{ deep: true } |
|
|
@@ -1173,6 +1282,14 @@ async function saveOrUpdate(isCreate) { |
|
|
|
backgroundId: materialList.BGI.id + "", //背景id |
|
|
|
personJson: JSON.stringify(shuziren), // 数字人 |
|
|
|
materialAllJson: JSON.stringify([...scList]), // 素材 |
|
|
|
subtitleEnabled: Subtitles.SubtitlesSwitch ? 1 : 0, //字幕开关 |
|
|
|
subtitleParams: JSON.stringify({ |
|
|
|
Fontname: Subtitles.SubtitlesFontFamily, //字体名字 |
|
|
|
Fontsize: Subtitles.SubtitlesSize * proportion.value, //字体大小 |
|
|
|
Marginv: Subtitles.SubtitlesTop, //上边距 |
|
|
|
PrimaryColour: rgbaToBgra(Subtitles.SubtitlesColor), //字色 |
|
|
|
Alignment: 6, |
|
|
|
}), |
|
|
|
}; |
|
|
|
const res = await saveOrUpdateApi(data); |
|
|
|
workId.value = res.data.id; |
|
|
@@ -1246,6 +1363,13 @@ async function saveOrUpdate(isCreate) { |
|
|
|
backgroundId: materialList.BGI.id + "", //背景id |
|
|
|
personJson: JSON.stringify(shuziren), // 数字人 |
|
|
|
materialAllJson: JSON.stringify([...scList]), // 素材 |
|
|
|
subtitleParams: JSON.stringify({ |
|
|
|
Fontname: Subtitles.SubtitlesFontFamily, //字体名字 |
|
|
|
Fontsize: Subtitles.SubtitlesSize * proportion.value, //字体大小 |
|
|
|
Marginv: Subtitles.SubtitlesTop, //上边距 |
|
|
|
PrimaryColour: rgbaToBgra(Subtitles.SubtitlesColor), //字色 |
|
|
|
Alignment: 6, |
|
|
|
}), |
|
|
|
}; |
|
|
|
|
|
|
|
const res = await saveOrUpdateApi(data); |
|
|
@@ -1348,14 +1472,15 @@ function formatTime(seconds) { |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 草稿回显 |
|
|
|
const subtitleParamsToObj = ref(null); |
|
|
|
async function getModelDetailById() { |
|
|
|
const res = await getModelDetailByIdApi(route.query.id); |
|
|
|
videoType.value = res.data.videoType; |
|
|
|
language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null; |
|
|
|
if (language.value) { |
|
|
|
await chooseType(language.value); |
|
|
|
} |
|
|
|
workId.value = res.data.id; |
|
|
|
videoType.value = res.data.videoType; |
|
|
|
title.value = res.data.title; //标题 |
|
|
|
textareaContent.value = res.data.paperwork; //语音内容 |
|
|
|
materialList.BGI.id = res.data.backgroundId + ""; //背景id |
|
|
@@ -1371,6 +1496,24 @@ async function getModelDetailById() { |
|
|
|
? JSON.parse(res.data.materialAllJson) |
|
|
|
: []; |
|
|
|
showChooseModel.value = false; |
|
|
|
// 字幕回显 需要延时,不然proportion缩放比例不准确 |
|
|
|
setTimeout(() => { |
|
|
|
Subtitles.SubtitlesSwitch = res.data.subtitleEnabled == 1 ? true : false; |
|
|
|
subtitleParamsToObj.value = JSON.parse(res.data.subtitleParams); |
|
|
|
Subtitles.SubtitlesFontFamily = subtitleParamsToObj.value.Fontname; |
|
|
|
Subtitles.SubtitlesSize = |
|
|
|
subtitleParamsToObj.value.Fontsize / proportion.value; |
|
|
|
Subtitles.SubtitlesTop = subtitleParamsToObj.value.Marginv; |
|
|
|
Subtitles.SubtitlesColor = BgraToRgba( |
|
|
|
subtitleParamsToObj.value.PrimaryColour |
|
|
|
); |
|
|
|
}, 100); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 公共方法 |
|
|
|
function NumToFixed(num1, num2) { |
|
|
|
return Number(num1).toFixed(num2); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
@@ -1781,17 +1924,67 @@ onMounted(async () => { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 30%; |
|
|
|
background-color: #f1e5e5; |
|
|
|
background-color: rgba(71, 105, 218, 0.1); |
|
|
|
text-align: center; |
|
|
|
padding: 10px; |
|
|
|
height: 80px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: auto; |
|
|
|
margin-bottom: 10px; |
|
|
|
display: none; |
|
|
|
p { |
|
|
|
padding-bottom: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.SubtitlesSwitch { |
|
|
|
width: 100%; |
|
|
|
.el-input-number--large { |
|
|
|
width: 100px; |
|
|
|
} |
|
|
|
.el-input-number__increase { |
|
|
|
width: none; |
|
|
|
} |
|
|
|
} |
|
|
|
.myColorBox { |
|
|
|
position: relative; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: auto; |
|
|
|
border: #000 solid 2px; |
|
|
|
cursor: pointer; |
|
|
|
.selectColor { |
|
|
|
position: absolute; |
|
|
|
top: 150%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 142px; |
|
|
|
background-color: #ffffff; |
|
|
|
z-index: 99; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: -10%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-left: 15px solid transparent; |
|
|
|
border-right: 15px solid transparent; |
|
|
|
border-bottom: 15px solid white; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: 5px 5px; |
|
|
|
border: #000 solid 2px; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|