vue 移动端签字_vue+canvas实现移动端手写签名

本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下

个人签名

重置

确定

提 交

import { Bus } from '@/utils'

export default {

name:'personsign',

data() {

return {

stageInfo:'',

imgUrl:'',

imgUrlList:[],

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 -0

canvas.width = this.$refs.canvasHW.offsetWidth - 0

this.canvasTxt = canvas.getContext('2d')

this.canvasTxt.lineWidth = 4

this.stageInfo = canvas.getBoundingClientRect()

},

methods: {

goBack(){

this.$router.go(-1)

// session.clear()

},

//mobile

touchStart(ev) {

ev = ev || event

ev.preventDefault()

if (ev.touches.length == 1) {

let obj = {

x: ev.targetTouches[0].clienX,

y: ev.targetTouches[0].clientY,

}

this.startX = obj.x

this.startY = obj.y

this.can