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) {