feat: 添加视频绘制

src/components/player/CanvasPlayer.vue

@@ -2,6 +2,7 @@
 import { fabric } from 'fabric'
 import { onMounted, ref } from 'vue'
 import Logo from '~/assets/github.svg'
+
 defineProps<{
   msg: string
 }>()
@@ -18,10 +19,17 @@ function initCanvas() {
   resizePlayer()
   canvas.on('mouse:down', canvasOnMouseDown)
   ctx = canvas.getContext()
-  drawImage()
+  drawElements()
+}
+
+function drawElements() {
+  drawStaticElements()
+  drawVideo()
+  canvas.renderAll()
 }
 
-function drawImage() {
+// 绘制图片
+function drawStaticElements() {
   // 绘制 svg
   fabric.loadSVGFromURL(Logo, (objects, options) => {
     const obj = fabric.util.groupSVGElements(objects, options)
@@ -34,7 +42,7 @@ function drawImage() {
     })
     canvas.add(obj)
   })
-  // 绘制文字
+  // 添加文字
   const text = new fabric.Text('开发中...', {
     left: 100,
     top: 100,
@@ -44,6 +52,40 @@ function drawImage() {
   canvas.add(text)
 }
 
+// 绘制视频
+function drawVideo() {
+  const video = document.createElement('video')
+  video.src = 'https://assets.fedtop.com/picbed/movie.mp4'
+
+  video.autoplay = true
+  video.loop = true
+  // 不静音就无法在未点击的情况下自动播放
+  video.muted = true
+
+  video.addEventListener('loadedmetadata', () => {
+    // 视频源宽高
+    video.width = video.videoWidth
+    video.height = video.videoHeight
+    video.play()
+
+    const videoEl = new fabric.Image(video, {
+      left: canvas.width! / 2 - video.width! / 2,
+      top: canvas.height! / 2 - video.height! / 2,
+      angle: 0,
+      originX: 'left',
+      originY: 'top'
+    })
+    canvas.add(videoEl)
+    continuouslyRepaint()
+  })
+}
+
+// 持续重绘
+function continuouslyRepaint() {
+  canvas.renderAll()
+  fabric.util.requestAnimFrame(continuouslyRepaint)
+}
+
 function resizePlayer() {
   const width = container.value!.clientWidth
   const height = container.value!.clientHeight