158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<template>
|
||
<section class="sealDrawer">
|
||
<slot name="tools"/>
|
||
<div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
|
||
<canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
|
||
@mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
|
||
@touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
|
||
<AiBottomBtn v-if="isVertical">
|
||
<div flex>
|
||
<div class="fill text reset" @click.stop="handleClean">重写</div>
|
||
<div class="fill text" @click.stop="submit">提交</div>
|
||
</div>
|
||
</AiBottomBtn>
|
||
<template v-else>
|
||
<div class="resetSignature left" @click.stop="handleClean">重写</div>
|
||
<div class="resetSignature" @click.stop="submit">提交</div>
|
||
</template>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "sealDrawer",
|
||
appName: "签名",
|
||
props: {
|
||
placeholder: {type: String, default: "请在此处清晰书写你的签名"},
|
||
},
|
||
data() {
|
||
return {
|
||
drawing: false,//判断是否处于绘画中
|
||
drawer: {},
|
||
drawPlaceholder: true,
|
||
isVertical: true
|
||
}
|
||
},
|
||
watch: {
|
||
drawing() {
|
||
this.drawPlaceholder = false
|
||
}
|
||
},
|
||
mounted() {
|
||
window.onresize = () => {
|
||
this.isVertical = ![90, -90].includes(window.orientation)
|
||
}
|
||
this.initDrawer()
|
||
},
|
||
methods: {
|
||
initDrawer() {
|
||
this.$nextTick(() => {
|
||
let canvas = uni.createCanvasContext("drawer")
|
||
if (canvas) {
|
||
this.drawer = canvas
|
||
this.drawer.setLineWidth(3)
|
||
this.drawer.setShadow(0, 0, 2, '#333')
|
||
this.drawer.setStrokeStyle('#333')
|
||
}
|
||
})
|
||
},
|
||
handleDrawStart(e) {
|
||
this.drawing = true
|
||
const {x, y} = e.changedTouches?.[0] || {}
|
||
this.drawer?.beginPath()
|
||
this.drawer?.moveTo(x, y)
|
||
},
|
||
handleDrawEnd() {
|
||
this.drawing = false
|
||
},
|
||
handleDrawing(e) {
|
||
if (this.drawing) {
|
||
const {x, y} = e.changedTouches?.[0] || {}
|
||
// // 连接到移动的位置并上色
|
||
this.drawer.lineTo(x, y)
|
||
this.drawer.stroke()
|
||
this.drawer.draw(true)
|
||
this.drawer?.beginPath()
|
||
this.drawer?.moveTo(x, y)
|
||
}
|
||
},
|
||
handleClean() {
|
||
this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight)
|
||
this.drawer.draw()
|
||
this.drawPlaceholder = true
|
||
},
|
||
submit() {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'drawer',
|
||
quality: 1,
|
||
success: res => {
|
||
// 在H5平台下，tempFilePath 为 base64
|
||
const result = res.tempFilePath
|
||
uni.navigateBack({
|
||
success: () => {
|
||
uni.$emit("pagePicker:custom", result)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.sealDrawer {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
background: #F7F7F7;
|
||
position: relative;
|
||
|
||
#drawer {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
cursor: crosshair;
|
||
}
|
||
|
||
.resetSignature {
|
||
position: absolute;
|
||
width: 152px;
|
||
height: 64px;
|
||
background: rgba(#000, .5);
|
||
border-radius: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
right: 16px;
|
||
top: 16px;
|
||
font-size: 32px;
|
||
z-index: 2;
|
||
|
||
&.left {
|
||
right: unset;
|
||
left: 16px;
|
||
}
|
||
}
|
||
|
||
.placeholder {
|
||
pointer-events: none;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
max-width: 407px;
|
||
text-align: center;
|
||
font-size: 64px;
|
||
color: #DDDDDD;
|
||
}
|
||
|
||
::v-deep.reset {
|
||
background-color: #fff;
|
||
color: #333;
|
||
}
|
||
}
|
||
</style>
|