【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就是生成出來的簽名，可用於作餘下的業務操做