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%;
}
}
}