微信小程序手写签名

主要实现的方式在通过控件“canvas”进行绘制实现的；实现的效果图如下：

 

1：wxml布局文件

<view>
    <view class="pageUI">
        <view class="paper">
            <canvas class="canvastyle" canvas-id="canvasId" id='canvasId' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
        </view>
        <view class="writebox">
            <button  size="default" type="primary" bindtap="export" style="width: 300rpx;margin-right: 30rpx;">完成签字</button>
            <button size="default" type="warn" bindtap="clear"  style="width: 300rpx;margin-left: 30rpx;">重新签字</button>
        </view>
    </view>
</view>

2：css文件

.pageUI{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.paper {
    width: 90%;
    border: 1px solid #dedede;
    height: 400rpx;
    border-radius:15rpx;
}



.signBtn {
    display: flex;
    margin-top: 20px;
}

.canvastyle {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
}

.writebox {
    
    display: flex;
    padding: 50rpx;
    justify-content: space-between;
}

.cusstyle {
    width: 200rpx;
}

3：js文件代码

Page({
    data: {
        flagMove: false,//默认未签名
        context: null,

    },
    onLoad: function (options) {
        let context = wx.createCanvasContext('canvasId')
        this.setData({
            context: context
        })
        context.draw();
    },
    bindtouchstart(e) {
        console.log("bindtouchstart", e);
        this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
    },
    // 触摸移动
    bindtouchmove(e) {
        console.log("bindtouchstart", e);
        this.setData({
            flagMove: true,
        })
        this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
        this.data.context.stroke();
        this.data.context.draw(true);
        this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    /**清空画布 */
    clear() {
        this.data.context.clearRect(0, 0, 600, 700);//清空画布
        this.data.context.draw();
        this.setData({
            flagMove: false
        })
    },
    /**导出图片 */
    export() {
        const that = this;
        if (!that.data.flagMove) {
            console.log('签名获取失败，请稍后重试');
            return;
        }
        that.data.context.draw(true, wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            fileType: 'jpg',
            canvasId: 'canvasId',
            success(res) {
                const { tempFilePath } = res;

                let pages = getCurrentPages();
                let prevPage = pages[pages.length - 2];

                prevPage.setData({
                    signImage: tempFilePath,
                })
                wx.navigateBack({
                    delta: 1,
                })

                console.log('手写签名，签字图片', tempFilePath)
            },
            fail() {
                showToast('签名提交失败');
            }
        }))
    },
})