uniapp 实现手写签字组件

2023-06-11 12:16| 来源: 网络整理| 查看: 265

前言：

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

实现思路：

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

实现步骤：在 uni-app 项目中新建 Handwriting.vue 文件，并添加下面的 HTML 代码： 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) } } } .handwriting { width: 100%; height: 300px; position: relative; } canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 在页面中使用 Handwriting 组件：清除保存 import Handwriting from '@/components/Handwriting.vue' export default { components: { Handwriting }, methods: { clearCanvas() { // 调用 Handwriting 组件的清空画布方法 this.$refs.handwriting.clearCanvas() }, saveImage() { // 调用 Handwriting 组件的保存图片方法 this.$refs.handwriting.saveImage() } } } 在 App、小程序和 Web 应用中使用： App 端：直接在页面中使用 Handwriting 组件即可；小程序端：需要在项目根目录下的 uni.scss 文件中添加以下代码，解决 canvas 在安卓机上可能出现模糊的问题： canvas { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden；Web 端：需要在页面中引入 Handwriting 组件并注册为全局组件，在需要使用的地方添加标签即可。

完整代码如下：

清除保存 import Handwriting from '@/components/Handwriting.vue' export default { components: { Handwriting }, methods: { clearCanvas() { // 调用 Handwriting 组件的清空画布方法 this.$refs.handwriting.clearCanvas() }, saveImage() { // 调用 Handwriting 组件的保存图片方法 this.$refs.handwriting.saveImage() } } } 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; }

总结：

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

【本文地址】

公司简介

联系我们