一、先看效果
小程序canvas电子签名
二、文档
微信小程序canvas 组件文档
微信小程序canvas API文档
H5Canvas文档
三、分析
1、初始话Canvas容器
2、Canvas触摸事件，bindtouchstart（手指触摸动作开始）、bindtouchmove（手指触摸后移动）、bindtouchend（手指触摸动作结束）、bindtouchcancel（手指触摸动作被打断，如来电提醒，弹窗）
3、记录每次从开始到结束的路径段
4、清除、撤销
四、代码分析
1、页面的布局、Canvas容器的初始化
1、先将屏幕横过来，index.json配置文件，“pageOrientation”: “landscape”
2、wx.getSystemInfoSync() 获取可使用窗口的宽高，赋值给Canvas画布（注意若存在按钮区域、屏幕安全区之类的，需要减去）
// 获取可使用窗口的宽高，赋值给Canvas（宽高要减去上下左右padding的20，以及高度要减去footer区域）
wx.createSelectorQuery()
.select('.footer') // canvas获取节点
.fields({node: true, size: true}) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
.exec((res) => {
// 获取手机左侧安全区域(刘海)
const deviceInFo = wx.getSystemInfoSync()
const canvasWidth = deviceInFo.windowWidth - 20 - deviceInFo?.safeArea?.left || 0
const canvasHeight = deviceInFo.windowHeight - res[0].height - 20
console.log('canvasWidth', canvasWidth);
console.log('canvasHeight', canvasHeight);
this.setData({
deviceInFo,
canvasWidth,
canvasHeight
})
this.initCanvas('init')
})
3、通过wx.createSelectorQuery()获取到canvas节点，随即可获取到canvas的上下文实例
// 初始话Canvas画布
initCanvas() {
let ctx = null
let canvas = null
// 获取Canvas画布以及渲染上下文
wx.createSelectorQuery()
.select('#myCanvas') // canvas获取节点
.fields({node: true, size: true}) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
.exec((res) => { // 执行所有的请求。请求结果按请求次序构成数组
// Canvas 对象实例
canvas = res[0].node
// Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width;
const height = res[0].height;
// 获取设备像素比
const dpr = wx.getWindowInfo().pixelRatio;
// 初始化画布大小
canvas.width = width * dpr;
canvas.height = height * dpr;
// 画笔的颜色
ctx.fillStyle = 'rgb(200, 0, 0)';
// 指定了画笔（绘制线条）操作的线条宽度
ctx.lineWidth = 5
// 缩小/放大图像
ctx.scale(dpr, dpr)
this.setData({canvas, ctx});
})
},
2、线条的绘制
通过canva组件的触摸事件bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancel结合canvas的路径绘制的方法moveTo(x,y)、lineTo(x,y)、stroke()来实现一段线条的绘制
1、bindtouchstart手指触摸动作开始，结合moveTo(x,y) 用来设置绘图起始坐标的方法确定线段的开始坐标
// 手指触摸动作开始
bindtouchstart(event) {
let {type, changedTouches} = event;
let {x, y} = changedTouches[0];
ctx.moveTo(x, y); // 设置绘图起始坐标。
},
2、bindtouchend手指触摸动作结束，结合lineTo(x,y) 来绘制一条直线，最后stroke()渲染路径
// 手指触摸动作结束
bindtouchend(event) {
let {type, changedTouches} = event;
let {x, y} = changedTouches[0];
ctx.lineTo(x, y);
// 绘制
ctx.stroke();
},
3、但这只是一条直线段，并未实现签名所需的曲线（曲线实质上也是由无数个非常短小的直线段构成）
4、bindtouchmove事件会在手指触摸后移动时，实时返回当前状态
5、那么可否通过bindtouchmove 结合 moveTo ==> lineTo ==> stroke ==> moveTo ==> … 以上一次的结束为下一次的开始这样的方式来实时渲染直线段合并为一个近似的曲线
// 手指触摸后移动
bindtouchmove(event) {
let {type, changedTouches} = event;
let {x, y} = changedTouches[0];
// 上一段终点
ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
// 绘制
ctx.stroke();
// 下一段起点
ctx.moveTo(x, y) // 设置绘图起始坐标。
},
6、归纳封装
// 手指触摸动作开始
bindtouchstart(event) {
this.addPathDrop(event)
},
// 手指触摸后移动
bindtouchmove(event) {
this.addPathDrop(event)
},
// 手指触摸动作结束
bindtouchend(event) {
this.addPathDrop(event)
},
// 手指触摸动作被打断，如来电提醒，弹窗
bindtouchcancel(event) {
this.addPathDrop(event)
},
// 添加路径点
addPathDrop(event) {
let {ctx, historyImag, canvas} = this.data
let {type, changedTouches} = event
let {x, y} = changedTouches[0]
if(type === 'touchstart') { // 每次开始都是一次新动作
// 最开始点
ctx.moveTo(x, y) // 设置绘图起始坐标。
} else {
// 上一段终点
ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
// 绘制
ctx.stroke();
// 下一段起点
ctx.moveTo(x, y) // 设置绘图起始坐标。
}
},
3、上一步、重绘、提交
主体思路为每一次绘制完成后都通过wx.canvasToTempFilePath生成图片，并记录下来，通过canvas的drawImage方法将图片绘制到 canvas 上
五、完整代码
1、inde.json
{
"navigationBarTitleText": "电子签名",
"backgroundTextStyle": "dark",
"pageOrientation": "landscape",
"disableScroll": true,
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-toast": "@vant/weapp/toast/index"
}
}
2、index.wxml
<!-- index.wxml -->
<view>
<view class="content" style="padding-left: {{deviceInFo.safeArea.left || 10}}px">
<view class="canvas_box">
<!-- 定位到canvas画布的下方作为背景 -->
<view class="canvas_tips">
签字区
</view>
<!-- canvas画布 -->
<canvas class="canvas_content" type="2d" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' id="myCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" bindtouchend="bindtouchend" bindtouchcancel="bindtouchcancel"></canvas>
</view>
</view>
<!-- footer -->
<view class="footer" style="padding-left: {{deviceInFo.safeArea.left}}px">
<van-button plain class="item" block icon="replay" bind:click="overwrite" type="warning">清除重写</van-button>
<van-button plain class="item" block icon="revoke" bind:click="prev" type="danger">撤销</van-button>
<van-button class="item" block icon="passed" bind:click="confirm" type="info">提交</van-button>
</view>
</view>
<!-- 提示框组件 -->
<van-toast id="van-toast" />
2、index.less
.content {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px;
.canvas_box {
width: 100%;
height: 100%;
background-color: #E8E9EC;
position: relative;
// 定位到canvas画布的下方作为背景
.canvas_tips {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 80px;
color: #E2E2E2;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
// .canvas_content {
// width: 100%;
// height: 100%;
// }
}
}
// 底部按钮
.footer {
box-sizing: border-box;
padding: 20rpx 0;
z-index: 2;
background-color: #ffffff;
text-align: center;
position: fixed;
width: 100%;
box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
left: 0;
bottom: 0;
display: flex;
.item {
flex: 1;
margin: 0 10rpx;
}
.scan {
width: 80rpx;
margin: 0 10rpx;
}
.moreBtn {
width: 150rpx
}
}
3、index.js
// index.js
// 获取应用实例
// import request from "../../request/index";
import Toast from '@vant/weapp/toast/toast';
const app = getApp()
Page({
data: {
// expertId: '', // 专家id
deviceInFo: {}, // 设备信息
canvasWidth: '', // 画布宽
canvasHeight: '', // 画布高
canvas: null, // Canvas 对象实例
ctx: null, // Canvas 对象上下文实例
historyImag: [], // 历史记录，每一笔动作完成后的图片数据，用于每一次回退上一步是当作图片绘制到画布上
fileList: [], // 签名后生成的附件
initialCanvasImg: '', // 初始画布图,解决非ios设备重设置宽高不能清空画布的问题
},
onReady() {
// 获取可使用窗口的宽高，赋值给Canvas（宽高要减去上下左右padding的20，以及高度要减去footer区域）
wx.createSelectorQuery()
.select('.footer') // canvas获取节点
.fields({ node: true, size: true }) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
.exec((res) => {
console.log('res', res);
// 获取手机左侧安全区域(刘海)
const deviceInFo = wx.getSystemInfoSync()
const canvasWidth = deviceInFo.windowWidth - 20 - deviceInFo?.safeArea?.left || 0
const canvasHeight = deviceInFo.windowHeight - res[0].height - 20
this.setData({
deviceInFo,
canvasWidth,
canvasHeight
})
this.initCanvas('init')
})
},
onLoad(option) {
wx.setNavigationBarTitle({
title: '电子签名'
})
// const {expertId} = option
// this.setData({expertId})
},
// 初始话Canvas画布
initCanvas(type) {
let ctx = null
let canvas = null
let {historyImag, canvasWidth, canvasHeight, deviceInFo, initialCanvasImg} = this.data
// 获取Canvas画布以及渲染上下文
wx.createSelectorQuery()
.select('#myCanvas') // canvas获取节点
.fields({ node: true, size: true }) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
.exec((res) => { // 执行所有的请求。请求结果按请求次序构成数组
// Canvas 对象实例
canvas = res[0].node
// Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 获取设备像素比
const dpr = wx.getWindowInfo().pixelRatio
// 初始化画布大小
canvas.width = width * dpr
canvas.height = height * dpr
// 画笔的颜色
ctx.fillStyle = 'rgb(200, 0, 0)';
// 指定了画笔（绘制线条）操作的线条宽度
ctx.lineWidth = 5
// 如果存在历史记录，则将历史记录最新的一张图片拿出来进行绘制。非ios时直接加载一张初始的空白图片
if(historyImag.length !== 0 || (deviceInFo.platform !== 'ios' && type !== 'init')) {
// 图片对象
const image = canvas.createImage()
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
}
// 设置图片src
image.src = historyImag[historyImag.length - 1] || initialCanvasImg;
}
// 缩小/放大图像
ctx.scale(dpr, dpr)
this.setData({canvas, ctx})
// 保存一张初始空白图片
if(type === 'init') {
wx.canvasToTempFilePath({
canvas,
png: 'png',
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
this.setData({initialCanvasImg: tempFilePath})
},
})
}
})
},
// 手指触摸动作开始
bindtouchstart(event) {
this.addPathDrop(event)
},
// 手指触摸后移动
bindtouchmove(event) {
this.addPathDrop(event)
},
// 手指触摸动作结束
bindtouchend(event) {
this.addPathDrop(event)
},
// 手指触摸动作被打断，如来电提醒，弹窗
bindtouchcancel(event) {
this.addPathDrop(event)
},
// 添加路径点
addPathDrop(event) {
let {ctx, historyImag, canvas} = this.data
let {type, changedTouches} = event
let {x, y} = changedTouches[0]
if(type === 'touchstart') { // 每次开始都是一次新动作
// 最开始点
ctx.moveTo(x, y) // 设置绘图起始坐标。
} else {
// 上一段终点
ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
// 绘制
ctx.stroke();
// 下一段起点
ctx.moveTo(x, y) // 设置绘图起始坐标。
}
// 每一次结束或者意外中断，保存一份图片到历史记录中
if(type === 'touchend' || type === 'touchcancel') {
// 生成图片
// historyImag.push(canvas.toDataURL('image/png'))
wx.canvasToTempFilePath({
canvas,
png: 'png',
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
historyImag.push(tempFilePath)
this.setData(historyImag)
},
})
}
},
// 上一步
prev() {
this.setData({
historyImag: this.data.historyImag.slice(0, this.data.historyImag.length - 1)
})
this.initCanvas()
},
// 重写
overwrite() {
this.setData({
historyImag: []
})
this.initCanvas()
},
// 提交
confirm() {
const {canvas, historyImag} = this.data
if(historyImag.length === 0) {
Toast.fail('请先签名后保存！');
return
}
// 生成图片
wx.canvasToTempFilePath({
canvas,
png: 'png',
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
// 保存图片到系统
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
})
// this.beforeRead(res.tempFilePath)
},
})
},
// // 图片上传
// async beforeRead(tempFilePath) {
// const that = this;
// wx.getImageInfo({
// src: tempFilePath,
// success(imageRes) {
// wx.uploadFile({
// url: '', // 仅为示例，非真实的接口地址
// filePath: imageRes.path,
// name: 'file',
// header: {token: wx.getStorageSync('token')},
// formData: {
// ext: imageRes.type
// },
// success(fileRes) {
// const response = JSON.parse(fileRes.data);
// if (response.code === 200) {
// that.setData({
// fileList: [response.data]
// })
// that.submit();
// } else {
// wx.hideLoading();
// Toast.fail('附件上传失败');
// return false;
// }
// },
// fail(err) {
// wx.hideLoading();
// Toast.fail('附件上传失败');
// }
// });
// },
// fail(err) {
// wx.hideLoading();
// Toast.fail('附件上传失败');
// }
// })
// },
// 提交
// submit() {
// const {fileList} = this.data
// wx.showLoading({title: '提交中...',})
// request('post', '', {
// fileIds: fileList.map(item => item.id),
// }).then(res => {
// if (res.code === 200) {
// wx.hideLoading();
// Toast.success('提交成功！');
// setTimeout(() => {
// wx.navigateBack({delta: 1});
// }, 1000)
// }
// })
// },
})
