微信小程序实现手写签名

本文实例为大家分享了微信小程序实现手写签名的具体代码，供大家参考，具体内容如下

本示例具备的功能：

1、笔迹绘制

2、笔迹清空

以下是js代码：

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;
 
Page({
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  // 画布的触摸移动开始手势响应
  start: function(event) {
    // console.log("触摸开始" + event.changedTouches[0].y)
    // console.log("触摸开始" + event.changedTouches[0].x)
    //获取触摸开始的 x,y
    let point = {
      x: event.changedTouches[0].y,
      y: event.changedTouches[0].x
    }
    touchs.push(point)
  },
 
  // 画布的触摸移动手势响应
  move: function(e) {
    let point = {
      x: e.touches[0].y,
      y: e.touches[0].x
    }
    touchs.push(point)
    if (touchs.length >= 2) {
      this.draw(touchs)
    }
  },
 
  // 画布的触摸移动结束手势响应
  end: function(e) {
    // console.log("触摸结束" + e)
    //清空轨迹数组
    for (let i = 0; i < touchs.length; i++) {
      touchs.pop()
    }
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that = this
    //获得Canvas的上下文
    content = wx.createCanvasContext('firstCanvas')
    //设置线的颜色
    content.setStrokeStyle("#000")
    //设置线的宽度
    content.setLineWidth(5)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
    // 获取画布尺寸
    var query = wx.createSelectorQuery()
    query.select('#canvas').boundingClientRect()
    query.exec(function(res) {
      canvasw = res[0].width;
      canvash = res[0].height
    })
  },
 
  //绘制
  draw: function(touchs) {
    let point1 = touchs[0]
    let point2 = touchs[1]
    touchs.shift()
    content.moveTo(point1.y, point1.x)
    content.lineTo(point2.y, point2.x)
    content.stroke()
    content.draw(true)
  },
  //清除操作
  clearClick: function() {
    //清除画布
    content.clearRect(0, 0, canvasw, canvash)
    content.draw(true)
  },
  //保存图片
  saveClick: function() {
    var that = this
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success: function(res) {
        //打印图片路径
        var path = res.tempFilePath
        //上传图片
        that.uploadSignPic(path)
        console.log(path)
 
 
      }
    })
  },
 
 
  /**
   * 上传签名图片
   */
  uploadSignPic: function(path) {
      //具体实现的业务逻辑
  }
 
})

以下是wxml代码：

<!-- 手写界面 -->
<view class='hand_writing_container'>
  <view class="tips_title">请在区域内进行签名</view>
  <view id="canvas" class="canvas">
    <canvas class='firstCanvas' 
    canvas-id="firstCanvas" 
    bindtouchmove='move' 
    bindtouchstart='start' 
    bindtouchend='end' 
    disable-scroll='true' >
    </canvas>
  </view>
  <view class="btn_container">
    <view class="btn clean" bindtap="clearClick">
      <image src="/image/clear.png"></image>
      <text>内容清除</text>
    </view>
    <view class="btn submit" bindtap="saveClick">
      <image src="/image/submit.png"></image>
      <text>确认提交</text>
    </view>
  </view>
</view>

以下是样式代码：

.hand_writing_container {
  width: 100%;
  padding: 5.503vh 8.1761vh 0;
  box-sizing: border-box;
}
 
.tips_title {
  height: 4.72vh;
  line-height: 4.72vh;
  margin-bottom: 3.459vh;
  font-size: 4.71698vh;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(45, 45, 45, 1);
}
 
.canvas {
  width: 100%;
  height: 66.194968vh;
  margin-bottom: 3.7735849vh;
  box-sizing: border-box;
  border: 1rpx dashed black;
}
 
.firstCanvas {
  background-color: white;
  width: 100%;
  height: 100%;
}
 
.btn_container {
  display: flex;
  align-items: center;
  padding: 0 45.44vh;
  box-sizing: border-box;
  justify-content: space-between;
}
 
.btn {
  width: 45.597484vh;
  height: 13.83647798vh;
  padding: 0 11vh;
  box-sizing: border-box;
  border-radius: 1.572327vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.btn image {
  flex: 0 0 4.71698vh;
  width: 4.71698vh;
  height: 4.71698vh;
  display: block;
  margin-right: 1.88679vh;
}
 
.btn text {
  flex: 0 0 auto;
  height: 4.717vh;
  line-height: 4.717vh;
  font-size: 4.71698vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
 
.clean {
  background-color: #07c160;
}
 
.submit {
  background-color: #ff3d33;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。