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;
  3. 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 应用中使用。通过监听鼠标或触摸事件,将用户手写的线条绘制到画布上,并提供清空和保存功能。这个组件在实际开发中非常实用,可以用于签名、手写笔记等场景。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>