【uni-app】使用写字板，实现手写签名

需求

用户需在APP或小程序使用手写的方式签字或签名

效果图片

实现方式

1. 封装成组件调用（推荐）
2. 使用的页面内直接使用，目前的教程就是直接使用的，未封装成组件

使用

第一步：使用的页面，如index.vue

<!-- canvas -->
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>

<!-- 底部操做按钮 -->
<view class="footer">
        <view class="left" @click="finish">保存</view>
        <view class="right" @click="clear">清除</view>
        <view class="close" @click="close">关闭</view>
</view>


<view @click='createCanvas()'>点击触发写字板</view>
复制代码

上面的canvas共绑定了3个方法

方法名	方法解读
@touchstart	手写触摸开始，获取到起点
@touchmove	手写触摸移动，获取到路径点
@touchend	手写触摸结束

第二步：定义所需数据

export default {
	data() {
		return {
                    //绘图图像
                    ctx: '', 
                    //路径点集合
                    points: [], 
                    //签名图片
                    SignatureImg: ''
                }
              }
           }
复制代码

第三步：绑定方法，书写逻辑

1. createCanvas（）----该方法主要是建立了画布
2. touchstart（）----触摸开始，获取到起点
3. touchmove（）----触摸移动，获取到路径点
4. touchend（）----触摸结束，将未绘制的点清空防止对后续路径产生干扰
5. draw（）----绘制笔迹
6. clear（）----清空画布
7. finish（）----完成绘画并保存到本地

methods: {
    createCanvas() {
        //建立绘图对象
        this.ctx = uni.createCanvasContext('mycanvas', this);
        //设置画笔样式
        this.ctx.lineWidth = 4;
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        },
    touchstart(e) {
        let startX = e.changedTouches[0].x;
        let startY = e.changedTouches[0].y;
        let startPoint = { X: startX, Y: startY };
        this.points.push(startPoint);
        //每次触摸开始，开启新的路径
        this.ctx.beginPath();
	},
   touchmove(e) {
        let moveX = e.changedTouches[0].x;
        let moveY = e.changedTouches[0].y;
        let movePoint = { X: moveX, Y: moveY };
        this.points.push(movePoint); //存点
        let len = this.points.length;
        if (len >= 2) {
                this.draw(); //绘制路径
        }
	},
   touchend() {
        this.points = [];
	},
   draw() {
        let point1 = this.points[0];
        let point2 = this.points[1];
        this.points.shift();
        this.ctx.moveTo(point1.X, point1.Y);
        this.ctx.lineTo(point2.X, point2.Y);
        this.ctx.stroke();
        this.ctx.draw(true);
        },
   clear() {
        let that = this;
        uni.getSystemInfo({
                success: function(res) {
                    let canvasw = res.windowWidth;
                    let canvash = res.windowHeight;
                    that.ctx.clearRect(0, 0, canvasw, canvash);
                    that.ctx.draw(true);
                }
        });
        },
   finish() {
        let that = this;
        uni.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function(res) {
                     //这里的res.tempFilePath就是生成的签字图片
                    console.log(res.tempFilePath);
            }
        });
   }
}
复制代码

上面finish()方法获得的res.tempFilePath就是生成出来的签名，可用于作余下的业务操做