前言

目前做的一个项目需要用到电子签名的功能，网上其实也挺多这种类型的电子签名，但是带有笔锋效果的确比较少，所以参考了一些博客，总结成了这个功能，在此分享给大家。

效果展示

代码展示

触摸开始（touchstart）

touchstart(e) {if (!this.isInit) {this.isInit = truethis.autographClick(1);}let startX = e.changedTouches[0].xlet startY = e.changedTouches[0].ylet startPoint = {X: startX,Y: startY}this.points.push(startPoint)//每次触摸开始，开启新的路径// console.log(this.points, "point11")this.canvasCtx.beginPath()
}

获取最开始的坐标，x和y，然后将他们存起来，注意每次触摸后都应该调用 beginPath()。

触摸移动（touchmove）

touchmove(e) {let moveX = e.changedTouches[0].xlet moveY = e.changedTouches[0].ylet movePoint = {X: moveX,Y: moveY,T: new Date().getTime(),W: (MAX_LINE_WIDTH + MIN_LINE_WIDTH) / 2}this.points.push(movePoint) //存点if (lastPoint) {// console.log(lastPoint.T, movePoint.T)movePoint.W = this.calcLineWidth(movePoint); // 重新赋值宽度，覆盖默认值 this.canvasCtx.beginPath();this.canvasCtx.strokeStyle = '#000';this.canvasCtx.lineCap = 'round';this.canvasCtx.lineJoin = 'round';this.canvasCtx.lineWidth = movePoint.W;this.canvasCtx.moveTo(lastPoint.X, lastPoint.Y);this.canvasCtx.lineTo(movePoint.X, movePoint.Y);this.canvasCtx.stroke();}lastPoint = movePoint; // 结束前保存当前点为上一点let len = this.points.lengthif (len >= 2) {this.draw() //绘制路径}}

获取移动的坐标，将坐标、时间和画笔宽度进行存点。

笔锋效果(calcLineWidth)

const MAX_V = 1; // 最大书写速度
const MIN_V = 0; // 最小书写速度
const MAX_LINE_WIDTH = 16; // 最大笔画宽度
const MIN_LINE_WIDTH = 4; // 最小笔画宽度
const MAX_LINE_DIFF = .03; // 两点之间笔画宽度最大差异
let context = null; // canvas上下文
let lastPoint = null; // 包含上一点笔画信息的对象calcLineWidth(movePoint) {let consuming = movePoint.T - lastPoint.T; // 两点之间耗时if (!consuming) return lastPoint.W; // 如果当前点用时为0，返回上点的宽度。// 当前点的最大宽度let maxWidth = Math.min(MAX_LINE_WIDTH, lastPoint.W * (1 + MAX_LINE_DIFF)); // 当前点的最小宽度，变细时速度快所以宽度变化要稍快let minWidth = Math.max(MIN_LINE_WIDTH, lastPoint.W * (1 - MAX_LINE_DIFF * 3)); // 两点之间距离let distance = Math.sqrt(Math.pow(movePoint.X - lastPoint.X, 2) + Math.pow(movePoint.Y - lastPoint.Y, 2)); /*当前点速度*/let speed = Math.max(Math.min(distance / consuming, MAX_V), MIN_V); /* 当前点宽度 */let lineWidth = Math.max(Math.min(MAX_LINE_WIDTH * (1 - speed / MAX_V), maxWidth), minWidth); return lineWidth;
}

在绘制的过程，通过两点之间的距离、速度计算出宽度，再进行绘制，也就是笔锋的效果。可以自己调节初始值，设置成自己最想要的效果。

绘制笔迹（draw）

draw() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.canvasCtx.moveTo(point1.X, point1.Y)this.canvasCtx.lineTo(point2.X, point2.Y)this.canvasCtx.stroke()this.canvasCtx.draw(true)this.hasSign = true
}

为保证笔迹实时显示，必须在移动的同时绘制笔迹；
为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)；
将上一次的终点作为下一次绘制的起点（即清除第一个点）。

触摸结束（touchend）

touchend() {this.points = []this.canvasCtx.draw(true)lastPoint = null;
}

最后别忘记再每次结束时，要进行清空。

总结

总体来说，虽然达到了效果，但是可能运行不是特别流畅，没有达到商业级的效果，还有待加强，大家可以提出自己的见解，我会参考并完善。

代码地址：https://gitee.com/Robergean/Signature
代码地址：https://gitcode.net/Robergean/signature

基于uni-app的微信小程序电子签名功能（带有笔锋）相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
基于云开发的微信小程序：个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求第一次作业第二次作业结课作业小程序开发入门开发前的准备注册微信小程序新建一个模板小程序开通云开发服务第一次作业参考资 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...
基于安卓android和微信小程序的点餐管理系统毕业设计（源码讲解）
作者简介:Java.spring.安卓Android.ssm框架.前端.后端开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.技术分享怎么做基于安卓android和微信 ...
微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...
APP、微信小程序、网页H5
APP.微信小程序.网页H5之间区别 1.APP 使用条件:苹果要去app store搜索下载,安卓需要在各应用商店搜素下载更新条件:如需要修改内容,需要通过第三方审核应用场景:适用于有较大流量, ...

基于uni-app的微信小程序电子签名功能（带有笔锋）

前言