uniapp 实现手写签字组件

前言：

在移动应用中，手写签名是一项非常方便和实用的功能。本文将介绍如何使用 Uniapp 实现一个手写签字组件，并支持在 APP、小程序和 Web 应用中使用。

实现思路：

创建一个空白画布；
监听画布上的鼠标或触摸事件，获取当前的坐标；
将当前坐标与上一个坐标连接起来，形成一条线段；
将所有线段绘制到画布上；
提供清空和保存功能。

实现步骤：

1. 在 uni-app 项目中新建 Handwriting.vue 文件，并添加下面的 HTML 代码：

<template>
  <div class="handwriting">
    <canvas ref="canvas" @touchstart="startDraw" @touchmove="drawing" @touchend="stopDraw" />
  </div>
</template>

<script>
export default {
    
  name: 'Handwriting',
  data() {
    
    return {
    
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      lastX: 0,
      lastY: 0,
      isDrawing: false
    }
  },
  mounted() {
    
    this.initCanvas()
  },
  methods: {
    
    initCanvas() {
    
      // 初始化画布
      const canvas = this.$refs.canvas
      this.ctx = canvas.getContext('2d')
      this.canvasWidth = canvas.width = canvas.offsetWidth
      this.canvasHeight = canvas.height = canvas.offsetHeight
      this.ctx.strokeStyle = '#000'
      this.ctx.lineJoin = 'round'
      this.ctx.lineWidth = 5
    },
    startDraw(e) {
    
      // 开始绘制
      const {
     clientX, clientY } = e.touches[0]
      this.lastX = clientX
      this.lastY = clientY
      this.isDrawing = true
    },
    drawing(e) {
    
      // 绘制中
      if (!this.isDrawing) return
      const {
     clientX, clientY } = e.touches[0]
      this.ctx.beginPath()
      this.ctx.moveTo(this.lastX, this.lastY)
      this.ctx.lineTo(clientX, clientY)
      this.ctx.closePath()
      this.ctx.stroke()
      this.lastX = clientX
      this.lastY = clientY
    },
    stopDraw() {
    
      // 停止绘制
      this.isDrawing = false
    },
    clearCanvas() {
    
      // 清空画布
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    },
    saveImage() {
    
      // 保存签名图片
      const dataURL = this.$refs.canvas.toDataURL('image/png')
      console.log(dataURL)
    }
  }
}
</script>

<style>
.handwriting {
    
  width: 100%;
  height: 300px;
  position: relative;
}

canvas {
    
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

在页面中使用 Handwriting 组件：

<template>
  <div>
    <Handwriting />
    <button @click="clearCanvas">清除</button>
    <button @click="saveImage">保存</button>
  </div>
</template>

<script>
import Handwriting from '@/components/Handwriting.vue'

export default {
    
  components: {
    
    Handwriting
  },
  methods: {
    
    clearCanvas() {
    
      // 调用 Handwriting 组件的清空画布方法
      this.$refs.handwriting.clearCanvas()
    },
    saveImage() {
    
      // 调用 Handwriting 组件的保存图片方法
      this.$refs.handwriting.saveImage()
    }
  }
}
</script>

在 App、小程序和 Web 应用中使用：

1. App 端：直接在页面中使用 Handwriting 组件即可；
2. 小程序端：需要在项目根目录下的 uni.scss 文件中添加以下代码，解决 canvas 在安卓机上可能出现模糊的问题：
   canvas {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden；
   1. Web 端：需要在页面中引入 Handwriting 组件并注册为全局组件，在需要使用的地方添加 标签即可。

完整代码如下：

<template>
  <div>
    <Handwriting ref="handwriting" />
    <button @click="clearCanvas">清除</button>
    <button @click="saveImage">保存</button>
  </div>
</template>

<script>
import Handwriting from '@/components/Handwriting.vue'

export default {
    
  components: {
    
    Handwriting
  },
  methods: {
    
    clearCanvas() {
    
      // 调用 Handwriting 组件的清空画布方法
      this.$refs.handwriting.clearCanvas()
    },
    saveImage() {
    
      // 调用 Handwriting 组件的保存图片方法
      this.$refs.handwriting.saveImage()
    }
  }
}
</script>

<style lang="scss">
canvas {
    
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.handwriting {
    
  width: 100%;
  height: 300px;
  position: relative;
}

canvas {
    
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

总结：

本文介绍了如何使用 Uniapp 实现一个手写签字组件，并支持在 APP、小程序和 Web 应用中使用。通过监听鼠标或触摸事件，将用户手写的线条绘制到画布上，并提供清空和保存功能。这个组件在实际开发中非常实用，可以用于签名、手写笔记等场景。