vue版电子签名代码
<template>
<section class="signature">
<div class="canvasBox" ref="canvasHW">
<span v-if="showTxt" class="txt">请签名</span>
<canvas
@touchstart='touchStart'
@touchmove='touchMove'
@touchend='touchEnd'
ref="canvasF"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp"
>
</canvas>
<div class="btnBox">
<van-button
type="default"
@click="overwrite"
>
重写
</van-button>
<van-button
type="info"
@click="commit"
>
提交签名
</van-button>
</div>
</div>
</section>
</template>
<script>
export default {
data () {
return{
showTxt: true,
client: {},
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
isViewAutograph: this.$route.query.isViews>0,
contractSuccess: this.$route.query.contractSuccess
}
},
mounted () {
let canvas = this.$refs.canvasF
canvas.height = this.$refs.canvasHW.offsetHeight - 50
canvas.width = this.$refs.canvasHW.offsetWidth
this.canvasTxt = canvas.getContext('2d')
this.canvasRectObj = document.querySelector('.canvasBox').getBoundingClientRect();
},
methods: {
//添加图片
handleUpload(data){
this.fileUrl.push(data)
},
//电脑设备事件
mouseDown(ev){
ev = ev || event
ev.preventDefault()
console.log(ev)
if (1) {
let obj={
x: ev.offsetX,
y: ev.offsetY
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.isDown = true
// debugger
this.imgUrl = (this.$refs.canvasF && this.$refs.canvasF.toDataURL()) || ''
}
},
//移动设备事件
touchStart(ev){
ev = ev || event
ev.preventDefault()
if(ev.touches.length == 1){
let obj = {
x: ev.targetTouches[0].clientX - this.canvasRectObj.left,
y: ev.targetTouches[0].clientY - this.canvasRectObj.top
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
}
},
//电脑设备事件
mouseMove(ev){
ev = ev || event
ev.preventDefault()
if(this.isDown){
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.moveY=obj.y
this.moveX=obj.x
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
this.showTxt = false
}
},
//移动设备事件
touchMove(ev){
ev = ev||event
ev.preventDefault()
if(ev.touches.length == 1){
let obj = {
x: ev.targetTouches[0].clientX - this.canvasRectObj.left,
y: ev.targetTouches[0].clientY - this.canvasRectObj.top
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
this.showTxt = false
}
},
//电脑设备事件
mouseUp(ev){
ev = ev || event
ev.preventDefault()
if(1){
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.points.push({x: -1, y: -1})
this.isDown = false
}
},
//移动设备事件
touchEnd(ev){
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.canvasRectObj.left,
y: ev.targetTouches[0].clientY - this.canvasRectObj.top
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.points.push({x: -1, y: -1})
// debugger
this.imgUrl= (this.$refs.canvasF && this.$refs.canvasF.toDataURL()) || ''
}
},
//重写
overwrite(){
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = []
this.showTxt = true
},
//提交签名
commit(){
this.$axios({
url: API_ROOT.url + '/v1/commissionAgreement/submitSignature',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(result => {
if (result.status) {
this.$toast('签约成功');
setTimeout(() => {
location.reload();
}, 1000);
} else {
this.$toast(result.message);
}
}, response => {
this.$toast('提交签名失败，错误码(' + response + ')');
})
}
}
}
</script>
<style scoped>
.signature {
height: 100%;
padding: 4%;
overflow: hidden;
}
.canvasBox {
position: relative;
height: 100%;
}
canvas {
width: 100%;
height:calc(100% - 50px);
border:1px solid #e3e3e3;
}
.btnBox {
padding: 5px;
text-align: right;
}
.btnBox button {
width: 100px;
height: 40px;
border-radius: 4px;
}
.txt {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(90deg);
font-weight: 700;
font-size: 30px;
line-height: 1;
color: #e5e5e5;
margin-top: -55px;
margin-left: -45px;
pointer-events: none;
}
</style>