feat: 记录放映画笔墨迹（#90）

src/components/WritingBoard.vue

@@ -74,6 +74,10 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{
+  (event: 'end'): void
+}>()
+
 let ctx: CanvasRenderingContext2D | null = null
 const writingBoardRef = ref<HTMLElement>()
 const canvasRef = ref<HTMLCanvasElement>()
@@ -283,12 +287,14 @@ const handleMousemove = (e: MouseEvent | TouchEvent) => {
 const handleMouseup = () => {
   if (!isMouseDown) return
   isMouseDown = false
+  emit('end')
 }
 
 // 清空画布
 const clearCanvas = () => {
   if (!ctx || !canvasRef.value) return
   ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  emit('end')
 }
 
 // 获取 DataURL
@@ -298,11 +304,20 @@ const getImageDataURL = () => {
 
 // 设置 DataURL（绘制图片到 canvas）
 const setImageDataURL = (imageDataURL: string) => {
-  const img = new Image()
-  img.src = imageDataURL
-  img.onload = () => {
-    if (!ctx) return
-    ctx.drawImage(img, 0, 0)
+  if (!ctx || !canvasRef.value) return
+  
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+
+  if (imageDataURL) {
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.globalAlpha = 1
+
+    const img = new Image()
+    img.src = imageDataURL
+    img.onload = () => {
+      ctx!.drawImage(img, 0, 0)
+      updateCtx()
+    }
   }
 }
 

src/utils/database.ts

@@ -3,6 +3,11 @@ import { databaseId } from '@/store/main'
 import { Slide } from '@/types/slides'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 
+export interface writingBoardImg {
+  id: string
+  dataURL: string
+}
+
 export interface Snapshot {
   index: number
   slides: Slide[]
@@ -38,13 +43,16 @@ export const deleteDiscardedDB = async () => {
 
 class PPTistDB extends Dexie {
   public snapshots: Dexie.Table<Snapshot, number>
+  public writingBoardImgs: Dexie.Table<writingBoardImg, number>
 
   public constructor() {
     super(`${databaseNamePrefix}_${databaseId}_${new Date().getTime()}`)
     this.version(1).stores({
-      snapshots: '++id'
+      snapshots: '++id',
+      writingBoardImgs: '++id',
     })
     this.snapshots = this.table('snapshots')
+    this.writingBoardImgs = this.table('writingBoardImgs')
   }
 }
 

src/views/Screen/WritingBoardTool.vue

@@ -11,6 +11,7 @@
         :color="writingBoardColor" 
         :blackboard="blackboard" 
         :model="writingBoardModel"
+        @end="hanldeWritingEnd()"
       />
     </div>
 
@@ -48,7 +49,10 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, StyleValue } from 'vue'
+import { PropType, ref, StyleValue, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '@/store'
+import { db } from '@/utils/database'
 import WritingBoard from '@/components/WritingBoard.vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']
@@ -77,6 +81,8 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
+const { currentSlide } = storeToRefs(useSlidesStore())
+
 const writingBoardRef = ref<typeof WritingBoard>()
 const writingBoardColor = ref('#e2534d')
 const writingBoardModel = ref<WritingBoardModel>('pen')
@@ -101,6 +107,24 @@ const changeColor = (color: string) => {
 const closeWritingBoard = () => {
   emit('close')
 }
+
+// 打开画笔工具或切换页面时，将数据库中存储的墨迹绘制到画布上
+watch(currentSlide, () => {
+  db.writingBoardImgs.where('id').equals(currentSlide.value.id).toArray().then(ret => {
+    const currentImg = ret[0]
+    writingBoardRef.value!.setImageDataURL(currentImg?.dataURL || '')
+  })
+}, { immediate: true })
+
+// 每次绘制完成后将绘制完的图片更新到数据库
+const hanldeWritingEnd = () => {
+  const dataURL = writingBoardRef.value!.getImageDataURL()
+  db.writingBoardImgs.where('id').equals(currentSlide.value.id).toArray().then(ret => {
+    const currentImg = ret[0]
+    if (currentImg) db.writingBoardImgs.update(currentImg, { dataURL })
+    else db.writingBoardImgs.add({ id: currentSlide.value.id, dataURL })
+  })
+}
 </script>
 
 <style lang="scss" scoped>