github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 画笔添加黑板模式

Browse Source
This commit is contained in:
pipipi-pikachu 2021-06-09 13:21:05 +08:00
parent 8dd616ecd3
commit 4412af30bb
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/WritingBoard.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div class="writing-board" ref="writingBoardRef"> <div class="writing-board" ref="writingBoardRef">
<div class="blackboard" v-if="blackboard"></div>
<canvas class="canvas" ref="canvasRef" <canvas class="canvas" ref="canvasRef"
@mousedown="$event => handleMousedown($event)" @mousedown="$event => handleMousedown($event)"
@mousemove="$event => handleMousemove($event)" @mousemove="$event => handleMousemove($event)"
@ -51,6 +53,10 @@ export default defineComponent({
type: String as PropType<'pen' | 'eraser'>, type: String as PropType<'pen' | 'eraser'>,
default: 'pen', default: 'pen',
}, },
blackboard: {
type: Boolean,
default: false,
},
}, },
setup(props) { setup(props) {
let ctx: CanvasRenderingContext2D | null = null let ctx: CanvasRenderingContext2D | null = null
@ -255,6 +261,18 @@ export default defineComponent({
z-index: 8; z-index: 8;
cursor: none; cursor: none;
} }
.blackboard {
width: 100%;
height: 100%;
background-color: #0f392b;
}
.canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.eraser, .pen { .eraser, .pen {
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;

6
src/views/Screen/WritingBoardTool.vue
View File

@ -4,6 +4,7 @@
<WritingBoard <WritingBoard
ref="writingBoardRef" ref="writingBoardRef"
:color="writingBoardColor" :color="writingBoardColor"
:blackboard="blackboard"
:model="writingBoardModel" :model="writingBoardModel"
/> />
</teleport> </teleport>
@ -18,6 +19,9 @@
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
<div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div> <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
</Tooltip> </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="colors">
<div <div
class="color" class="color"
@ -50,6 +54,7 @@ export default defineComponent({
const writingBoardRef = ref() const writingBoardRef = ref()
const writingBoardColor = ref('#e2534d') const writingBoardColor = ref('#e2534d')
const writingBoardModel = ref('pen') const writingBoardModel = ref('pen')
const blackboard = ref(false)
// 切换到画笔状态 // 切换到画笔状态
const changePen = () => { const changePen = () => {
@ -82,6 +87,7 @@ export default defineComponent({
writingBoardColors, writingBoardColors,
writingBoardColor, writingBoardColor,
writingBoardModel, writingBoardModel,
blackboard,
changePen, changePen,
changeEraser, changeEraser,
clearCanvas, clearCanvas,