1. 视图实现
首先我们使用canvas标签来实现视图，并且我们主要为canvas 来绑定三个事件 分别是 touchstart（触摸开始）touchmove(触摸过程)，touchend(触摸结束)。 并且在mounted 进行一个初始化。下面是代码实现 预览地址
<template>
<div class="sign-wrap">
<div class="boardBox" ref="boardBox" @touchmove.prevent>
<canvas
ref="canvas"
:width="cWidth"
:height="cHeight"
id="canvas"
@touchstart="mStart"
@touchmove="mMove"
@touchend="mEnd"
></canvas>
</div>
<div class="footer-bar">
<div class="reset" @click="clearcanvas">重写</div>
<div class="use" @click="getcanvas">使用</div>
</div>
</div>
</template>
export default {
name: "Sign",
components: {},
data() {
return {
cWidth: 1000, // 我们给一个远超屏幕大小尺寸的宽度
cHeight: 1000, // 同样给一个远超屏幕大小尺寸的高度
ctx: null,
point: {
x: 0,
y: 0,
},
};
},
mounted() {
this.ctx = this.$refs.canvas.getContext("2d"); // 二维绘图对象
this.ctx.strokeStyle = "#000"; // 初始化前面颜色颜色
},
}
2.完善对应的功能
在mStart方法中 我们记录初始位置即 X,y坐标 。同时开始绘制。 在mMove方法中我们要去记录此刻的一个坐标位置 。并且指定开始坐标，然后进行绘制自定义路线 。滑动结束我们触发ctx对象的停止绘制方法 closePath()代码如下：
methods: {
// 触摸(开始)
mStart(e) {
console.log(e)
let x = e.touches[0].clientX ,
y = e.touches[0].clientY ; // 获取触摸点在画板（canvas）的坐标
this.point.x = x;
this.point.y = y;
this.ctx.beginPath(); // 开始绘制
this.ctx.lineWidth = 7; // 设置线条宽度
this.moving = true;
},
// 滑动中...
mMove(e) {
if (this.moving) { // 确保mStart触发
let x = e.touches[0].clientX,
y = e.touches[0].clientY; // 获取触摸点在画板（canvas）的坐标
this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点，不创建线条(起始点)
this.ctx.lineTo(x, y); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
this.ctx.stroke(); // 绘制自定义路线
this.point.x = x
this.point.y = y; // 重置点坐标为上一个坐标
}
},
// 滑动结束
mEnd() {
if (this.moving) {
this.ctx.closePath(); // 停止绘制
this.moving = false; // 关闭绘制开关
}
},
}
到这里我们的 canvas 功能已经基本完成了。后续可以进行一些新的优化。以及功能叠加
3.追加清除canvas功能
//清除画布
clearcanvas() {
this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置矩阵
this.ctx.clearRect(0, 0, 1000, 1000); //给定的矩形内清除指定的像素
},
4. 获取签名内容
使用canvas的toDataURL()方法获取图片数据 这里采用的是base64传给后端。也可以转换成Blob来传,但在获取内容之前 ，我们需要判断内容是否存在，确保用户已经签名了，而不是空内容
// 判断画布内容是否为空
isCanvasEmpty(canvas) {
var blank = document.createElement("canvas"); //系统获取一个空canvas对象
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL(); //比较值相等则为空
},
//获取绘画图片
getcanvas() {
//绘画转图片
let canvas = document.getElementById("canvas");
if (this.isCanvasEmpty(canvas)) {
// alert("请绘制签名后再上传！");
this.$Message.notify({
content: "请绘制签名后再上传！",
type: "error",
//time: 5500
});
return;
}
// this.convertCanvasToImage();
// console.log(this.$refs..toDataURL("image/png"))
// 获取图片数据
this.basedata = this.$refs.canvas.toDataURL("image/png")
this.updataImg() // 上传图片给后端
}
