vue电子签名
用vue,canvas实现
h5电子签名
。在移动端上需要在获取当前页面的绝对位置。才不会导致touch事件的偏移。代码如下:
<!--html-->
<template>
<div class="canvasBox" ref="canvasHW">
<canvas
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
ref="canvasF"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp"
></canvas>
<div class="btnBox">
<button @click="overwrite">重写</button>
<button>提交签名</button>
</div>
</div>
</template>
<script>
//js
import axios from "axios";
export default {
name: "signature",
data() {
return {
points: [],
canvasTxt: null,
stage_info: [],
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false
};
},
created() {
},
mounted() {
let canvas = this.$refs.canvasF;
canvas.height = this.$refs.canvasHW.offsetHeight - 460;//此处修改canvas高度
canvas.width = this.$refs.canvasHW.offsetWidth - 10;
this.canvasTxt = canvas.getContext("2d");
this.stage_info = canvas.getBoundingClientRect();
},
components: {
NavPublic
},
methods: {
backHome() {
window.history.back();
},
//电脑设备事件
mouseDown(ev) {
ev = ev || event;
ev.preventDefault();
console.log(ev);
if (ev) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
console.log(obj);
this.startX = obj