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

文章目录


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

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

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

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;如果不处理…

API接口安全:保障电商数据不被泄露的关键

在当今的数字化时代&#xff0c;电子商务&#xff08;电商&#xff09;已成为全球商业活动的重要组成部分。随着电商平台的日益增多和用户数据的海量积累&#xff0c;数据安全问题也日益凸显。API&#xff08;应用程序编程接口&#xff09;作为电商平台与外部系统交互的桥梁&am…

金融机构远程办公面临的安全挑战

当前&#xff0c;金融机构的业务模式、IT架构都发生了深刻变化。在建设远程办公系统时&#xff0c;金融机构需要面对以下几个方面的挑战&#xff1a; 如何实现“边界模糊化”网络环境下的安全接入&#xff1f; 随着金融机构基础设施云化、业务互联网化和办公移动化&#xff0…

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…

apisix lua插件开发记录

1 如何匹配路径中的参数 文章给出了具体的方法&#xff0c;但有隐藏的坑未提及。 router radixtree_uri_with_parameter 启用后&#xff0c;对路径上的参数名有要求&#xff0c;不能有_。否则会提示404&#xff0c;因为 router radixtree_uri_with_parameter解析不了。 2 插…

洛谷 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目录中的数据…

【21天学习AI底层概念】day2 机器学习基础

按照由浅入深的顺序&#xff0c;下一步学习 机器学习&#xff08;Machine Learning&#xff09; 的基础是最自然的选择。机器学习是人工智能的核心技术之一&#xff0c;很多AI系统都依赖它。以下是学习路线建议&#xff1a; 第二步&#xff1a;机器学习基础 学习目标&#xff…

在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字段有个很重要的作用就是记录…

三星索引概念

三星索引概念 对于一个查询而言&#xff0c;一个三星索引&#xff0c;可能是其最好的索引。如果查询使用三星索引&#xff0c;一次查询通常只需要进行一次磁盘随机读以及一次窄索引片的 扫描&#xff0c;因此其相应时间通常比使用一个普通索引的响应时间少几个数量级。 三星索引…

文字稿 | 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…

记一次js Long类型精度丢失问题

背景&#xff1a; 微信小程序和后端springboot后端服务联调&#xff0c;用户id是19位的数值型&#xff0c;通过postman工具调用没有精度问题&#xff0c;小程序调用用户id和后端返回的不一致。 解决办法 网上文章很多&#xff0c;自行搜索吧&#xff0c; 这是站内的一个博客&…

【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 中用于手眼标定的函数。该函数通过已知的机器人…