微信小程序 签字面板

微信小程序中实现签字面板的方法如下：
1. 在wxml文件中添加canvas标签，设置宽高和id属性，用于后续操作。

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在js文件中获取canvas对象，设置画笔颜色、线条宽度等属性，并监听touchstart、touchmove、touchend事件，实现手写签字功能。

// 获取canvas对象
const ctx = wx.createCanvasContext('myCanvas')
// 设置画笔颜色、线条宽度等属性
ctx.setStrokeStyle('black')
ctx.setLineWidth(3)
ctx.setLineCap('round')
ctx.setLineJoin('round')
// 监听touchstart、touchmove、touchend事件，实现手写签字功能
let startX = 0
let startY = 0
let isTouchMove = false
wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
  const canvas = res[0].node
  const dpr = wx.getSystemInfoSync().pixelRatio
  canvas.width = res[0].width * dpr
  canvas.height = res[0].height * dpr
  ctx.scale(dpr, dpr)
  canvas.addEventListener('touchstart', (e) => {
    startX = e.touches[0].x
    startY = e.touches[0].y
    isTouchMove = false
  })
  canvas.addEventListener('touchmove', (e) => {
    const endX = e.touches[0].x
    const endY = e.touches[0].y
    ctx.moveTo(startX, startY)
    ctx.lineTo(endX, endY)
    ctx.stroke()
    startX = endX
    startY = endY
    isTouchMove = true
  })
  canvas.addEventListener('touchend', (e) => {
    if (!isTouchMove) {
      ctx.beginPath()
      ctx.arc(startX, startY, 1.5, 0, 2 * Math.PI)
      ctx.fill()
    }
  })
})

3. 在wxml文件中添加保存按钮，点击按钮后将canvas转换为图片并保存到本地相册。

<button type="primary" bindtap="saveImage">保存</button>

// 点击保存按钮，将canvas转换为图片并保存到本地相册
saveImage() {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: () => {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  })
}