diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue index fe7e9bbd..a31109d4 100644 --- a/src/components/WritingBoard.vue +++ b/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() const canvasRef = ref() @@ -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() + } } } diff --git a/src/utils/database.ts b/src/utils/database.ts index ea82e338..b8418955 100644 --- a/src/utils/database.ts +++ b/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 + public writingBoardImgs: Dexie.Table 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') } } diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue index 38f490ea..a66a680f 100644 --- a/src/views/Screen/WritingBoardTool.vue +++ b/src/views/Screen/WritingBoardTool.vue @@ -11,6 +11,7 @@ :color="writingBoardColor" :blackboard="blackboard" :model="writingBoardModel" + @end="hanldeWritingEnd()" /> @@ -48,7 +49,10 @@