前言：最近接到了这样一个需求，需要在pc端和小程序端实现手写签名，两者都可以基于canvas实现手写签名功能
一、PC端手写签名
// 此功能是基于Vue2实现的
<el-form-item label="签字" prop="auditSignImg"><div style="position: relative; width: 300px; height: 200px;"><canvas id="mycanvas" @mousedown="mousedown"></canvas><i class="el-icon-refresh resetsign" style="font-size: 30px;position: absolute;right: 0;bottom: 0;" @click="clearcanvas" title="重置签名"></i></div></el-form-item>mounted() {this.$nextTick(() => this.createCanvas())},methods: {// 关于签名createCanvas() {// 获取canvas 实例var canvas = document.getElementById("mycanvas");// 设置宽高canvas.width = this.config.width;canvas.height = this.config.height;// 设置一个边框，方便咱们检查及运用canvas.style.border = "1px solid #ccc";// 创立上下文this.ctx = canvas.getContext("2d");// 设置填充背景色this.ctx.fillStyle = "#fff";// 制作填充矩形this.ctx.fillRect(0, // x 轴开端制作方位0, // y 轴开端制作方位this.config.width, // 宽度this.config.height // 高度);},mousedown(e) {// 初始化// 获取偏移量及坐标const {offsetX,offsetY,pageX,pageY} = e;// 修正前次的偏移量及坐标this.client.offsetX = offsetX;this.client.offsetY = offsetY;this.client.endX = pageX;this.client.endY = pageY;// 铲除以上一次 beginPath 之后的一切途径，进行制作this.ctx.beginPath();// 依据装备文件设置进行相应装备this.ctx.lineWidth = this.config.lineWidth;this.ctx.strokeStyle = this.config.strokeStyle;this.ctx.lineCap = this.config.lineCap;this.ctx.lineJoin = this.config.lineJoin;// 设置画线开端点位this.ctx.moveTo(this.client.offsetX, this.client.offsetY);this.ctx.stroke();window.addEventListener("mousemove", this.mousemove);},mousemove(e) {// 获取当时坐标点位const {offsetX,offsetY} = e;// 依据坐标点位移动增加线条let h = document.getElementById("mycanvas").getBoundingClientRect().top;let w = document.getElementById("mycanvas").getBoundingClientRect().left;this.ctx.lineTo(e.clientX - w, e.clientY - h);// 制作this.ctx.stroke();window.addEventListener("mouseup", this.mouseup);},mouseup() {this.ctx.closePath();// 移除鼠标移动或手势移动监听器window.removeEventListener("mousemove", this.mousemove);},clearcanvas() {// 清空画布this.ctx.clearRect(0, 0, this.config.width, this.config.height);// 清空签名urlthis.rejectForm.auditSignImg = '';},}
二、小程序端手写签名
// 此功能是基于uniapp+Vue3实现的
// SignCanvas.vue
<!-- 签名 -->
<template><view class="canvas-signature"><canvas id="myCanvas" canvas-id="myCanvas" :style="{width: cWidth + 'px', height: cHeight + 'px', boxShadow: '-2rpx 2rpx 2rpx 0 rgba(0,0,0,0.1), 2rpx -2rpx 2rpx 0 rgba(0,0,0,0.1)',borderRadius: '8rpx 8rpx 8rpx 8rpx'}" @touchstart.stop="touchStart" @touchmove.stop="touchMove" @touchend.stop="touchEnd"></canvas><view class="btn-wrap"><view class="btn clean base-btn" @click="clear"><text>重写</text></view><view class="btn save base-btn" @click="save"><text>{{btnText}}</text></view></view></view>
</template>
<script>
import { uploadFile } from '@/utils/file.js'
import { $showToast } from '@/utils/index.js'let ctx = null
export default {props:{cHeight: {type: Number,default: 200},strokeStyle: {type: String,default: '#000'},lineWidth: {type: Number,default: 3},btnText: {type: String,default: '保存'},pageType: {type: String,default: ''}},data() {return {cWidth: 375,touchStartX: 0, // 手指触摸开始x坐标touchStartY: 0, // 手指触摸开始y坐标moveX: 0, // 移动x坐标moveY: 0, // 移动y坐标hasContent: false // 是否已签名}},mounted() {const res = uni.getWindowInfo()this.cWidth = res.screenWidth * 0.9ctx = uni.createCanvasContext('myCanvas', this)ctx.lineWidth = this.lineWidthctx.strokeStyle = this.strokeStylectx.lineCap = 'round'},methods: {touchStart(e) {const {touches} = e this.touchStartX = touches[0].xthis.touchStartY = touches[0].y// 每次触摸开始，开启新的路径ctx.beginPath()},touchMove(e) {const {touches} = ethis.moveX = touches[0].xthis.moveY = touches[0].y// 两点画一笔ctx.moveTo(this.touchStartX, this.touchStartY)ctx.lineTo(this.moveX,this.moveY)ctx.stroke()ctx.draw(true) // 将上一次的终点作为下一次绘制的起点this.touchStartX = this.moveXthis.touchStartY = this.moveYthis.hasContent = true},touchEnd(e) {},// 保存save() {if (!this.hasContent) {$showToast('请先签名')return}uni.canvasToTempFilePath({canvasId: 'myCanvas',success: (res) => {uploadFile(res?.tempFilePath).then(result => {this.$emit('handleSingature', result?.fileName)})},fail: (error) => {console.log('回调错误', error);}}, this)},// 重写clear() {this.hasContent = falsectx.clearRect(0, 0, this.cWidth, this.cHeight)ctx.draw(true)}}
}
</script><style lang="scss" scoped>
.canvas-signature {background: #FFFFFF;.btn-wrap {display: flex;justify-content: space-around;background: #fff;padding: 20rpx 0;border-top: 1rpx solid #f5f5f5;.btn,&.clean {width: 40%;height: 104rpx;line-height: 104rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;font-size: 36rpx;}.btn {padding: 0 14rpx;color: #ffffff;display: flex;align-items: center;justify-content: center;background: #0FAD70;&.clean {margin-right: 20rpx;background-color: #ffffff;border: 2rpx solid #C6C6C8;color: #333333;}}}
}
</style>// 父组件引用SignCanvas.vue
<my-canvas cHeight="460" @handleSingature="handleSingature"></my-canvas>
handleSingature(fileName) {// 手写签名转成的文件名console.log(fileName)
}
