From 4412af30bb540429c2a9b17f9dd9559204aa8893 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 9 Jun 2021 13:21:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E7=AC=94=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=BB=91=E6=9D=BF=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WritingBoard.vue       | 18 ++++++++++++++++++
 src/views/Screen/WritingBoardTool.vue |  6 ++++++
 2 files changed, 24 insertions(+)

diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 3e70ab5e..af09dc14 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="writing-board" ref="writingBoardRef">
+    <div class="blackboard" v-if="blackboard"></div>
+
     <canvas class="canvas" ref="canvasRef"
       @mousedown="$event => handleMousedown($event)"
       @mousemove="$event => handleMousemove($event)"
@@ -51,6 +53,10 @@ export default defineComponent({
       type: String as PropType<'pen' | 'eraser'>,
       default: 'pen',
     },
+    blackboard: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     let ctx: CanvasRenderingContext2D | null = null
@@ -255,6 +261,18 @@ export default defineComponent({
   z-index: 8;
   cursor: none;
 }
+.blackboard {
+  width: 100%;
+  height: 100%;
+  background-color: #0f392b;
+}
+.canvas {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 .eraser, .pen {
   pointer-events: none;
   position: fixed;
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index bfa6c826..1338322d 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -4,6 +4,7 @@
       <WritingBoard 
         ref="writingBoardRef" 
         :color="writingBoardColor" 
+        :blackboard="blackboard" 
         :model="writingBoardModel"
       />
     </teleport>
@@ -18,6 +19,9 @@
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
         <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
       </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
+        <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
+      </Tooltip>
       <div class="colors">
         <div 
           class="color" 
@@ -50,6 +54,7 @@ export default defineComponent({
     const writingBoardRef = ref()
     const writingBoardColor = ref('#e2534d')
     const writingBoardModel = ref('pen')
+    const blackboard = ref(false)
 
     // 切换到画笔状态
     const changePen = () => {
@@ -82,6 +87,7 @@ export default defineComponent({
       writingBoardColors,
       writingBoardColor,
       writingBoardModel,
+      blackboard,
       changePen,
       changeEraser,
       clearCanvas,