From bffacd2ce57007267bfddae14ae411be09826b99 Mon Sep 17 00:00:00 2001 From: congzc Date: Mon, 17 Jul 2023 18:01:07 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=89=B2=E6=9D=BF=E5=8F=8A=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E8=B0=83=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/bgc.png | Bin 0 -> 656 bytes src/assets/img/font.png | Bin 0 -> 6861 bytes src/lang/package/en.ts | 7 + src/lang/package/zh-cn.ts | 7 + src/views/createVideo/index.vue | 357 +++++++++++++++++++++++++++----- 5 files changed, 319 insertions(+), 52 deletions(-) create mode 100644 src/assets/img/bgc.png create mode 100644 src/assets/img/font.png diff --git a/src/assets/img/bgc.png b/src/assets/img/bgc.png new file mode 100644 index 0000000000000000000000000000000000000000..a380230c2b2fd8719056c76f08533e2cfc46a5c2 GIT binary patch literal 656 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 A0ssI2 literal 0 HcmV?d00001 diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index a64cf76..2e0de37 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -86,6 +86,13 @@ export default { uploadImgTip2:'please upload a clear frontal photo', entered:'entered', subtitles:"subtitles", + XAxis:"X-axis", + YAxis:"Y-axis", + fontSize:"Font Size", + width:"Width", + FontColor:"Font Color", + backgroundColor:"Background color", + SubtitlesTip:"Please edit text in copy area", }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 38c1df3..79872f4 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -84,6 +84,13 @@ export default { uploadImgTip2:'请确保上传图片为无遮挡的正脸图片', entered:'已输入', subtitles:"字幕", + XAxis:"X轴", + YAxis:"Y轴", + fontSize:"字体大小", + width:"宽度", + FontColor:"字体颜色", + backgroundColor:"背景颜色", + SubtitlesTip:"请在文案区编辑您的正文", }, // 我的视频 diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 5155cb9..1b01954 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -4,7 +4,7 @@
-
+
-
X:  +
{{$t('createVideo.YAxis')}}: 
-
Y:  +
{{$t('createVideo.XAxis')}}: 
-
Size:  +
{{$t('createVideo.fontSize')}}: 
-
Color: 
-
BGC: 
+ +
{{$t('createVideo.width')}}: 
+ +
+ + + + + + :  +
+
+
+
+
+
+ +
+ + :  +
+
+
+
+
+
-
请在文案区编辑您的正文 +
+
{{$t('createVideo.SubtitlesTip')}}
-
-
+
+
@@ -55,7 +100,7 @@

{{ $t('createVideo.subtitles') }}

- +
@@ -1936,47 +1981,192 @@ function copyAnswerContent() { textareaContent.value = answerContent.value; document.getElementById("tab-0").click(); } + //#endregion ---------------------------- //#region 字幕部分 -const canvasImgBox=ref(null) //图片外盒子dom -const SubtitlesBox=ref(null) //字幕盒子dom -const SubtitlesSwitch=ref(false) //字幕开关 -const SubtitlesTop=ref(0) //字幕Y轴 -const SubtitlesLeft=ref(0) //字幕X轴 -const SubtitlesSize=ref(18) //字幕字号 -const SubtitlesColor=ref('rgba(0, 0, 0, 1)') //字幕字色 -const SubtitlesBgc=ref('rgba(255, 255, 255,1 )') //字幕背景色 -// 计算属性来计算盒子位置 -const SubtitlesStyle = computed(() => { - return { - top: SubtitlesTop.value + 'px', - left: SubtitlesLeft.value + 'px', - fontSize: SubtitlesSize.value+ 'px', - color:SubtitlesColor.value, - backgroundColor: SubtitlesBgc.value, - }; -}); -// 拖动盒子 -const handleDrag = (event) => { - event.preventDefault(); - const boxElement = canvasImgBox.value; - const imageElement = SubtitlesBox.value; - const offsetX = event.clientX - imageElement.offsetLeft; - const offsetY = event.clientY - imageElement.offsetTop; - const onMouseMove = (event) => { - const newX = event.clientX - offsetX; - const newY = event.clientY - offsetY; - SubtitlesLeft.value= newX; - SubtitlesTop.value = newY; - }; - const onMouseUp = () => { - document.removeEventListener('mousemove', onMouseMove); - document.removeEventListener('mouseup', onMouseUp); - }; - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mouseup', onMouseUp); +const canvasImgBox = ref(null); // 图片外盒子dom + const SubtitlesBox = ref(null); // 字幕盒子dom + const SubtitlesSwitch = ref(false); // 字幕开关 + const SubtitlesWidth = ref(250); // 字幕宽度 + const SubtitlesFontStyle = ref("微软雅黑"); //字幕字体系列 + const SubtitlesTop = ref(400); // 字幕Y轴 + const SubtitlesLeft = ref(100); // 字幕X轴 + const SubtitlesSize = ref(18); // 字幕字号 + 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 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 SubtitlesColorShow = ref(false); // 字色调色板开关 +const SubtitlesBgcShow = ref(false); // 背景调色板开关 +const handleSubtitlesColorShow = (e) => { + e.stopPropagation(); // 阻止事件冒泡 + SubtitlesColorShow.value = true; + SubtitlesBgcShow.value = false; +}; +const handleSubtitlesBgcShow = (e) => { + e.stopPropagation(); // 阻止事件冒泡 + SubtitlesBgcShow.value = true; + SubtitlesColorShow.value = false; +}; +const handleClickOutside = () => { + if(SubtitlesColorShow.value==true) { + } + SubtitlesColorShow.value = false; + if(SubtitlesBgcShow.value==true) { + } + SubtitlesBgcShow.value = false; }; +onMounted(() => { + 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; +} +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(() => { + return { + width: SubtitlesWidth.value + 'px', + top: SubtitlesTop.value + 'px', + left: SubtitlesLeft.value + 'px', + fontSize: SubtitlesSize.value + 'px', + fontStyle: SubtitlesFontStyle.value, + color: SubtitlesColor.value, + backgroundColor: SubtitlesBgc.value, + }; + }); + + // 拖动盒子 + const handleDrag = (event) => { + if (isResizing.value) { + return; + } + event.preventDefault(); + const boxElement = canvasImgBox.value; + const imageElement = SubtitlesBox.value; + const offsetX = event.clientX - imageElement.offsetLeft; + const offsetY = event.clientY - imageElement.offsetTop; + + const onMouseMove = (event) => { + const newX = event.clientX - offsetX; + const newY = event.clientY - offsetY; + SubtitlesLeft.value = newX; + SubtitlesTop.value = newY; + }; + + const onMouseUp = () => { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }; + + // 改变盒子宽度 + const isResizing = ref(false); + const startX = ref(0); + + const startResize = (event) => { + isResizing.value = true; + startX.value = event.clientX; + document.addEventListener('mousemove', resizeBox); + document.addEventListener('mouseup', stopResize); + }; + + const stopResize = () => { + isResizing.value = false; + document.removeEventListener('mousemove', resizeBox); + document.removeEventListener('mouseup', stopResize); + }; + + const resizeBox = (event) => { + if (isResizing.value) { + const deltaX = event.clientX - startX.value; + SubtitlesWidth.value += deltaX; + startX.value = event.clientX; + } + }; + + const startResize2 = (event) => { + isResizing.value = true; + startX.value = event.clientX; + document.addEventListener('mousemove', resizeBox2); + document.addEventListener('mouseup', stopResize2); + }; + + const stopResize2 = () => { + isResizing.value = false; + document.removeEventListener('mousemove', resizeBox2); + document.removeEventListener('mouseup', stopResize2); + }; + + const resizeBox2 = (event) => { + if (isResizing.value) { + const deltaX = startX.value - event.clientX; + const newLeft = SubtitlesLeft.value - deltaX; + SubtitlesWidth.value += deltaX; + SubtitlesLeft.value = newLeft; + startX.value = event.clientX; + } + }; + + onBeforeUnmount(() => { + document.removeEventListener('mousemove', resizeBox); + document.removeEventListener('mouseup', stopResize); + document.removeEventListener('mousemove', resizeBox2); + document.removeEventListener('mouseup', stopResize2); + }); // 监听字幕显示 watch( () => SubtitlesSwitch, @@ -2095,10 +2285,12 @@ onUnmounted(() => { height: 67%; // height: calc(70vh - 80px ); margin-bottom: 20px; + overflow: hidden; .editSubtitlesBox{ display: flex; - justify-content: flex-start; - padding-right: 80px; + justify-content: space-evenly; + // padding-right: 80px; + padding:0 10px; margin-left: 10px; margin-right: 80px; border-radius: 20px; @@ -2110,6 +2302,48 @@ onUnmounted(() => { display: flex; align-items: center; margin-left: 10px; + img { + + cursor: pointer; + } + .myColorBox { + position: relative; + width: 25px; + height: 25px; + 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; + cursor: pointer; + } + } + } .el-input { width: 60px; height: 25px; @@ -2142,16 +2376,30 @@ onUnmounted(() => { width: 50%; height: 88%; margin-top: 20px; + .SubtitlesBox { position: absolute; user-select: none; - width: 300px; + // width: 200px; padding: 5px 5px; - border: 2px solid #00ff00; text-align: center; + border: 2px solid rgba(0, 0, 0, 0); background-color: #fff; cursor: move; + &:hover { + border: 2px solid #00ff00; + .stretchBox { + opacity: 1; + } + } + .SubtitlesTip { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .stretchBox { + opacity: 0; position: absolute; width: 10px; height: 10px; @@ -2161,15 +2409,17 @@ onUnmounted(() => { top: -5px; left: -5px; cursor: nwse-resize; - + display: none; } .box2 { + display: none; top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; } .box3 { + display: none; top: -5px; left:100%; transform: translateX(-5px); @@ -2188,18 +2438,21 @@ onUnmounted(() => { cursor: ew-resize; } .box6 { + display: none; top: 100%; left: -5px; transform: translateY(-5px); cursor: nesw-resize; } .box7 { + display: none; top: 100%; left: 50%; transform: translate(-5px,-5px); cursor: ns-resize; } .box8 { + display: none; top: 100%; left: 100%; transform: translate(-5px,-5px);