©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>前言：
在移动应用中，手写签名是一项非常方便和实用的功能。本文将介绍如何使用 Uniapp 实现一个手写签字组件，并支持在 APP、小程序和 Web 应用中使用。
<>实现思路：
创建一个空白画布；
监听画布上的鼠标或触摸事件，获取当前的坐标；
将当前坐标与上一个坐标连接起来，形成一条线段；
将所有线段绘制到画布上；
提供清空和保存功能。
<>实现步骤：
* 在 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 =
clientYthis.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
Handwritingfrom '@/components/Handwriting.vue' export default { components: {
Handwriting}, methods: { clearCanvas() { // 调用 Handwriting 组件的清空画布方法 this.$refs.
handwriting.clearCanvas() }, saveImage() { // 调用 Handwriting 组件的保存图片方法 this.
$refs.handwriting.saveImage() } } } </script>
<>在 App、小程序和 Web 应用中使用：
* App 端：直接在页面中使用 Handwriting 组件即可；
* 小程序端：需要在项目根目录下的 uni.scss 文件中添加以下代码，解决 canvas 在安卓机上可能出现模糊的问题：
canvas {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden；
* 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
应用中使用。通过监听鼠标或触摸事件，将用户手写的线条绘制到画布上，并提供清空和保存功能。这个组件在实际开发中非常实用，可以用于签名、手写笔记等场景。