优化画笔工具
This commit is contained in:
pipipi-pikachu
parent
ec15ac8895
commit
a5ef8a940c
|
|
@ -12,20 +12,22 @@
|
|||
class="pen"
|
||||
:style="{
|
||||
left: mouse.x - penSize / 2 + 'px',
|
||||
top: mouse.y - 50 + penSize / 2 + 'px',
|
||||
top: mouse.y - 36 + penSize / 2 + 'px',
|
||||
color: color,
|
||||
}"
|
||||
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
|
||||
class="eraser"
|
||||
:style="{
|
||||
left: mouse.x - rubberSize / 2 + 'px',
|
||||
top: mouse.y - rubberSize / 2 + 'px',
|
||||
width: rubberSize + 'px',
|
||||
height: rubberSize + 'px',
|
||||
}"
|
||||
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>
|
||||
</template>
|
||||
|
||||
|
|
@ -239,7 +241,15 @@ export default defineComponent({
|
|||
z-index: 9;
|
||||
|
||||
.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>
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
<template>
|
||||
<teleport to="body">
|
||||
<WritingBoard
|
||||
ref="writingBoardRef"
|
||||
:color="writingBoardColor"
|
||||
:model="writingBoardModel"
|
||||
v-if="visible"
|
||||
/>
|
||||
</teleport>
|
||||
|
||||
<div class="writing-board-tool">
|
||||
<div class="btn" @click="writingBoardModel = 'pen'; close()">画笔</div>
|
||||
<div class="btn" @click="writingBoardModel = 'eraser'; close()">橡皮擦</div>
|
||||
<div class="btn" @click="writingBoardRef.clearCanvas(); close()">擦除所有墨迹</div>
|
||||
<div class="btn" @click="closeWritingBoard()">关闭画笔</div>
|
||||
<div class="colors">
|
||||
<div
|
||||
class="color"
|
||||
:class="{ 'active': color === writingBoardColor }"
|
||||
v-for="color in writingBoardColors"
|
||||
:key="color"
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="writingBoardColor = color; close()"
|
||||
></div>
|
||||
<teleport to="body">
|
||||
<WritingBoard
|
||||
ref="writingBoardRef"
|
||||
:color="writingBoardColor"
|
||||
:model="writingBoardModel"
|
||||
v-if="writingBoardVisible"
|
||||
/>
|
||||
</teleport>
|
||||
|
||||
<div class="tools">
|
||||
<div class="btn" @click="changePen()">画笔</div>
|
||||
<div class="btn" @click="changeEraser()">橡皮擦</div>
|
||||
<div class="btn" @click="clearCanvas()">擦除所有墨迹</div>
|
||||
<div class="btn" @click="closeWritingBoard()">关闭画笔</div>
|
||||
<div class="colors">
|
||||
<div
|
||||
class="color"
|
||||
:class="{ 'active': color === writingBoardColor }"
|
||||
v-for="color in writingBoardColors"
|
||||
:key="color"
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="changeColor(color)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,37 +36,53 @@ const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d
|
|||
|
||||
export default defineComponent({
|
||||
name: 'writing-board-tool',
|
||||
emits: ['close', 'update:visible'],
|
||||
components: {
|
||||
WritingBoard,
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const writingBoardRef = ref()
|
||||
const writingBoardVisible = ref(false)
|
||||
const writingBoardColor = ref('#e2534d')
|
||||
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')
|
||||
}
|
||||
|
||||
const closeWritingBoard = () => {
|
||||
emit('update:visible', false)
|
||||
writingBoardVisible.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
return {
|
||||
writingBoardRef,
|
||||
writingBoardVisible,
|
||||
writingBoardColors,
|
||||
writingBoardColor,
|
||||
writingBoardModel,
|
||||
changePen,
|
||||
changeEraser,
|
||||
clearCanvas,
|
||||
changeColor,
|
||||
closeWritingBoard,
|
||||
close,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -50,12 +50,9 @@
|
|||
<IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" />
|
||||
<Popover trigger="click" v-model:visible="writingBoardToolVisible">
|
||||
<template #content>
|
||||
<WritingBoardTool
|
||||
v-model:visible="writingBoardVisible"
|
||||
@close="writingBoardToolVisible = false"
|
||||
/>
|
||||
<WritingBoardTool @close="writingBoardToolVisible = false" />
|
||||
</template>
|
||||
<IconFont class="tool-btn" type="icon-edit" @click="writingBoardVisible = true" />
|
||||
<IconFont class="tool-btn" type="icon-edit" />
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +92,6 @@ export default defineComponent({
|
|||
|
||||
const slideThumbnailModelVisible = ref(false)
|
||||
|
||||
const writingBoardVisible = ref(false)
|
||||
const writingBoardToolVisible = ref(false)
|
||||
|
||||
const setSlideContentSize = () => {
|
||||
|
|
@ -233,7 +229,6 @@ export default defineComponent({
|
|||
execNext,
|
||||
slideThumbnailModelVisible,
|
||||
turnSlideToIndex,
|
||||
writingBoardVisible,
|
||||
writingBoardToolVisible,
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue