From e3819ec876de8af81c2e4aba18958be64b596895 Mon Sep 17 00:00:00 2001
From: chutingting
Date: Wed, 6 Dec 2023 22:43:49 +0800
Subject: [PATCH 1/2] edit bug
---
src/components/cutImg.vue | 49 ++++++++++++++++++++++++---------
src/views/createVideo/index.vue | 31 +++++++++++----------
2 files changed, 53 insertions(+), 27 deletions(-)
diff --git a/src/components/cutImg.vue b/src/components/cutImg.vue
index 017f163..fbaae69 100644
--- a/src/components/cutImg.vue
+++ b/src/components/cutImg.vue
@@ -92,24 +92,47 @@ function myUpload(params) {}
const cropper = ref(null);
const option = reactive({
img: "",
+ canMove: true,
outputSize: 0.5, //图片质量
- info: false, // 裁剪框的大小信息
- // outputType: 'jpeg', // 裁剪生成图片的格式
- outputType: "png", // 裁剪生成图片的格式
+ outputType: "png",
canScale: true, // 图片是否允许滚轮缩放
- autoCrop: true, // 是否默认生成截图框
+ fixedBox: false,
+ original: false,
+ canMoveBox: true,
+ autoCrop: true,
+ // 只有自动截图开启 宽度高度才生效
autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
- high: true, // 是否按照设备的dpr 输出等比例图片
- fixedBox: false, // 固定截图框大小 不允许改变
- fixed: false, // 是否开启截图框宽高固定比例
- // fixedNumber: [1, 1], // 截图框的宽高比例
- full: true, // 是否输出原图比例的截图
- canMoveBox: true, // 截图框能否拖动
- original: false, // 上传图片按照原始比例渲染
- centerBox: true, // 截图框是否被限制在图片里面
+ centerBox: true,
+ high: true,
+ cropData: {},
+ enlarge: 1,
+ mode: 'contain',
+ maxImgSize: 3000,
+ // limitMinSize: [50, 50],
+ fixed: false,
+ // fixedNumber: [2, 1],
+ fillColor: '',
+ full: true,
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
- mode: "100% auto", // 图片默认渲染方式
+ // outputSize: 0.5, //图片质量
+ // info: false, // 裁剪框的大小信息
+ // // outputType: 'jpeg', // 裁剪生成图片的格式
+ // outputType: "png", // 裁剪生成图片的格式
+ // canScale: true, // 图片是否允许滚轮缩放
+ // autoCrop: true, // 是否默认生成截图框
+ // autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
+ // autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
+ // high: true, // 是否按照设备的dpr 输出等比例图片
+ // fixedBox: false, // 固定截图框大小 不允许改变
+ // fixed: false, // 是否开启截图框宽高固定比例
+ // // fixedNumber: [1, 1], // 截图框的宽高比例
+ // full: true, // 是否输出原图比例的截图
+ // canMoveBox: true, // 截图框能否拖动
+ // original: false, // 上传图片按照原始比例渲染
+ // centerBox: true, // 截图框是否被限制在图片里面
+ // infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+ // mode: "100% auto", // 图片默认渲染方式
});
//#region 裁剪图片
const cropperOverData = ref(null);
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index 5010f1d..42d0a23 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -24,7 +24,7 @@
@@ -59,7 +59,7 @@
@@ -69,11 +69,11 @@
:label="item"
:value="item"
:style="{
- height: item + 'px',
- lineHeight: item + 'px',
+ // height: item + 'px',
+ // lineHeight: item + 'px',
}"
>
- {{
+ {{
item
}}
@@ -122,7 +122,7 @@
@@ -157,7 +157,7 @@
@@ -167,11 +167,12 @@
:label="item"
:value="item"
:style="{
- height: item + 'px',
- lineHeight: item + 'px',
+ // height: item + 'px',
+ // lineHeight: item + 'px',
}"
>
- {{
+
+ {{
item
}}
@@ -1905,7 +1906,7 @@ onMounted(async () => {
position: absolute;
top: 50px;
left: 225px;
- width: 700px;
+ width: 660px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
@@ -1918,7 +1919,7 @@ onMounted(async () => {
.tab4Item {
display: flex;
justify-content: space-between;
- width: 130px;
+ width: 120px;
background-color: rgba(71, 105, 218, 0.1);
text-align: center;
padding: 10px;
@@ -1928,6 +1929,7 @@ onMounted(async () => {
// margin-bottom: 10px;
p {
padding-bottom: 5px;
+ font-size: 16px;
}
}
.SubtitlesSwitch {
@@ -1987,7 +1989,7 @@ onMounted(async () => {
position: absolute;
top: 150px;
left: 150px;
- width: 150px;
+ width: 130px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
@@ -2000,7 +2002,7 @@ onMounted(async () => {
.tab4Item {
display: flex;
justify-content: space-between;
- width: 130px;
+ width: 120px;
background-color: rgba(71, 105, 218, 0.1);
text-align: center;
padding: 10px;
@@ -2010,6 +2012,7 @@ onMounted(async () => {
margin-bottom: 10px;
p {
padding-bottom: 5px;
+ font-size:16px;
}
}
.SubtitlesSwitch {
From 6069139fbc4b346e4bc25b19d7a3f3ec9662f187 Mon Sep 17 00:00:00 2001
From: chutingting
Date: Thu, 7 Dec 2023 12:57:00 +0800
Subject: [PATCH 2/2] edit z
---
src/types/auto-imports.d.ts | 2 --
src/views/createVideo/index.vue | 7 ++++++-
2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index e5c7bdb..9ea2d5d 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
- const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef
- readonly ElForm: UnwrapRef
readonly ElMessage: UnwrapRef
readonly ElMessageBox: UnwrapRef
readonly asyncComputed: UnwrapRef
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index 42d0a23..8654187 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -1236,7 +1236,12 @@ async function reGetpersonSCIList() {
const scImgActive = ref(null);
function selectScImg(img) {
scImgActive.value = img.id;
- materialList.scList.push({ ...img, x: 0, y: 0, z: 0, w: 1, h: 1 });
+ let maxValue = 1
+ // 素材层级从2递增
+ if (materialList.scList.length > 0) {
+ maxValue = Math.max.apply(Math, materialList.scList.map(item => item.z));
+ }
+ materialList.scList.push({ ...img, x: 0, y: 0, z: maxValue + 1, w: 1, h: 1 });
}
// 删除上传的背景或素材
function delImg(id) {