From e67e3287dfd84d2f924a77482c90bc7f0f70ded7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E9=A1=B6?= <wangrongding@qq.com>
Date: Sat, 23 Mar 2024 02:09:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  3 ++
 pnpm-lock.yaml                         | 18 ++++++-
 src/components/player/CanvasPlayer.vue | 67 ++++++++++++++++++++++++++
 src/views/main-page.vue                | 21 +++++---
 4 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 src/components/player/CanvasPlayer.vue

diff --git a/package.json b/package.json
index 4f84f9b..297addc 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "fabric": "^5.3.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
@@ -34,7 +35,9 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
+    "@types/fabric": "^5.3.7",
     "@types/jsdom": "^21.1.6",
+    "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd52965..cbc00e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   fabric:
     specifier: ^5.3.0
     version: 5.3.0
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.4.2)(vue@3.4.21)
@@ -25,9 +28,15 @@ devDependencies:
   '@tsconfig/node20':
     specifier: ^20.1.2
     version: 20.1.2
+  '@types/fabric':
+    specifier: ^5.3.7
+    version: 5.3.7
   '@types/jsdom':
     specifier: ^21.1.6
     version: 21.1.6
+  '@types/lodash':
+    specifier: ^4.17.0
+    version: 4.17.0
   '@types/node':
     specifier: ^20.11.25
     version: 20.11.28
@@ -1041,6 +1050,10 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
 
+  /@types/fabric@5.3.7:
+    resolution: {integrity: sha512-Fd2oN4zg/E6X+85HbmWSpswzcu3rvDfmwtvz1SH0j2av9OFHZDRrkLQ3K16nl6w+mSflrcTfmB719I7wXkfIsw==}
+    dev: true
+
   /@types/jsdom@21.1.6:
     resolution: {integrity: sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==}
     dependencies:
@@ -1053,6 +1066,10 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/lodash@4.17.0:
+    resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
+    dev: true
+
   /@types/node@20.11.28:
     resolution: {integrity: sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==}
     dependencies:
@@ -3744,7 +3761,6 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
diff --git a/src/components/player/CanvasPlayer.vue b/src/components/player/CanvasPlayer.vue
new file mode 100644
index 0000000..0e895be
--- /dev/null
+++ b/src/components/player/CanvasPlayer.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { fabric } from 'fabric'
+import { onMounted, ref } from 'vue'
+import Logo from '~/assets/github.svg'
+defineProps<{
+  msg: string
+}>()
+let canvas: fabric.Canvas
+let ctx: CanvasRenderingContext2D
+const container = ref<HTMLElement | null>(null)
+
+function initCanvas() {
+  canvas = new fabric.Canvas('canvas', {
+    selection: true,
+    hoverCursor: 'pointer',
+    backgroundColor: '#000'
+  })
+  resizePlayer()
+  canvas.on('mouse:down', canvasOnMouseDown)
+  ctx = canvas.getContext()
+  drawImage()
+}
+
+function drawImage() {
+  // 绘制 svg
+  fabric.loadSVGFromURL(Logo, (objects, options) => {
+    const obj = fabric.util.groupSVGElements(objects, options)
+    obj.set({
+      scaleX: 5,
+      scaleY: 5,
+      left: canvas.width! / 2 - (obj.width! * 5) / 2,
+      top: canvas.height! / 2 - (obj.height! * 5) / 2,
+      angle: 0
+    })
+    canvas.add(obj)
+  })
+  // 绘制文字
+  const text = new fabric.Text('开发中...', {
+    left: 100,
+    top: 100,
+    fill: 'white',
+    fontSize: 30
+  })
+  canvas.add(text)
+}
+
+function resizePlayer() {
+  const width = container.value!.clientWidth
+  const height = container.value!.clientHeight
+  canvas.setDimensions({
+    width,
+    height
+  })
+}
+
+function canvasOnMouseDown() {}
+
+onMounted((): void => {
+  initCanvas()
+})
+</script>
+<template>
+  <div class="h-full w-full overflow-hidden" ref="container">
+    <canvas id="canvas"></canvas>
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/views/main-page.vue b/src/views/main-page.vue
index b193c65..82767af 100644
--- a/src/views/main-page.vue
+++ b/src/views/main-page.vue
@@ -1,7 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import CanvasPlayer from '~/components/player/CanvasPlayer.vue'
+
+onMounted(() => {
+  // 禁止右键菜单
+  document.oncontextmenu = () => false
+  // onselectstart事件禁用网页上选取的内容
+  document.onselectstart = () => false
+})
+</script>
 
 <template>
-  <div class="main flex h-full select-none flex-col gap-1 bg-[#161618] text-white">
+  <div class="main flex h-full flex-col gap-1 bg-[#161618] text-white">
     <!-- 头部 -->
     <header class="flex h-[50px] items-center justify-between bg-[#282c34] px-6">
       <!-- logo -->
@@ -20,7 +30,7 @@
 
     <div class="flex flex-1 gap-1">
       <!-- 左边栏 -->
-      <div class="left-box w-[400px] bg-[#282c34] p-8">
+      <div class="left-box w-[400px] min-w-[300px] bg-[#282c34] p-8">
         left-panel
         <span>( 开发中... )</span>
       </div>
@@ -29,9 +39,8 @@
       <div class="flex flex-1 flex-col gap-1">
         <div class="flex flex-1 gap-1">
           <!-- 视频画布 -->
-          <div class="flex-1 bg-[#282c34] p-8">
-            player
-            <span>( 开发中... )</span>
+          <div class="canvas-player-container flex-1 bg-[#282c34] p-8">
+            <CanvasPlayer msg="hello" />
           </div>
           <!-- 右边属性设置栏 -->
           <div class="right-panel w-[300px] bg-[#282c34] p-8">