【微信小程序canvas】实现小程序手写板用户签名(附代码)
工作中公司业务需要的微信小程序用户签字功能
先看效果图：
demo
wxml
<view class="wrapper"> <view class="handBtn"> <button catchtap="retDraw" class="delBtn">重写</button> <button catchtap="subCanvas" class="subBtn">完成</button> </view> <view class="handCenter"> <canvas class="handWriting" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" bindtap="mouseDown" canvas-id="handWriting"> </canvas> </view> <view class="handRight"> <view class="handTitle">手写板</view> </view></view>
js
data
page({
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 < this.data.cutArea.top) { this.data.cutArea.top = point.y;
} if (point.y < 0) this.data.cutArea.top = 0; if (point.x > 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 < this.data.cutArea.left) { this.data.cutArea.left = point.x;
} if (point.x < 0) this.data.cutArea.left = 0; 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
// })
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: []
})
},wxss
page { 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
随时随地看视频
