优化画笔工具

This commit is contained in:
pipipi-pikachu 2021-01-14 09:42:26 +08:00
parent ec15ac8895
commit a5ef8a940c
3 changed files with 66 additions and 43 deletions

View File

@ -12,20 +12,22 @@
class="pen" class="pen"
:style="{ :style="{
left: mouse.x - penSize / 2 + 'px', left: mouse.x - penSize / 2 + 'px',
top: mouse.y - 50 + penSize / 2 + 'px', top: mouse.y - 36 + penSize / 2 + 'px',
color: color, color: color,
}" }"
v-if="mouseInCanvas && model === 'pen'" v-if="mouseInCanvas && model === 'pen'"
><IconFont class="icon" :style="{ fontSize: '50px' }" type="icon-pen" /></div> ><IconFont class="icon" :style="{ fontSize: '36px' }" type="icon-pen" /></div>
<div <div
class="eraser" class="eraser"
:style="{ :style="{
left: mouse.x - rubberSize / 2 + 'px', left: mouse.x - rubberSize / 2 + 'px',
top: mouse.y - rubberSize / 2 + 'px', top: mouse.y - rubberSize / 2 + 'px',
width: rubberSize + 'px',
height: rubberSize + 'px',
}" }"
v-if="mouseInCanvas && model === 'eraser'" v-if="mouseInCanvas && model === 'eraser'"
><IconFont class="icon" :style="{ fontSize: rubberSize + 'px' }" type="icon-eraser" /></div> ><IconFont class="icon" :style="{ fontSize: rubberSize * 0.6 + 'px' }" type="icon-eraser" /></div>
</div> </div>
</template> </template>
@ -239,7 +241,15 @@ export default defineComponent({
z-index: 9; z-index: 9;
.icon { .icon {
filter: drop-shadow(2px 2px 2px #999); filter: drop-shadow(2px 2px 2px #555);
} }
} }
.eraser {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 4px solid rgba($color: #555, $alpha: .15);
color: rgba($color: #555, $alpha: .75);
}
</style> </style>

View File

@ -1,17 +1,18 @@
<template> <template>
<div class="writing-board-tool">
<teleport to="body"> <teleport to="body">
<WritingBoard <WritingBoard
ref="writingBoardRef" ref="writingBoardRef"
:color="writingBoardColor" :color="writingBoardColor"
:model="writingBoardModel" :model="writingBoardModel"
v-if="visible" v-if="writingBoardVisible"
/> />
</teleport> </teleport>
<div class="writing-board-tool"> <div class="tools">
<div class="btn" @click="writingBoardModel = 'pen'; close()">画笔</div> <div class="btn" @click="changePen()">画笔</div>
<div class="btn" @click="writingBoardModel = 'eraser'; close()">橡皮擦</div> <div class="btn" @click="changeEraser()">橡皮擦</div>
<div class="btn" @click="writingBoardRef.clearCanvas(); close()">擦除所有墨迹</div> <div class="btn" @click="clearCanvas()">擦除所有墨迹</div>
<div class="btn" @click="closeWritingBoard()">关闭画笔</div> <div class="btn" @click="closeWritingBoard()">关闭画笔</div>
<div class="colors"> <div class="colors">
<div <div
@ -20,10 +21,11 @@
v-for="color in writingBoardColors" v-for="color in writingBoardColors"
:key="color" :key="color"
:style="{ backgroundColor: color }" :style="{ backgroundColor: color }"
@click="writingBoardColor = color; close()" @click="changeColor(color)"
></div> ></div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -34,37 +36,53 @@ const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d
export default defineComponent({ export default defineComponent({
name: 'writing-board-tool', name: 'writing-board-tool',
emits: ['close', 'update:visible'],
components: { components: {
WritingBoard, WritingBoard,
}, },
props: {
visible: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) { setup(props, { emit }) {
const writingBoardRef = ref() const writingBoardRef = ref()
const writingBoardVisible = ref(false)
const writingBoardColor = ref('#e2534d') const writingBoardColor = ref('#e2534d')
const writingBoardModel = ref('pen') const writingBoardModel = ref('pen')
const close = () => { const changePen = () => {
if(!writingBoardVisible.value) writingBoardVisible.value = true
writingBoardModel.value = 'pen'
emit('close')
}
const changeEraser = () => {
writingBoardModel.value = 'eraser'
emit('close')
}
const clearCanvas = () => {
writingBoardRef.value.clearCanvas()
emit('close')
}
const changeColor = (color: string) => {
if(writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
writingBoardColor.value = color
emit('close') emit('close')
} }
const closeWritingBoard = () => { const closeWritingBoard = () => {
emit('update:visible', false) writingBoardVisible.value = false
emit('close') emit('close')
} }
return { return {
writingBoardRef, writingBoardRef,
writingBoardVisible,
writingBoardColors, writingBoardColors,
writingBoardColor, writingBoardColor,
writingBoardModel, writingBoardModel,
changePen,
changeEraser,
clearCanvas,
changeColor,
closeWritingBoard, closeWritingBoard,
close,
} }
}, },
}) })

View File

@ -50,12 +50,9 @@
<IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" /> <IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" />
<Popover trigger="click" v-model:visible="writingBoardToolVisible"> <Popover trigger="click" v-model:visible="writingBoardToolVisible">
<template #content> <template #content>
<WritingBoardTool <WritingBoardTool @close="writingBoardToolVisible = false" />
v-model:visible="writingBoardVisible"
@close="writingBoardToolVisible = false"
/>
</template> </template>
<IconFont class="tool-btn" type="icon-edit" @click="writingBoardVisible = true" /> <IconFont class="tool-btn" type="icon-edit" />
</Popover> </Popover>
</div> </div>
</div> </div>
@ -95,7 +92,6 @@ export default defineComponent({
const slideThumbnailModelVisible = ref(false) const slideThumbnailModelVisible = ref(false)
const writingBoardVisible = ref(false)
const writingBoardToolVisible = ref(false) const writingBoardToolVisible = ref(false)
const setSlideContentSize = () => { const setSlideContentSize = () => {
@ -233,7 +229,6 @@ export default defineComponent({
execNext, execNext,
slideThumbnailModelVisible, slideThumbnailModelVisible,
turnSlideToIndex, turnSlideToIndex,
writingBoardVisible,
writingBoardToolVisible, writingBoardToolVisible,
} }
}, },