From 3e32b0f90d1dc764bf454e578ee2b13373bdfb57 Mon Sep 17 00:00:00 2001 From: congzc Date: Tue, 18 Jul 2023 13:32:46 +0800 Subject: [PATCH] fontfamily --- src/lang/package/en.ts | 1 + src/lang/package/zh-cn.ts | 1 + src/views/createVideo/index.vue | 31 ++++++++++++++++++++++++++----- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 2e0de37..908d56c 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -86,6 +86,7 @@ export default { uploadImgTip2:'please upload a clear frontal photo', entered:'entered', subtitles:"subtitles", + fontFamily:'Font Faily', XAxis:"X-axis", YAxis:"Y-axis", fontSize:"Font Size", diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 79872f4..f5e6178 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -84,6 +84,7 @@ export default { uploadImgTip2:'请确保上传图片为无遮挡的正脸图片', entered:'已输入', subtitles:"字幕", + fontFamily:'字体', XAxis:"X轴", YAxis:"Y轴", fontSize:"字体大小", diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 1b01954..af0bfe2 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -21,13 +21,22 @@
+ +
{{$t('createVideo.fontFamily')}}:  + +
{{$t('createVideo.YAxis')}}: 
-
{{$t('createVideo.XAxis')}}: {{$t('createVideo.XAxis')}}: 
@@ -37,7 +46,7 @@ width="30" />
-
{{$t('createVideo.width')}}: {{$t('createVideo.width')}}: 
@@ -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;