微信小程序做电子签名功能

文章目录


最近需求要做就记录一下。

人狠话不多,直接上功能:
在这里插入图片描述

直接搂代码吧,复制过去就可以用,有其他需求自己改吧改吧。

signature.wxml

<!-- 电子签名页面 -->
<custom-navbar title="电子签名"show-home="{{false}}"
/>
<view class="signature-page"><!-- 顶部操作栏 --><view class="action-bar"><t-button theme="primary" icon="refresh" bind:tap="handleClear">重写</t-button><t-button theme="primary" icon="rollback" bind:tap="handleUndo">撤销</t-button><t-button theme="primary" icon="check" bind:tap="handleSubmit">提交</t-button></view><!-- 签名区域 --><view class="signature-area-large"><canvastype="2d"id="signatureCanvas"class="signature-canvas-large"disable-scroll="{{true}}"bindtouchstart="handleTouchStart"bindtouchmove="handleTouchMove"bindtouchend="handleTouchEnd"></canvas></view><!-- 提示文本 --><view class="signature-tips">请在上方区域书写您的签名</view>
</view> 

注意:我是用的tdesign这个UI,所以是t-button


signature.wxss

/* 页面容器 */
.signature-page {width: 100vw;height: calc(100vh - 44rpx);background-color: #f6f6f6;display: flex;flex-direction: column;padding: 16rpx;box-sizing: border-box;
}/* 顶部操作栏 */
.action-bar {display: flex;justify-content: flex-end;gap: 16rpx;margin-bottom: 20rpx;padding: 0 10rpx;
}/* 自定义按钮样式 */
.action-bar .t-button {min-width: auto;padding: 0 16rpx;font-size: 18rpx !important;height: 35rpx !important;line-height: 35rpx !important;
}/* 按钮图标样式 */
.action-bar .t-icon,
.action-bar .t-button__icon,
.action-bar .t-button .t-icon {font-size: 20rpx !important;
}/* 签名区域-大尺寸 */
.signature-area-large {flex: 1;background-color: #ffffff;border-radius: 16rpx;box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);overflow: hidden;position: relative;margin: 0 auto;width: 94vw;height: 80vh;
}/* 签名画布-大尺寸 */
.signature-canvas-large {width: 100%;height: 100%;background-color: #ffffff;
}/* 提示文本 */
.signature-tips {text-align: center;color: #999999;font-size: 12px;margin-top: 16rpx;
}

signature.js

Page({data: {ctx: null,points: [], // 存储所有笔画currentStroke: [], // 当前笔画isDrawing: false,},/*** 生命周期函数--监听页面加载* 初始化画布设置*/onLoad() {this.initCanvas();},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 初始化画布* 设置画布大小、像素比例和画笔样式*/async initCanvas() {const query = wx.createSelectorQuery();query.select('#signatureCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext('2d');// 设置画布大小,使用新的API获取设备像素比const dpr = wx.getWindowInfo().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr);// 设置画笔样式ctx.strokeStyle = '#000000';ctx.lineWidth = 3;ctx.lineCap = 'round';ctx.lineJoin = 'round';this.setData({ ctx });});},/*** 处理触摸开始事件* 开始一个新的笔画,记录起始点* @param {Object} e - 触摸事件对象*/handleTouchStart(e) {const { x, y } = e.touches[0];this.setData({isDrawing: true,currentStroke: [[x, y]]});this.data.ctx.beginPath();this.data.ctx.moveTo(x, y);},/*** 处理触摸移动事件* 继续绘制当前笔画的路径* @param {Object} e - 触摸事件对象*/handleTouchMove(e) {if (!this.data.isDrawing) return;const { x, y } = e.touches[0];this.data.currentStroke.push([x, y]);this.data.ctx.lineTo(x, y);this.data.ctx.stroke();},/*** 处理触摸结束事件* 完成当前笔画,将其添加到笔画历史中*/handleTouchEnd() {if (!this.data.isDrawing) return;this.setData({isDrawing: false,points: [...this.data.points, this.data.currentStroke],currentStroke: []});},/*** 清除画布内容* 清空所有笔画记录和画布显示*/handleClear() {const { ctx } = this.data;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);this.setData({ points: [] });},/*** 撤销上一步操作* 移除最后一笔,并重绘剩余的笔画*/handleUndo() {if (this.data.points.length === 0) return;const { ctx } = this.data;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);// 移除最后一笔const newPoints = this.data.points.slice(0, -1);this.setData({ points: newPoints });// 重绘所有笔画newPoints.forEach(stroke => {ctx.beginPath();ctx.moveTo(stroke[0][0], stroke[0][1]);stroke.forEach(([x, y]) => {ctx.lineTo(x, y);});ctx.stroke();});},/*** 提交签名* 将画布内容转换为图片并处理提交逻辑* @returns {Promise<void>}*/async handleSubmit() {if (this.data.points.length === 0) {wx.showToast({title: '请先签名',icon: 'none'});return;}// todo: 这里根据具体业务写吧,我这只是举个例子try {// 将画布内容转换为图片const tempFilePath = await new Promise((resolve, reject) => {wx.canvasToTempFilePath({canvas: this.data.ctx.canvas,success: res => resolve(res.tempFilePath),fail: reject});});// 这里可以处理签名图片,比如上传到服务器console.log('签名图片路径:', tempFilePath);wx.showToast({title: '提交成功',icon: 'success'});// 返回上一页setTimeout(() => {wx.navigateBack();}, 1500);} catch (error) {console.error('提交签名失败:', error);wx.showToast({title: '提交失败',icon: 'error'});}}
}); 

注意:handleSubmit 提交的逻辑根据具体的业务写


signature.json

{"usingComponents": {"t-button": "tdesign-miniprogram/button/button"},"disableScroll": true,"pageOrientation": "landscape"
} 

注意:我是用的tdesign这个UI

"pageOrientation": "landscape"这个是设置横屏


就是用canvas画,小程序里这种需求一般都是用canvas

收工,有需要copy去吧,哈哈哈哈哈哈哈哈哈哈

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【HarmonyOS】使用AVPlayer播放音乐,导致系统其它应用音乐播放暂停 - 播放音频焦点管理

【HarmonyOS】使用AVPlayer播放音乐&#xff0c;导致系统其它应用音乐播放暂停 - 播放音频焦点管理 一、前言 在鸿蒙系统中&#xff0c;对于音乐播放分为几种场景。音乐&#xff0c;电影&#xff0c;音效&#xff0c;闹钟等。当使用AVPlayer播放音乐时&#xff0c;如果不处理…

Linux中inode、软硬连接

磁盘的空间管理 如何对磁盘空间进行管理&#xff1f; 假设在一块大小为500G的磁盘中&#xff0c;500*1024*1024524288000KB。在磁盘中&#xff0c;扇区是磁盘的基本单位&#xff08;一般大小为512byte&#xff09;&#xff0c;而文件系统访问磁盘的基本单位是4KB&#xff0c;因…

基于卷积神经网络的垃圾分类系统实现(GUI应用)

1.摘要 本文主要实现了一个卷积神经网络模型进行垃圾图像分类&#xff0c;为了提高垃圾分类模型的准确率&#xff0c;使用使用Batch Normalization层、使用早期停止策略来防止过拟合等方法来优化模型&#xff0c;实验结果显示最终优化后的模型准确率较高90%左右。最终&#xf…

IDEA结合GitLab使用

GitLab新建仓库 使用管理员账号创建gitlab仓库创建空白文件填写项目名称及命名空间 注意&#xff1a;取消勾选【使用自述文件初始化仓库】&#xff0c;否则IDEA中push代码报错 设置仓库权限 【设置】-【仓库】-【受保护分支】中需要添加哪些角色可以提交与合并代码&#xff0…

洛谷 P1179 [NOIP2010 普及组] 数字统计 C语言

题目&#xff1a; https://www.luogu.com.cn/problem/P1179 思路&#xff1a;直接暴力过 代码&#xff1a; #include<iostream> using namespace std; int cnt(int x) {int sum 0;while(x){int temp x %10;if(temp 2){sum;}x x/10;}return sum; } int main(void) …

Android APP自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记&#xff0c;当前清理空间&#xff0c;本来想直接删除掉的&#xff0c;但是感觉有些舍不得&#xff0c;因此先搬移过来。 Android导入已有外部数据库 2015.06.26在QQ空间记录&#xff1a;在Android中不能直接打开res aw目录中的数据…

在GitHub上fork 别人的仓库 到 自己的仓库,clone到本地,处理后再上传回Github请求PR的过程

如题 一、fork 别人的仓库 到 自己的仓库 这是一种完全的复刻&#xff0c;所有内容都会被拿过来。 点击fork 写信息 创建fork 二、把它clone 到本地 先回到home&#xff0c;打开刚才 我们fork 的工程。 复制地址。 然后 在我们 本地 你去创建一个文件夹 来 接受他 比如我…

MATLAB 识别色块和数量

文章目录 前言步骤 1: 读取图像步骤 2: 转换为 HSV 颜色空间步骤 3: 定义颜色范围步骤 4: 创建颜色掩码步骤 5: 应用形态学操作&#xff08;可选&#xff09;步骤 6: 标记和显示结果完整代码步骤七 返回色块坐标 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…

深入理解偏向锁、轻量级锁、重量级锁

一、对象结构和锁状态 synchronized关键字是java中的内置锁实现&#xff0c;内置锁实际上就是个任意对象&#xff0c;其内存结构如下图所示 其中&#xff0c;Mark Word字段在64位虚拟机下占64bit长度&#xff0c;其结构如下所示 可以看到Mark Word字段有个很重要的作用就是记录…

文字稿 | MatrixOne2.0.0:AI向量与高可用能力的重磅升级MatrixOne 2.0.0 新特性解读

MatrixOne 2.0.0 是一款 AI 驱动的云原生超融合数据库&#xff0c;采用了存算分离的架构&#xff0c;全面优化了云上资源利用效率。 MatrixOne兼容 MySQL 协议和语法&#xff0c;具备支持混合负载场景的能力&#xff0c;并结合向量数据类型、全文检索等特性&#xff0c;为生成式…

Qt Xlsx安装教程

Qt Xlsx安装教程 安装perl 如果没有安装perl&#xff0c;请参考perl Window安装教程 下载QtXlsxWriter源码 下载地址 ming32-make编译32 lib库 C:\Qt\Qt5.12.12\5.12.12\mingw73_32>d: D:\>cd D:\Code\QtXlsxWriter-master\QtXlsxWriter-master D:\Code\QtXlsxWrit…

【49】AndroidStudio构建其他人开发的Android项目

(1)做Android软件开发&#xff0c;通常会看一些其他人开发的项目源码&#xff0c;当将这些项目的源码通过git clone到本地之后&#xff0c;用AndroidStudio进行打开时&#xff0c;通常会遇到一些环境配置的问题。本文即用来记录在构建他人开发项目源代码这一过程中遇到的一些常…

day08 接口测试(3)——postman工具使用

下载 postman 的历史版本&#xff1a;Postman 历史版本下载 - 简书 我自己根据我的电脑&#xff0c;安装的地址为&#xff1a;https://dl.pstmn.io/download/version/9.31.32/osx_64 今天开始学习 postman 这个测试工具啦。 【没有所谓的运气&#x1f36c;&#xff0c;只有绝…

OpenCV相机标定与3D重建(10)眼标定函数calibrateHandEye()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算手眼标定&#xff1a; g T c _{}^{g}\textrm{T}_c g​Tc​ cv::calibrateHandEye 是 OpenCV 中用于手眼标定的函数。该函数通过已知的机器人…

day08 接口测试(4)知识点完结!!

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、postman读取外部数据文件&#xff08;参数化&#xff09; 1.1 数据文件简介 1.2 导入外部数据文件 1.2.1 csv文件 1.2.2 导入 json文件 1.3 读取数据文件数据 1.4 案例 1.5 生成测试报告 2、小…

linux 安装 Jenkins 教程

前言 Jenkins 是一个开源的自动化服务器&#xff0c;广泛用于持续集成&#xff08;Continuous Integration&#xff0c;CI&#xff09;和持续交付&#xff08;Continuous Delivery&#xff0c;CD&#xff09;领域。它帮助开发者自动化软件构建、测试、部署等过程&#xff0c;从…

IdentityServer4框架、ASP.NET core Identity

OAuth2.0 IdentityServer4 官网 中文官网 ASP.NET Core Identity提供了一个用来管理和存储用户账户的框架. IdentityServer4是基于ASP.NET Core实现的认证和授权框架&#xff0c;是对OpenID Connect和OAuth 2.0协议的实现。 IdentityServer是一个中间件,它可以添加符合OpenID…

ZZCMS2023存在跨站脚本漏洞(CNVD-2024-44822、CVE-2024-44818)

ZZCMS是一款用于搭建招商网站的CMS系统&#xff0c;由PHP语言开发&#xff0c;可快速搭建&#xff1a;医药招商、保健品招商、化妆品招商、农资招商、孕婴童招商、酒类副食类等招商网站。 国家信息安全漏洞共享平台于2024-11-14公布其存在跨站脚本漏洞。 漏洞编号&#xff1a…

使用Kubernetes部署MySQL+WordPress

目录 前提条件 部署MySQL和WordPress 编写yaml文件 应用yaml文件 存在问题及解决方案 创建PV(持久化卷) 创建一个PVC(持久化卷声明) 部署添加PVC 查看PV对应的主机存储 删除资源 查看资源 删除deployment和service 查看主机数据 删除PVC和PV 删除主机数据 前提条…

每日一刷——12.10——学习二叉树解题模式(二)

题目三&#xff1a;填充每个节点的下一个右侧节点指针1 题目描述&#xff1a;116. 填充每个节点的下一个右侧节点指针 - 力扣&#xff08;LeetCode&#xff09; 我的理解&#xff1a; 我的感觉是同父亲还好搞一点&#xff0c;感觉是在遍历到每一个节点的时候&#xff0c;就把…