diff --git a/package.json b/package.json index 1f988f8..78d618b 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dayjs": "^1.11.8", "echarts": "^5.2.2", "element-plus": "^2.3.1", + "fabric": "^5.3.0", "js-audio-recorder": "^1.0.7", "nprogress": "^0.2.0", "path-browserify": "^1.0.1", @@ -77,4 +78,4 @@ "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git", "author": "有来开源组织", "license": "MIT" -} \ No newline at end of file +} diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 3a654f8..18ba8e5 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -22,10 +22,14 @@
- +
+ + +
+
-
+

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

@@ -736,8 +740,8 @@ import { useI18n } from "vue-i18n"; import Recorder from "js-audio-recorder"; //mp3插件 import imageCompression from "browser-image-compression"; //压缩图片插件 import { useRoute, useRouter } from "vue-router"; -import axios from "axios"; -import { loginApi } from "@/api/auth"; +import { fabric } from "fabric"; + //#endregion --------------------------------- const route = useRoute(); @@ -1912,6 +1916,56 @@ function copyAnswerContent() { //#region 字幕部分 const SubtitlesSwitch=ref(false) //字幕开关 +const canvas = ref(null); //canvas对象 +const myCanvasRef = ref(null); //画布dom +const canvasImgRef = ref(null); //图片dom +const imgWidth=ref(null) +const imgHeight=ref(null) +const myText = ref("hello world"); +const iText = new fabric.IText(myText.value, { + left: 100, + top: 100, + }); +function setCanvasText() { + canvas.value = new fabric.Canvas("myCanvas",{ + width:imgWidth.value, + height:imgHeight.value, + }); + iText.on("mouseup", function () { + console.log(iText, "iText"); + console.log(iText.angle.toFixed(0), "angle"); + console.log(iText.left.toFixed(0), "left"); + console.log(iText.top.toFixed(0), "top"); + console.log(iText.width.toFixed(0), "width"); + console.log(iText.height.toFixed(0), "height"); + }); + canvas.value.add(iText); +} +// 监听字幕显示 +watch( + () => SubtitlesSwitch, + async (newValue, oldValue) => { + if(SubtitlesSwitch.value) { + setCanvasText() + } else { + canvas.value.remove(iText); + canvas.value=null; + } + }, + { deep: true } +); +// 监听图片变化 +watch( + () => imgUrl.value, + async (newValue, oldValue) => { + await nextTick() + if(canvas.value) { + canvas.value.width=imgWidth.value, + canvas.value.height=imgHeight.value + } + }, + { deep: true } +); //#endregion ---------------------------- //#region @@ -1958,7 +2012,8 @@ onMounted(async () => { audioMusicUrl.value = item.url; } }); - createWS(); + createWS(); //创建websocket + }); //#endregion ---------------------------- @@ -1996,8 +2051,6 @@ onUnmounted(() => { border-radius: 0; box-shadow: none; } - - .el-icon.icon-edit { width: 35px; height: 35px; @@ -2013,7 +2066,6 @@ onUnmounted(() => { // height: 580px; height: 67%; // height: calc(70vh - 80px ); - z-index: 9999; margin-bottom: 10px; .uploadBtn { position: relative; @@ -2027,19 +2079,45 @@ onUnmounted(() => { background-color: #15d1b8; } } - .bigImg { display: flex; align-items: center; justify-content: space-between; - width: 80%; + width: 50%; height: 88%; margin-top: 20px; - + .canvasBox { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: skyblue; + opacity: 0.5; + // z-index: 9; + .canvas-container { + // background-color: red; + // z-index: 9; + // width: 100%!important; + // height: 100%!important; + // #myCanvas { + // width: 100%!important; + // height: 100%!important; + // } + // .upper-canvas { + // width: 100%!important; + // height: 100%!important; + // } + } + } img { + // position: absolute; + // left: 0; + // top: 0; max-width: 100%; max-height: 100%; border-radius: 15px; + z-index: -1; } } @@ -2229,6 +2307,8 @@ onUnmounted(() => { background-color: #f1f2f6; text-align: center; } + + } &-bottom { diff --git a/src/views/moveImg/index.vue b/src/views/moveImg/index.vue index 2aeddb8..b9d29c9 100644 --- a/src/views/moveImg/index.vue +++ b/src/views/moveImg/index.vue @@ -1,16 +1,7 @@