wip: 完善canvas 内部逻辑

Author: wangrongding

src/components/player/CanvasPlayer.vue

@@ -25,7 +25,7 @@ let clipboard: fabric.Object | null = null
 const menuList = [
   { key: 'flipX', shortkey: '⌘+C', text: '复制', callback: onCopy },
   { key: 'flipX', shortkey: '⌘+V', text: '粘贴', callback: onPaste },
-  { key: 'flipX', shortkey: 'Del', text: '删除', callback: deleteElement },
+  { key: 'flipX', shortkey: 'Del', text: '删除', callback: onDelete },
   { key: 'flipY', shortkey: '⌘+]', text: '上移一层', callback: () => setElementLayer('up') },
   { key: 'flipY', shortkey: '⌘+[', text: '下移一层', callback: () => setElementLayer('down') },
   { key: 'flipY', shortkey: '', text: '置于顶层', callback: () => {} },
@@ -37,6 +37,7 @@ const menuList = [
 
 emitter.on('element:copy', onCopy)
 emitter.on('element:paste', onPaste)
+emitter.on('element:delete', onDelete)
 watch(playStatus, (v) => video[v ? 'play' : 'pause']())
 
 // 初始化画布
@@ -78,8 +79,9 @@ function drawElements() {
 }
 
 // 删除元素
-function deleteElement() {
-  const activeObject = canvas.getActiveObject()
+// BUG 为啥删不了
+function onDelete(obj: fabric.Object) {
+  const activeObject = obj || canvas.getActiveObject()
   if (!activeObject) return
   canvas.remove(activeObject)
   canvas.requestRenderAll()
@@ -155,55 +157,6 @@ function continuouslyRepaint() {
   fabric.util.requestAnimFrame(continuouslyRepaint)
 }
 
-// 初始化控件
-// TODO 需要根据不同的元素类型，定制不同的控件功能以及显示
-function initControls() {
-  // 修改控件显示
-  fabric.Object.prototype.setControlsVisibility({
-    mt: false, // 上边裁剪
-    mb: false, // 下边裁剪
-    ml: false, // 左侧裁剪
-    mr: true, // 右侧裁剪
-    bl: true, // 左下角缩放
-    br: true, // 右下角缩放
-    tl: true, // 左上角缩放
-    tr: true, // 右上角缩放
-    mtr: true // 旋转
-  })
-  // 修改控件颜色
-  fabric.Object.prototype.set({
-    borderColor: '#fff', // 控制边框颜色
-    cornerColor: '#fff', // 控制控件颜色
-    cornerStrokeColor: '#fff', // 控制控件边框颜色
-    cornerSize: 10, // 控制控件大小
-    cornerStyle: 'circle', // 控制控件形状
-    transparentCorners: false // 控制控件是否透明
-  })
-  // 修改所有图片类型的 mr 控件的 actionHandler
-  fabric.Object.prototype.controls.mr.actionHandler = (eventData, transform, x, y) => {
-    const target = transform.target as fabric.Transform['target'] & {
-      _originalElement: HTMLImageElement
-    }
-    const originWidth = target._originalElement.width
-    const originHeight = target._originalElement.height
-    // 这里应该有个原始大小的获取方法
-    // const originSize = xxxx.getOriginalSize()
-    // 右侧裁剪
-    const w = target.width! * target.scaleX!
-    const h = target.height! * target.scaleY!
-    const newWidth = x - target.left!
-    // 限制最大,最小宽
-    if (x < target.left! || newWidth < 50) return false
-    if (newWidth > originWidth) return false
-    target.set({
-      width: newWidth
-    })
-    target.setCoords()
-    canvas.requestRenderAll()
-    return true
-  }
-}
-
 // TODO 需完善窗口大小变化时，画布保持当前宽高比进行缩放
 function resizePlayer() {
   const width = container.value!.clientWidth
@@ -302,6 +255,7 @@ function flip(flipType: 'x' | 'y') {
 }
 
 // 以元素的中心旋转 90°
+// BUG 未拖动元素时，旋转会导致元素偏移
 function rotate() {
   const activeObject = canvas.getActiveObject()
   if (!activeObject) return
@@ -336,6 +290,12 @@ function initContextMenu(e: fabric.IEvent<MouseEvent>) {
   }
 }
 
+/**
+ * 需要在初始化时，设置 fireMiddleClick: true
+ * 左键：button 的值为 1
+ * 中键（也就是点击滚轮），button 的值为 2
+ * 右键：button 的值为 3
+ */
 function canvasOnMouseDown(e: fabric.IEvent<MouseEvent>) {
   switch (e.button) {
     case 1:
@@ -353,8 +313,6 @@ function canvasOnMouseDown(e: fabric.IEvent<MouseEvent>) {
 onMounted((): void => {
   // 初始化画布
   initCanvas()
-  // 初始化控件
-  initControls()
 
   // oncopy事件禁用复制;
   document.oncopy = onCopy

src/components/player/ContextMenu.vue

@@ -5,7 +5,7 @@ type Menu = {
   key: string // key
   text: string // 文本
   shortkey?: string // 快捷键
-  callback: () => void // 回调
+  callback: Function // 回调
 }
 
 defineProps<{ menuList: Menu[] }>()

src/components/right-panel/RightPanel.vue

@@ -1,33 +1,32 @@
 <script setup lang="ts">
+import type { fabric } from 'fabric'
+import { storeToRefs } from 'pinia'
+import { IconDelete } from '~/assets/icons/index'
+import { usePlayerStore } from '~/stores/player'
 import emitter from '~/utils/bus'
 
-function copy() {
-  emitter.emit('element:copy')
-}
-function paste() {
-  emitter.emit('element:paste')
+const playerStore = usePlayerStore()
+const { elementList } = storeToRefs(playerStore)
+
+function onDelete(item: fabric.Object) {
+  emitter.emit('element:delete', item)
 }
 </script>
 <template>
-  <div class="right-panel w-[400px] bg-[#272836] flex justify-between">
-    <div class="p-8">
-      <!-- Open the modal using ID.showModal() method -->
-      <button class="btn btn-sm" onclick="testModal.showModal()">open modal</button>
-      <dialog id="testModal" class="modal">
-        <div class="modal-box">
-          <h3 class="font-bold text-lg">Hello!</h3>
-          <p class="py-4">Press ESC key or click the button below to close</p>
-          <div class="modal-action">
-            <form method="dialog">
-              <!-- if there is a button in form, it will close the modal -->
-              <button class="btn">Close</button>
-            </form>
-          </div>
-        </div>
-      </dialog>
+  <div class="right-panel w-[400px] bg-[#272836] flex justify-between text-white">
+    <div class="p-4 w-full">
+      <p class="">Elements:</p>
       <div class="my-4 flex flex-col gap-4">
-        <button class="btn btn-sm" @click="copy">Copy Selected Objects</button>
-        <button class="btn btn-sm" @click="paste">Paste Selected Objects</button>
+        <div
+          class="flex justify-between border border-[#3b3b4f] p-2 items-center rounded-md"
+          v-for="(item, index) in elementList"
+          :key="index"
+        >
+          <p class="leading-[16px] h-[16px] m-0 p-0">{{ item.type }} - {{ index + 1 }}</p>
+          <button class="btn btn-sm btn-error" @click="onDelete(item)">
+            <IconDelete fill="white" />
+          </button>
+        </div>
       </div>
     </div>
     <div class="w-[60px] bg-[#1c1c26] p-8"></div>

src/stores/player.ts

@@ -1,3 +1,4 @@
+import type { fabric } from 'fabric'
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 
@@ -12,10 +13,12 @@ export const usePlayerStore = defineStore('playerStore', () => {
   const playList = ref<string[]>([])
   // 轨道数
   const trackCount = computed(() => playList.value.length)
+  // 元素列表
+  const elementList = ref<fabric.Object[]>([])
 
   const currentTime = ref<number>(0)
 
   const duration = ref<number>(0)
 
-  return { playStatus, togglePlay, playList, trackCount, currentTime, duration }
+  return { playStatus, togglePlay, playList, trackCount, currentTime, duration, elementList }
 })

src/utils/index.ts

@@ -1,3 +1,55 @@
+interface GetThumbnailBySeekOptions {
+  url: string // 视频地址
+  interval: number // 间隔多少秒抽一帧
+  clipStart?: number // 裁剪开始时间
+  clipEnd?: number // 裁剪结束时间
+}
+// 通过 video + canvas 对视频进行抽帧
+export async function getThumbnailBySeek(options: GetThumbnailBySeekOptions) {
+  const { url, interval, clipStart, clipEnd } = options
+  const video = document.createElement('video')
+  // video.src = 'https://assets.fedtop.com/picbed/movie.mp4'
+  video.src = url
+  video.crossOrigin = 'anonymous' // 跨域, 防止污染
+  video.preload = 'auto' // 不加会导致黑屏
+  video.muted = true
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')!
+  const thumbnails = []
+  let clipDuration = 0
+  if (clipEnd && clipStart) clipDuration = clipEnd - clipStart
+  video.currentTime = clipStart || 0
+
+  const generateThumbnail = () => {
+    // currentTime = parseFloat(currentTime.toFixed(4))
+    if (video.currentTime < video.duration) {
+      // 间隔
+      const gap = (clipDuration || video.duration) / interval
+      // 跳转到指定时间，触发seeked事件
+      video.currentTime += gap
+    } else {
+      video.removeEventListener('seeked', seekedHandler)
+    }
+  }
+
+  const seekedHandler = () => {
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+    canvas.toBlob((blob) => {
+      if (!blob) return
+      const url = URL.createObjectURL(blob)
+      thumbnails.push({ img: url, ts: video.currentTime })
+      generateThumbnail()
+    })
+  }
+
+  video.addEventListener('seeked', seekedHandler)
+  video.addEventListener('loadeddata', async () => {
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+    generateThumbnail()
+  })
+}
+
 export function formatSeconds(seconds: number) {
   seconds = Math.floor(seconds)
   const hours = Math.floor(seconds / 3600)