【uniapp】使用写字板，实现手写签名直接使用版

需求

用户需在 APP 或 小程序 使用手写的方式签字或签名

效果图片 

实现方式

1. 封装成组件调用&＃xff08;推荐&＃xff09;&＃xff0c;如需了解使用可点击前往---【封装组件版】
2. 使用的页面内直接使用&＃xff0c;目前的教程就是直接使用的&＃xff0c;未封装成组件

使用

第一步&＃xff1a;使用的页面&＃xff0c;如 index.vue



保存清除关闭
点击触发写字板


上面的canvas共绑定了3个方法

第二步&＃xff1a;定义所需数据

export default {data() {return {//绘图图像ctx: &＃39;&＃39;, //路径点集合points: [], //签名图片SignatureImg: &＃39;&＃39;}}}


第三步&＃xff1a;绑定方法&＃xff0c;书写逻辑

• createCanvas&＃xff08;&＃xff09;----  该方法主要是创建了画布
• touchstart&＃xff08;&＃xff09;----  触摸开始&＃xff0c;获取到起点
• touchmove&＃xff08;&＃xff09;----  触摸移动&＃xff0c;获取到路径点
• touchend&＃xff08;&＃xff09;----  触摸结束&＃xff0c;将未绘制的点清空防止对后续路径产生干扰
• draw&＃xff08;&＃xff09;----  绘制笔迹
• clear&＃xff08;&＃xff09;----  清空画布
• finish&＃xff08;&＃xff09;----  完成绘画并保存到本地

methods: {createCanvas() {//创建绘图对象this.ctx &＃61; uni.createCanvasContext(&＃39;mycanvas&＃39;, this);//设置画笔样式this.ctx.lineWidth &＃61; 4;this.ctx.lineCap &＃61; &＃39;round&＃39;;this.ctx.lineJoin &＃61; &＃39;round&＃39;;},touchstart(e) {let startX &＃61; e.changedTouches[0].x;let startY &＃61; e.changedTouches[0].y;let startPoint &＃61; { X: startX, Y: startY };this.points.push(startPoint);//每次触摸开始&＃xff0c;开启新的路径this.ctx.beginPath();},touchmove(e) {let moveX &＃61; e.changedTouches[0].x;let moveY &＃61; e.changedTouches[0].y;let movePoint &＃61; { X: moveX, Y: moveY };this.points.push(movePoint); //存点let len &＃61; this.points.length;if (len >&＃61; 2) {this.draw(); //绘制路径}},touchend() {this.points &＃61; [];},draw() {let point1 &＃61; this.points[0];let point2 &＃61; this.points[1];this.points.shift();this.ctx.moveTo(point1.X, point1.Y);this.ctx.lineTo(point2.X, point2.Y);this.ctx.stroke();this.ctx.draw(true);},clear() {let that &＃61; this;uni.getSystemInfo({success: function(res) {let canvasw &＃61; res.windowWidth;let canvash &＃61; res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);}});},finish() {let that &＃61; this;uni.canvasToTempFilePath({canvasId: &＃39;mycanvas&＃39;,success: function(res) {//这里的res.tempFilePath就是生成的签字图片console.log(res.tempFilePath);}});}
}


上面 finish() 方法得到的 res.tempFilePath 就是生成出来的签名&＃xff0c;可用于做余下的业务操作