瀏覽代碼

fontfamily

dev
congzc 1 年之前
父節點
當前提交
3e32b0f90d
共有 3 個文件被更改,包括 28 次插入5 次删除
  1. +1
    -0
      src/lang/package/en.ts
  2. +1
    -0
      src/lang/package/zh-cn.ts
  3. +26
    -5
      src/views/createVideo/index.vue

+ 1
- 0
src/lang/package/en.ts 查看文件

@@ -86,6 +86,7 @@ export default {
uploadImgTip2:'please upload a clear frontal photo', uploadImgTip2:'please upload a clear frontal photo',
entered:'entered', entered:'entered',
subtitles:"subtitles", subtitles:"subtitles",
fontFamily:'Font Faily',
XAxis:"X-axis", XAxis:"X-axis",
YAxis:"Y-axis", YAxis:"Y-axis",
fontSize:"Font Size", fontSize:"Font Size",


+ 1
- 0
src/lang/package/zh-cn.ts 查看文件

@@ -84,6 +84,7 @@ export default {
uploadImgTip2:'请确保上传图片为无遮挡的正脸图片', uploadImgTip2:'请确保上传图片为无遮挡的正脸图片',
entered:'已输入', entered:'已输入',
subtitles:"字幕", subtitles:"字幕",
fontFamily:'字体',
XAxis:"X轴", XAxis:"X轴",
YAxis:"Y轴", YAxis:"Y轴",
fontSize:"字体大小", fontSize:"字体大小",


+ 26
- 5
src/views/createVideo/index.vue 查看文件

@@ -21,13 +21,22 @@
<!-- 编辑字幕框 --> <!-- 编辑字幕框 -->
</div> </div>
<div v-if="imgUrl&&SubtitlesSwitch" class="editSubtitlesBox "> <div v-if="imgUrl&&SubtitlesSwitch" class="editSubtitlesBox ">
<!-- 字体 -->
<div class="item">{{$t('createVideo.fontFamily')}}:&nbsp;<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轴 --> <!-- Y轴 -->
<div class="item">{{$t('createVideo.YAxis')}}:&nbsp;<el-input <div class="item">{{$t('createVideo.YAxis')}}:&nbsp;<el-input
v-model="SubtitlesTop" v-model="SubtitlesTop"
width="30" width="30"
/></div> /></div>
<!-- X轴 --> <!-- X轴 -->
<div class="item">{{$t('createVideo.XAxis')}}:&nbsp;<el-input
<div class="item" style="font-family: ;">{{$t('createVideo.XAxis')}}:&nbsp;<el-input
v-model="SubtitlesLeft" v-model="SubtitlesLeft"
width="30" width="30"
/></div> /></div>
@@ -37,7 +46,7 @@
width="30" width="30"
/></div> /></div>
<!-- 字幕盒子宽度 --> <!-- 字幕盒子宽度 -->
<div class="item">{{$t('createVideo.width')}}:&nbsp;<el-input
<div v-if="false" class="item">{{$t('createVideo.width')}}:&nbsp;<el-input
v-model="SubtitlesWidth" v-model="SubtitlesWidth"
width="30" width="30"
/></div> /></div>
@@ -1989,7 +1998,7 @@ const canvasImgBox = ref(null); // 图片外盒子dom
const SubtitlesBox = ref(null); // 字幕盒子dom const SubtitlesBox = ref(null); // 字幕盒子dom
const SubtitlesSwitch = ref(false); // 字幕开关 const SubtitlesSwitch = ref(false); // 字幕开关
const SubtitlesWidth = ref(250); // 字幕宽度 const SubtitlesWidth = ref(250); // 字幕宽度
const SubtitlesFontStyle = ref("微软雅黑"); //字幕字体系列
const SubtitlesFontFamily = ref(""); //字幕字体系列
const SubtitlesTop = ref(400); // 字幕Y轴 const SubtitlesTop = ref(400); // 字幕Y轴
const SubtitlesLeft = ref(100); // 字幕X轴 const SubtitlesLeft = ref(100); // 字幕X轴
const SubtitlesSize = ref(18); // 字幕字号 const SubtitlesSize = ref(18); // 字幕字号
@@ -2016,6 +2025,13 @@ const canvasImgBox = ref(null); // 图片外盒子dom
'rgba(0, 255, 128, 1)', // 中绿色 'rgba(0, 255, 128, 1)', // 中绿色
'rgba(128, 255, 0, 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 SubtitlesColorShow = ref(false); // 字色调色板开关
const SubtitlesBgcShow = ref(false); // 背景调色板开关 const SubtitlesBgcShow = ref(false); // 背景调色板开关
const handleSubtitlesColorShow = (e) => { const handleSubtitlesColorShow = (e) => {
@@ -2080,7 +2096,7 @@ watch(
top: SubtitlesTop.value + 'px', top: SubtitlesTop.value + 'px',
left: SubtitlesLeft.value + 'px', left: SubtitlesLeft.value + 'px',
fontSize: SubtitlesSize.value + 'px', fontSize: SubtitlesSize.value + 'px',
fontStyle: SubtitlesFontStyle.value,
fontFamily: SubtitlesFontFamily.value,
color: SubtitlesColor.value, color: SubtitlesColor.value,
backgroundColor: SubtitlesBgc.value, backgroundColor: SubtitlesBgc.value,
}; };
@@ -2303,9 +2319,9 @@ onUnmounted(() => {
align-items: center; align-items: center;
margin-left: 10px; margin-left: 10px;
img { img {

cursor: pointer; cursor: pointer;
} }
// 调色盘
.myColorBox { .myColorBox {
position: relative; position: relative;
width: 25px; width: 25px;
@@ -2340,6 +2356,8 @@ onUnmounted(() => {
width: 25px; width: 25px;
height: 25px; height: 25px;
margin: 5px 5px; margin: 5px 5px;
border: #000 solid 2px;
border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
} }
@@ -2348,6 +2366,9 @@ onUnmounted(() => {
width: 60px; width: 60px;
height: 25px; height: 25px;
} }
.el-input__wrapper {
height: 25px;
}
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
border: none; border: none;


Loading…
取消
儲存