diff --git a/.env.development b/.env.development index 716627d..4e6b328 100644 --- a/.env.development +++ b/.env.development @@ -6,4 +6,4 @@ NODE_ENV='development' VITE_APP_TITLE = 'Metavatar-PC' VITE_APP_PORT = 3000 ## VITE_APP_BASE_API = 'https://photo.metavatar.cc/C' -VITE_APP_BASE_API = 'https://mtest.metavatar.cc/C' +VITE_APP_BASE_API = 'https://test.metavatar.cc/C' diff --git a/.env.test b/.env.test index d7924d5..46459b7 100644 --- a/.env.test +++ b/.env.test @@ -6,4 +6,4 @@ NODE_ENV='test' VITE_APP_TITLE = 'Metavatar-PC' VITE_APP_PORT = 3000 # VITE_APP_BASE_API = 'https://photo.metavatar.cc/C' -VITE_APP_BASE_API = 'https://mtest.metavatar.cc/C' +VITE_APP_BASE_API = 'https://test.metavatar.cc/C' diff --git a/index.html b/index.html index b86fbdd..c884133 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Metavatar-PC + Metavatar-慧影 diff --git a/src/components/EditPosition.vue b/src/components/EditPosition.vue index c28687c..82d308e 100644 --- a/src/components/EditPosition.vue +++ b/src/components/EditPosition.vue @@ -90,6 +90,16 @@ /> + +
+ {{ $t("createVideo.SubtitlesTip") }} +
@@ -118,6 +128,9 @@ const props = defineProps({ showImgInfo: { required: true, }, + Subtitles: { + required: true, + }, }); //#endregion -------------------------- @@ -148,6 +161,14 @@ const virtualStyle = computed(() => { }); // 拖动盒子 const showBorderActive = ref(-1); //判断显示边框 +watch( + () => props.materialList.virtual.id, + (newValue, oldValue) => { + showBorderActive.value = props.materialList.virtual.id; + }, + { deep: true } +); + const fatherBox = ref(null); const handleDrag = (item, event) => { realImgUrl.value = item.material; @@ -188,45 +209,6 @@ const touchOver = ref({ }); const scaleNum = ref(0.004); -// 改动版 -// function changeScale(event) { -// event.preventDefault(); -// const x = event.clientX; -// const y = event.clientY; -// touchStart.pageX = x; -// touchStart.pageY = y; -// // 鼠标移动 -// const onMouseMove = (event) => { -// const MoveX = event.clientX; -// const MoveY = event.clientY; -// let flag = Math.sign(x - touchStart.pageX) == -1 ? true : false; -// if (flag) { -// // 限制最大缩放系数 -// if (props.materialList.virtual.w > 1.3) return; -// props.materialList.virtual.w += scaleNum.value; -// // 更新坐标位置 -// touchStart.pageX = MoveX; -// touchStart.pageY = MoveY; -// } else { -// // 限制最小缩放系数 -// if (props.materialList.virtual.w < 0.4) return; -// props.materialList.virtual.w -= scaleNum.value; -// // 更新坐标位置 -// touchStart.pageX = MoveX; -// touchStart.pageY = MoveY; -// } -// }; - -// // 鼠标抬起 -// const onMouseUp = () => { -// document.removeEventListener("mousemove", onMouseMove); -// document.removeEventListener("mouseup", onMouseUp); -// }; - -// document.addEventListener("mousemove", onMouseMove); -// document.addEventListener("mouseup", onMouseUp); -// } - // 距离版 function changeScale(event) { event.stopPropagation(); @@ -400,6 +382,72 @@ watch( ); //#endregion -------------------------- +//#region 字幕 +const SubtitlesStyle = computed(() => { + let leftX = null; + if (props.videoType == 1) { + leftX = + (1080 / 2 - props.Subtitles.SubtitlesWidth / 2) / props.proportion + "px"; + } else if (props.videoType == 2) { + leftX = + (1920 / 2 - props.Subtitles.SubtitlesWidth / 2) / props.proportion + "px"; + } + console.log(props.Subtitles.SubtitlesWidth); + return { + width: props.Subtitles.SubtitlesWidth / props.proportion + "px", + top: props.Subtitles.SubtitlesTop / props.proportion + "px", + left: leftX, + fontSize: props.Subtitles.SubtitlesSize / props.proportion + "px", + fontFamily: props.Subtitles.SubtitlesFontFamily, + color: props.Subtitles.SubtitlesColor, + zIndex: 99, + }; +}); +const handleDragSubtitles = (event) => { + showBorderActive.value = "subtitles"; + event.preventDefault(); + // const startX = event.clientX; //保存初始值,避免闪烁 + const startY = event.clientY; + const startTop = props.Subtitles.SubtitlesTop; + // 鼠标移动 + const onMouseMove = (event) => { + const deltaY = event.clientY - startY; + props.Subtitles.SubtitlesTop = startTop + deltaY * props.proportion; + }; + + // 鼠标抬起 + const onMouseUp = () => { + document.removeEventListener("mousemove", onMouseMove); + document.removeEventListener("mouseup", onMouseUp); + }; + + document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mouseup", onMouseUp); +}; +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 //#endregion -------------------------- @@ -446,6 +494,16 @@ watch( user-select: none; border: rgba(0, 0, 0, 0) 5px solid; } +.subtitles { + position: absolute; + user-select: none; + border: rgba(0, 0, 0, 0) 5px solid; + padding: 20px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} .border { border: 5px solid #00ff00; .stretchBox { diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 5972479..39b13ef 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -13,7 +13,8 @@ export default { }, // 登录页面国际化 login: { - title: "Metavatar-PC", + // title: "Metavatar-MetaTalker", + title: "MetaTalker", username: "Username", email: "Phone", password: "Password", @@ -98,6 +99,7 @@ export default { ratio:'ratio', entered:'entered', tooltip2:'Add Pause', + SubtitlesTip:"Subtitles will be shown here", }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index fc9d7ff..a896040 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -13,7 +13,7 @@ export default { }, // 登录页面国际化 login: { - title: "Metavatar-PC", + title: "慧影", username: "用户名", email: "手机号", password: "密码", @@ -100,6 +100,7 @@ export default { ratio:'缩放倍率', entered:'已输入', tooltip2:'添加停顿', + SubtitlesTip:"字幕将在此处展示", }, // 我的视频 diff --git a/src/settings.ts b/src/settings.ts index 5ad7cba..190f4f7 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -42,7 +42,7 @@ interface DefaultSettings { } const defaultSettings: DefaultSettings = { - title: "Metavatar-PC", + title: "Metavatar-慧影", showSettings: false, tagsView: false, fixedHeader: false, diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 3ba76db..476a2da 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -97,11 +97,13 @@ class="" > @@ -463,15 +465,55 @@
- +
+

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

-
--> +
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字体` : `Font Family` }} +

+ + + +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `Y轴` : `Y-axis` }} +

+ +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} +

+ +
+
@@ -952,6 +994,44 @@ function delImg(id) { //#endregion ---------------------------- //#region 字幕 +const Subtitles = reactive({ + SubtitlesSwitch: false, //开关 + SubtitlesFontFamily: "仿宋", //字体系列 + SubtitlesTop: 400, //Y轴 + SubtitlesSize: 70, //字号大小 + SubtitlesColor: "#FFFFFF", //字色 + SubtitlesWidth: 500, //宽度 + colorList: [ + "#FFFFFF", + "#FF8080", + "#000000", + "#FF80FF", + "#FF0000", + "#00FF80", + "#FF00FF", + "#0080FF", + "#00FF00", + "#0000FF", + "#000080", + "#FFFF00", + "#FF0080", + "#FF8000", + "#80FF00", + "#00FFFF", + ], + fontFamilyList: [ + { label: "仿宋", value: "仿宋" }, + { label: "微软雅黑", value: "微软雅黑" }, + { label: "新宋体", value: "新宋体" }, + { label: "黑体", value: "黑体" }, + { label: "楷体", value: "楷体" }, + { label: "等线", value: "等线" }, + { label: "Corbel", value: "Corbel" }, + { label: "Terminal", value: "Terminal" }, + { label: "Times New Roman", value: "Times New Roman" }, + { label: "Verdana", value: "Verdana" }, + ], +}); //#endregion ---------------------------- @@ -961,18 +1041,24 @@ const elementWidth = ref(null); onMounted(() => { elementWidth.value = document.getElementById("editPosition").clientWidth; }); +const EditPositionDom = ref(null); watch( () => videoType.value, - (newValue, oldValue) => { + async (newValue, oldValue) => { // 根据横竖屏来确定比例 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 = 1080 / elementWidth.value; + // proportion.value = 1080 / 432; } else if (videoType.value == 2) { - proportion.value = 1920 / 768; + // proportion.value = 1920 / 768; proportion.value = 1920 / elementWidth.value; } - console.log(proportion.value); + Subtitles.SubtitlesWidth = elementWidth.value * 0.7 * proportion.value; + // console.log(EditPositionDom.value); + console.log(proportion.value, "比例"); }, { deep: true } ); @@ -993,9 +1079,9 @@ async function getPersonPatch() { materialList.virtual = { ...materialList.virtual, x: 50, - y: 50, + y: 10, z: 0, - w: 1, + w: 0.55, h: 1, }; // } @@ -1689,8 +1775,23 @@ onMounted(async () => { .tab4 { display: flex; justify-content: flex-start; + align-content: flex-start; + flex-wrap: wrap; .tab4Item { + display: flex; + justify-content: space-between; width: 30%; + background-color: #f1e5e5; + text-align: center; + padding: 10px; + height: 80px; + border-radius: 10px; + margin: auto; + margin-bottom: 10px; + display: none; + } + .SubtitlesSwitch { + width: 100%; } } }