【微信小程序canvas】实现小程序手写板用户签名(附代码)

工作中公司业务需要的微信小程序用户签字功能

先看效果图：

demo

wxml

重写

完成

bindtouchend="uploadScaleEnd" bindtap="mouseDown" canvas-id="handWriting">

手写板

js

datapage({

data: {

canvasName: 'handWriting',

ctx: '',

canvasWidth: 0,

canvasHeight: 0,

transparent: 1, // 透明度

selectColor: 'black',

lineColor: '#1A1A1A', // 颜色

lineSize: 1.5,  // 笔记倍数

lineMin: 0.5,   // 最小笔画半径

lineMax: 4,     // 最大笔画半径

pressure: 1,     // 默认压力

smoothness: 60,  //顺滑度，用60的距离来计算速度

currentPoint: {},

currentLine: [],  // 当前线条

firstTouch: true, // 第一次触发

radius: 1, //画圆的半径

cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域

bethelPoint: [],  //保存所有线条 生成的贝塞尔点；

lastPoint: 0,

chirography: [], //笔迹

currentChirography: {}, //当前笔迹

linePrack: [], //划线轨迹 , 生成线条的实际点

}

})

初始化page({

onLoad () {    let canvasName = this.data.canvasName    let ctx = wx.createCanvasContext(canvasName)    this.setData({      ctx: ctx

})    var query = wx.createSelectorQuery();

query.select('.handCenter').boundingClientRect(rect => {query.select('.handCenter').boundingClientRect(rect => {          this.setData({this.setData({            canvasWidth: rect.width,canvasWidth: rect.width,            canvasHeight: rect.heightcanvasHeight: rect.height

})})

}).exec(); }).exec();

}, },

})

事件函数

笔迹开始// 笔迹开始

uploadScaleStart (e) {    if (e.type != 'touchstart') return false;    let ctx = this.data.ctx;

ctx.setFillStyle(this.data.lineColor);  // 初始线条设置颜色

ctx.setGlobalAlpha(this.data.transparent);  // 设置半透明

let currentPoint = {      x: e.touches[0].x,      y: e.touches[0].y

}    let currentLine = this.data.currentLine;

currentLine.unshift({      time: new Date().getTime(),      dis: 0,      x: currentPoint.x,      y: currentPoint.y

})    this.setData({

currentPoint,      // currentLine

})    if (this.data.firstTouch) {      this.setData({        cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x },        firstTouch: false

})

}    this.pointToLine(currentLine);

},

笔迹移动// 笔迹移动

uploadScaleMove (e) {    if (e.type != 'touchmove') return false;    if (e.cancelable) {      // 判断默认行为是否已经被禁用

if (!e.defaultPrevented) {

e.preventDefault();

}

}    let point = {      x: e.touches[0].x,      y: e.touches[0].y

}    //测试裁剪

if (point.y

}    if (point.y  this.data.cutArea.right) {      this.data.cutArea.right = point.x;

}    if (this.data.canvasWidth - point.x <= 0) {      this.data.cutArea.right = this.data.canvasWidth;

}    if (point.y > this.data.cutArea.bottom) {      this.data.cutArea.bottom = point.y;

}    if (this.data.canvasHeight - point.y <= 0) {      this.data.cutArea.bottom = this.data.canvasHeight;

}    if (point.x

}    if (point.x

})    let currentLine = this.data.currentLine

currentLine.unshift({      time: new Date().getTime(),      dis: this.distance(this.data.currentPoint, this.data.lastPoint),      x: point.x,      y: point.y

})    // this.setData({

//   currentLine

// })

this.pointToLine(currentLine);

},

笔迹结束// 笔迹结束

uploadScaleEnd (e) {    if (e.type != 'touchend') return 0;    let point = {      x: e.changedTouches[0].x,      y: e.changedTouches[0].y

}    this.setData({      lastPoint: this.data.currentPoint,      currentPoint: point

})    let currentLine = this.data.currentLine

currentLine.unshift({      time: new Date().getTime(),      dis: this.distance(this.data.currentPoint, this.data.lastPoint),      x: point.x,      y: point.y

})    // this.setData({

//   currentLine

// })

if (currentLine.length > 2) {      var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;      //$("#info").text(info.toFixed(2));

}    //一笔结束，保存笔迹的坐标点，清空，当前笔迹

//增加判断是否在手写区域；

this.pointToLine(currentLine);    var currentChirography = {      lineSize: this.data.lineSize,      lineColor: this.data.lineColor

};    var chirography = this.data.chirography

chirography.unshift(currentChirography);    this.setData({

chirography

})    var linePrack = this.data.linePrack

linePrack.unshift(this.data.currentLine);    this.setData({

linePrack,      currentLine: []

})

},

wxsspage {  background: #fbfbfb;  height: auto;  overflow: hidden;

}.wrapper {  width: 100%;  height: 95vh;  margin: 30rpx 0;  overflow: hidden;  display: flex;  align-content: center;  flex-direction: row;  justify-content: center;  font-size: 28rpx;

}.handWriting {  background: #fff;  width: 100%;  height: 95vh;

}.handRight {  display: inline-flex;  align-items: center;

}.handCenter {  border: 4rpx dashed #e9e9e9;  flex: 5;  overflow: hidden;  box-sizing: border-box;

}.handTitle {  transform: rotate(90deg);  flex: 1;  color: #666;

}.handBtn button {  font-size: 28rpx;

}.handBtn {  height: 95vh;  display: inline-flex;  flex-direction: column;  justify-content: space-between;  align-content: space-between;  flex: 1;

}.delBtn {  position: absolute;  top: 550rpx;  left: 0rpx;  transform: rotate(90deg);  color: #666;

}.delBtn image {  position: absolute;  top: 13rpx;  left: 25rpx;

}

结语

详细项目代码handwriting-weapp(微信小程序原生canvas用户签字手写板，后续更新计划组件化、优化渲染逻辑、增加功能，欢迎start 和 PR)

作者：老夫很性感

链接：https://www.jianshu.com/p/84dcc0adfe44