|
|
@@ -21,13 +21,22 @@ |
|
|
|
<!-- 编辑字幕框 --> |
|
|
|
</div> |
|
|
|
<div v-if="imgUrl&&SubtitlesSwitch" class="editSubtitlesBox "> |
|
|
|
<!-- 字体 --> |
|
|
|
<div class="item">{{$t('createVideo.fontFamily')}}: <el-select v-model="SubtitlesFontFamily" style="width: 80px;" placeholder=" " size="small"> |
|
|
|
<el-option |
|
|
|
v-for="item in fontFamilyList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select></div> |
|
|
|
<!-- Y轴 --> |
|
|
|
<div class="item">{{$t('createVideo.YAxis')}}: <el-input |
|
|
|
v-model="SubtitlesTop" |
|
|
|
width="30" |
|
|
|
/></div> |
|
|
|
<!-- X轴 --> |
|
|
|
<div class="item">{{$t('createVideo.XAxis')}}: <el-input |
|
|
|
<div class="item" style="font-family: ;">{{$t('createVideo.XAxis')}}: <el-input |
|
|
|
v-model="SubtitlesLeft" |
|
|
|
width="30" |
|
|
|
/></div> |
|
|
@@ -37,7 +46,7 @@ |
|
|
|
width="30" |
|
|
|
/></div> |
|
|
|
<!-- 字幕盒子宽度 --> |
|
|
|
<div class="item">{{$t('createVideo.width')}}: <el-input |
|
|
|
<div v-if="false" class="item">{{$t('createVideo.width')}}: <el-input |
|
|
|
v-model="SubtitlesWidth" |
|
|
|
width="30" |
|
|
|
/></div> |
|
|
@@ -1989,7 +1998,7 @@ const canvasImgBox = ref(null); // 图片外盒子dom |
|
|
|
const SubtitlesBox = ref(null); // 字幕盒子dom |
|
|
|
const SubtitlesSwitch = ref(false); // 字幕开关 |
|
|
|
const SubtitlesWidth = ref(250); // 字幕宽度 |
|
|
|
const SubtitlesFontStyle = ref("微软雅黑"); //字幕字体系列 |
|
|
|
const SubtitlesFontFamily = ref(""); //字幕字体系列 |
|
|
|
const SubtitlesTop = ref(400); // 字幕Y轴 |
|
|
|
const SubtitlesLeft = ref(100); // 字幕X轴 |
|
|
|
const SubtitlesSize = ref(18); // 字幕字号 |
|
|
@@ -2016,6 +2025,13 @@ const canvasImgBox = ref(null); // 图片外盒子dom |
|
|
|
'rgba(0, 255, 128, 1)', // 中绿色 |
|
|
|
'rgba(128, 255, 0, 1)' // 中黄色 |
|
|
|
]; |
|
|
|
const fontFamilyList = [ |
|
|
|
{label:"黑体",value:"SimHei"}, |
|
|
|
{label:"新细明体",value:"PMingLiU"}, {label:"楷体",value:"KaiTi"}, { label: 'Montserrat', value: 'Montserrat' }, |
|
|
|
{ label: 'Open Sans', value: 'Open Sans' }, |
|
|
|
{ label: 'Roboto', value: 'Roboto' }, |
|
|
|
{ label: 'Lato', value: 'Lato' } |
|
|
|
]; |
|
|
|
const SubtitlesColorShow = ref(false); // 字色调色板开关 |
|
|
|
const SubtitlesBgcShow = ref(false); // 背景调色板开关 |
|
|
|
const handleSubtitlesColorShow = (e) => { |
|
|
@@ -2080,7 +2096,7 @@ watch( |
|
|
|
top: SubtitlesTop.value + 'px', |
|
|
|
left: SubtitlesLeft.value + 'px', |
|
|
|
fontSize: SubtitlesSize.value + 'px', |
|
|
|
fontStyle: SubtitlesFontStyle.value, |
|
|
|
fontFamily: SubtitlesFontFamily.value, |
|
|
|
color: SubtitlesColor.value, |
|
|
|
backgroundColor: SubtitlesBgc.value, |
|
|
|
}; |
|
|
@@ -2303,9 +2319,9 @@ onUnmounted(() => { |
|
|
|
align-items: center; |
|
|
|
margin-left: 10px; |
|
|
|
img { |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
// 调色盘 |
|
|
|
.myColorBox { |
|
|
|
position: relative; |
|
|
|
width: 25px; |
|
|
@@ -2340,6 +2356,8 @@ onUnmounted(() => { |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: 5px 5px; |
|
|
|
border: #000 solid 2px; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
@@ -2348,6 +2366,9 @@ onUnmounted(() => { |
|
|
|
width: 60px; |
|
|
|
height: 25px; |
|
|
|
} |
|
|
|
.el-input__wrapper { |
|
|
|
height: 25px; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.el-input__wrapper) { |
|
|
|
border: none; |
|
|
|