小程式手寫簽名（wepy）

對于手寫簽名元件元件晚上有很多種寫法，我選擇了一種進行了wepy的架構的改造。如果使用wepy架構做手寫簽名的話可以直接複制下面的代碼。

這裡需要提醒的是：安卓手機和蘋果手機有适配性的問題，蘋果手機在簽名的以後手機将無法進行文檔的上下左右的滑動，而安卓手機沒有影響。解決這個問題的方法是給canvas給disable-scroll屬性綁定一個變量 disable-scroll="true" 當進行滑動的時候講disable-scroll屬性設定成true,滑動完成時将屬性還原為false.

<template>
    <view class='content'>
      <canvas class='firstCanvas' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='end' bindtouchcancel='cancel' bindlongtap='tap' disable-scroll='true' binderror='error'>
            </canvas>
    <button bindtap='clearClick'>清除</button>
    <button bindtap='saveClick'>儲存圖檔</button>
    <image id='signatureImg' src='{{signImage}}'></image>
</view>
</template>
<script>
import wepy from 'wepy';
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;

export default class Index extends wepy.page {
    config = {};
    components = {};
    data = {
        signImage: '',
    };
    events = {};
    methods = {
        start: function(event) {
            // console.log("觸摸開始" + event.changedTouches[0].x)
            // console.log("觸摸開始" + event.changedTouches[0].y)
            //擷取觸摸開始的 x,y
            let point = {
                x: event.changedTouches[0].x,
                y: event.changedTouches[0].y
            }
            touchs.push(point)
        },
        // 畫布的觸摸移動手勢響應
        move: function(e) {
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y
            }
            touchs.push(point)
            if (touchs.length >= 2) {
                this.draw(touchs)
            }
        },
        // 畫布的觸摸取消響應
        cancel: function(e) {
            console.log("觸摸取消" + e)
        },
        // 畫布的長按手勢響應
        tap: function(e) {
            console.log("長按手勢" + e)
        },
        error: function(e) {
            console.log("畫布觸摸錯誤" + e)
        },
        // 畫布的觸摸移動結束手勢響應
        end: function(e) {
            console.log("觸摸結束" + e)
            //清空軌迹數組
            for (let i = 0; i < touchs.length; i++) {
                touchs.pop()
            }
        },
    };
    async onShow() {}
    async onLoad(options) {
        //獲得Canvas的上下文
        content = wx.createCanvasContext('firstCanvas')
        //設定線的顔色
        content.setStrokeStyle("#00ff00")
        //設定線的寬度
        content.setLineWidth(5)
        //設定線兩端端點樣式更加圓潤
        content.setLineCap('round')
        //設定兩條線連接配接處更加圓潤
        content.setLineJoin('round')
    }
    draw(touchs) {
        let point1 = touchs[0]
        let point2 = touchs[1]
        touchs.shift()
        content.moveTo(point1.x, point1.y)
        content.lineTo(point2.x, point2.y)
        content.stroke()
        content.draw(true)
    }
    clearClick() {
        //清除畫布
        content.clearRect(0, 0, canvasw, canvash)
        content.draw(true)
    }
    saveClick() {
        var that = this
        wx.canvasToTempFilePath({
            canvasId: 'firstCanvas',
            success: function(res) {
                //列印圖檔路徑
                console.log(res.tempFilePath)
                //設定儲存的圖檔
                that.setData({
                    signImage: res.tempFilePath
                })
            }
        })
    }
}
</script>
<style>
.content {
    width: 100%;
    height: 500px;
    background-color: red;
}
.firstCanvas {
    background-color: blue;
    width: 100%;
    height: 200px;
}
image {
    width: 100%;
    height: 200px;
    background-color: orange;
}
</style>