添加分割功能

src/components/item/player/canvasDraw.ts

@@ -119,11 +119,11 @@ export class CanvasPlayer {
     drawToRenderCanvas(trackItem: Record<string, any>, id: number, frameIndex: number) {
         return new Promise(resolve => {
             const { sourceWidth, sourceHeight, drawL, drawT, drawW, drawH } = this.computedRect(trackItem, id);
-            const { type, start, end, offsetL, name, sourceFrame } = trackItem;
+            const { type, start, end, offsetL, name, sourceFrame, startIndex } = trackItem;
             if (frameIndex > end) {
                 resolve(true);
             } else if (isVideo(type)) {
-                const frame = Math.max(frameIndex - start + offsetL, 1); // 默认展示首帧
+                const frame = Math.max(frameIndex - start + offsetL + startIndex, 1); // 默认展示首帧
                 const blobFrame = this.ffmpeg.getFrame(name, frame);
                 createImageBitmap(blobFrame as Blob).then(imageBitmap => {
                     this.renderContext?.drawImage(imageBitmap, 0, 0, sourceWidth, sourceHeight, drawL, drawT, drawW, drawH);

src/components/item/trackItem/TrackContro.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="pl-4 pb-1 pr-10 w-full h-10 border-b dark:border-gray-600 border-gray-300">
-    <div class="float-left h-9 w-32 flex flex-row flex-nowrap items-center justify-around">
+    <div
+      class="float-left h-9 w-32 flex flex-row flex-nowrap items-center justify-around"
+    >
       <div v-for="item of icons" :key="item.title" @click="handlerIcon(item)">
         <el-tooltip
           :disabled="item.disable"
@@ -10,9 +12,9 @@
           placement="bottom-start"
         >
           <component
-              :is="item.icon"
-              class="focus:outline-0"
-              :class="item.disable ? 'cursor-not-allowed text-gray-400' : ''"
+            :is="item.icon"
+            class="focus:outline-0"
+            :class="item.disable ? 'cursor-not-allowed text-gray-400' : ''"
           />
         </el-tooltip>
       </div>
@@ -28,6 +30,8 @@
 <script setup lang="ts">
   import { usePageState } from '@/stores/pageState';
   import { useTrackState } from '@/stores/trackState';
+  import { usePlayerState } from '@/stores/playerState';
+  import { getId } from '@/utils/common';
   import { ref, reactive, computed } from 'vue';
   const props = defineProps({
     modelValue: {
@@ -50,6 +54,7 @@
   });
   const store = usePageState();
   const trackStore = useTrackState();
+  const playerStore = usePlayerState();
   const statePoint = computed(() => store._stepInfo.statePoint);
   const stateLength = computed(() => store._stepInfo.stateLength);
   const svgStyle = ref({
@@ -83,12 +88,14 @@
     },
     {
       title: '分割',
-      disable: true,
+      disable:
+        trackStore.selectTrackItem.line === -1 && trackStore.selectTrackItem.index === -1,
       icon: 'SplitIcon'
     },
     {
       title: '删除',
-      disable: trackStore.selectTrackItem.line === -1 && trackStore.selectTrackItem.index === -1,
+      disable:
+        trackStore.selectTrackItem.line === -1 && trackStore.selectTrackItem.index === -1,
       icon: 'DeleteIcon'
     }
   ]);
@@ -99,15 +106,32 @@
       return;
     }
     if (type === 'DeleteIcon') {
-      if (trackStore.selectTrackItem.line !== -1 && trackStore.selectTrackItem.index !== -1) {
-        trackStore.removeTrack(trackStore.selectTrackItem.line, trackStore.selectTrackItem.index);
-        trackStore.selectTrackItem.line = -1;
-        trackStore.selectTrackItem.index = -1;
-      }
+      trackStore.removeTrack(
+        trackStore.selectTrackItem.line,
+        trackStore.selectTrackItem.index
+      );
+      trackStore.selectTrackItem.line = -1;
+      trackStore.selectTrackItem.index = -1;
     } else if (type === 'UndoIcon') {
       store._undo();
     } else if (type === 'RedoIcon') {
       store._redo();
+    } else if (type === 'SplitIcon') {
+      // 判断分割时间是否在视频内
+      let splitTime = playerStore.playStartFrame;
+      let active
+        = trackStore.trackList[trackStore.selectTrackItem.line].list[
+          trackStore.selectTrackItem.index
+        ];
+      if (splitTime > active.start && splitTime < active.end && active.type === 'video') {
+        let copy = JSON.parse(JSON.stringify(active));
+        copy.end = active.end;
+        active.end = splitTime;
+        copy.start = splitTime + 1;
+        copy.id = getId();
+        copy.startIndex = active.end;
+        trackStore.addTrack(copy, trackStore.selectTrackItem.line, false, 0);
+      }
     }
   }
-</script>
+</script>

src/components/item/trackItem/VideoFrame.vue

@@ -74,7 +74,7 @@
       let overFrame = Math.floor(frameCount - 1 - renderSpace * frameStep); // 不能整除时溢出帧数
       let offset = Math.max(containerWidth - Math.floor(maxFrame * width), 0); // 不够撑满canvas宽度的情况
       let marginSpace = Math.max(Math.round((offset / frameStep)), 0); // 帧数不够填满容器时的间距
-      let frameIndex = props.trackItem.offsetL + 1; // 开始下标
+      let frameIndex = props.trackItem.offsetL + 1 + props.trackItem.startIndex; // 开始下标
       for (let i = 0; i < maxFrame; i++) {
         const blobFrame = ffmpeg.getFrame(props.trackItem.name, frameIndex);
         ((index, margin) => {

src/stores/trackState.ts

@@ -14,6 +14,7 @@ interface BaseTractItem {
   frameCount: number,
   offsetL: number, // 音视频左侧裁切
   offsetR: number, // 音视频右侧裁切
+  startIndex: number // 裁切后初始位置
 }
 export interface VideoTractItem extends BaseTractItem{
   time: number,
@@ -22,7 +23,7 @@ export interface VideoTractItem extends BaseTractItem{
   cover: string,
   width: number,
   height: number,
-  fps: number
+  fps: number,
 }
 
 export interface AudioTractItem extends BaseTractItem{
@@ -159,7 +160,6 @@ export const useTrackState = defineStore('trackState', () => {
     selectTrackItem.index = 0;
   }
   function selectTrackById(id: string) {
-    console.log(id);
     trackList.forEach((item, index) => {
         item.list.forEach((trackItem, trackIndex) => {
           if (trackItem.id === id) {

src/utils/storeUtil.ts

@@ -7,7 +7,7 @@ import { getId } from '@/utils/common';
  * @param startFrame 当前播放指针位置
  * */
 export function formatTrackItemData(itemData: Record<string, any>, startFrame: number): TrackItem {
-    let { time = 2000, type, frameCount, offsetL = 0, offsetR = 0, start = 0, end = 0, id = getId() } = itemData;
+    let { time = 2000, type, frameCount, offsetL = 0, offsetR = 0, start = 0, end = 0, id = getId(), startIndex = 0 } = itemData;
     if (type === 'video') {
         time = frameCount ? parseInt(`${frameCount / baseFps * 1000}`) : time;
     } else {
@@ -24,7 +24,8 @@ export function formatTrackItemData(itemData: Record<string, any>, startFrame: n
         offsetL,
         offsetR,
         time,
-        frameCount
+        frameCount,
+        startIndex
     };
     return trackItemData as TrackItem;
 }