微信小程序签名功能

view

<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>

js

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)
        }
    })
}

})

css

.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;
}