微信小程序写字板功能

功能参考来源

<view class="write">
    <canvas class="write_main" canvas-id="sign" bindtouchmove="move" bindtouchstart="start" bindtouchend="end" bindtouchcancel="cancel" bindlongtap="tap" disable-scroll="true" binderror="error"></canvas>
    <view class="write_text">手写名字</view>
</view>
<view class="write_btn">
    <view bindtap="saveClick">完成签字</view>
    <view bindtap="clearClick">重新签字</view>
</view>

.write {
    position: relative;
    width: 100%;
    height: 680rpx;
    background: #EEEEEE;
    border-radius: 10rpx;
}

.write_main {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.write_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72rpx;
    color: #D9D9D9;
}

.write_btn {
    margin-top: 66rpx;
    padding: 0 40rpx 52rpx;
}

.write_btn view {
    width: 100%;
    height: 94rpx;
    border-radius: 47px;
    text-align: center;
    line-height: 94rpx;
}

.write_btn view:nth-child(1) {
    color: #fff;
    background: #317AFF;
    margin-bottom: 30rpx;
}

.write_btn view:nth-child(2) {
    color: #555555;
    background: #EEEEEE;
}

var content = null;
var touchs = [];

Page({
    data: {
        imgList: [],
        signImage: ''
    },

    onLoad(options) {
        //获得Canvas的上下文
        content = wx.createCanvasContext('sign');
        //设置线的颜色
        content.setStrokeStyle("#000");
        //设置线的宽度
        content.setLineWidth(3);
        //设置线两端端点样式更加圆润
        content.setLineCap('round');
        //设置两条线连接处更加圆润
        content.setLineJoin('round');
    },

    // 画布的触摸移动开始手势响应
    start(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(e) {
        let point = { x: e.touches[0].x, y: e.touches[0].y }
        touchs.push(point);
        if (touchs.length >= 2) {
            this.draw(touchs);
        }
    },
    // 画布的触摸移动结束手势响应
    end(e) {
        console.log("触摸结束" + e);
        //清空轨迹数组
        for (let i = 0; i < touchs.length; i++) {
            touchs.pop();
        }
    },
    // 画布的触摸取消响应
    cancel(e) {
        console.log("触摸取消" + e);
    },
    // 画布的长按手势响应
    tap(e) {
        console.log("长按手势" + e);
    },
    error(e) {
        console.log("画布触摸错误" + e);
    },

    //绘制
    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, 750, 700);
        content.draw(true);
    },

    //保存图片
    saveClick() {
        wx.canvasToTempFilePath({
            canvasId: 'sign',
            success: (res) => {
                //打印图片路径
                console.log(res.tempFilePath);
                //设置保存的图片
                this.setData({
                    signImage: res.tempFilePath
                })
            },
            fail: (err) => {
                console.log(err)
            }
        })
    }

})