基于uniapp 实现画板签字
直接上效果图
代码
<template><view class="container"><!-- 签名画布 --><view class="canvas-container"><canvas canvas-id="signCanvas" class="sign-canvas"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"></canvas></view><!-- 操作按钮 --><view class="button-group"><button @click="clearCanvas" class="btn">清除</button><button @click="saveSignature" class="btn">保存签名</button></view><!-- 保存的签名预览 --><view class="preview" v-if="imagePath"><image :src="imagePath" mode="widthFix"></image></view></view>
</template><script>
export default {data() {return {ctx: null, // canvas 上下文points: [], // 存储绘制点isDrawing: false, // 是否正在绘制imagePath: '' // 保存的签名图片路径}},onReady() {// 初始化canvas上下文this.ctx = uni.createCanvasContext('signCanvas', this);// 设置画笔样式this.ctx.setStrokeStyle('#000000');this.ctx.setLineWidth(4);this.ctx.setLineCap('round');this.ctx.setLineJoin('round');},methods: {// 触摸开始handleTouchStart(e) {this.isDrawing = true;const startX = e.touches[0].x;const startY = e.touches[0].y;this.points = [{x: startX, y: startY}];// 开始新路径this.ctx.beginPath();this.ctx.moveTo(startX, startY);},// 触摸移动handleTouchMove(e) {if (!this.isDrawing) return;const moveX = e.touches[0].x;const moveY = e.touches[0].y;this.points.push({x: moveX, y: moveY});// 只保留最近的两个点用于绘制线段if (this.points.length > 2) {const lastTwoPoints = this.points.slice(-2);this.ctx.moveTo(lastTwoPoints[0].x, lastTwoPoints[0].y);this.ctx.lineTo(lastTwoPoints[1].x, lastTwoPoints[1].y);this.ctx.stroke();this.ctx.draw(true);}},// 触摸结束handleTouchEnd() {if (this.points.length < 2) {// 如果只有一个点，画一个点const point = this.points[0];this.ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI);this.ctx.fill();this.ctx.draw(true);}this.isDrawing = false;this.points = [];},// 清除画布clearCanvas() {this.ctx.clearRect(0, 0, 10000, 10000);this.ctx.draw(true);this.imagePath = '';},// 保存签名saveSignature() {uni.canvasToTempFilePath({canvasId: 'signCanvas',success: (res) => {this.imagePath = res.tempFilePath;uni.showToast({title: '签名保存成功',icon: 'success'});// 这里可以添加将签名上传服务器的代码// this.uploadSignature(res.tempFilePath);},fail: (err) => {console.error('保存签名失败:', err);uni.showToast({title: '保存签名失败',icon: 'none'});}}, this);},// 上传签名到服务器（可选）uploadSignature(tempFilePath) {uni.uploadFile({url: '你的上传接口地址',filePath: tempFilePath,name: 'signature',success: (uploadRes) => {console.log('上传成功', uploadRes);},fail: (uploadErr) => {console.error('上传失败', uploadErr);}});}}
}
</script><style lang="scss" scoped>
.sign-canvas{width: 100vw;height: 70vh;
}
</style>
相关文章：
基于uniapp 实现画板签字
直接上效果图 代码 <template><view class"container"><!-- 签名画布 --><view class"canvas-container"><canvas canvas-id"signCanvas" class"sign-canvas"touchstart"handleTouchStart"touc…...
5.跳表（skiplist）
1. 什么是跳表 -skiplist skiplist 本质上也是一种查找结构，用于解决算法中的查找问题，跟平衡搜索树和哈希表的价值是一样的，可以作为key 或者 key/value 的查找模型。 skiplist ，顾名思义，首先它是一个 list 。实际上…...
GitHub 封禁中国 IP：影响、原因及应对
在技术全球化的当下，代码托管平台如同开发者的 “数字仓库”，而 GitHub 无疑是其中最广为人知的一座。但在 2025 年 4 月 13 日，一则令人震惊的消息在国内开发者社群中炸开了锅 ——GitHub 疑似封禁中国 IP。一时间，这一事件迅速成…...
基于工业操作系统构建企业数字化生态的实践指南
一、工业操作系统选型策略 工业操作系统（IIoT OS）的选型需从功能适配性、技术成熟度、生态兼容性三个维度综合评估。以玉麟科技DIOS平台为例，其 "云端 终端" 架构支持全球设备管理，通过工业知识模型实现设备健康度预测…...
金能电力领跑京东工业安全工器具赛道 2025年首季度数据诠释“头部效应”
金能电力领跑京东工业安全工器具赛道 2025年首季度数据诠释“头部效应” 在2025年第一季度京东工业平台“电料辅件-安全工器具”热销品牌的激烈竞争中，金能电力以一组极具说服力的数据，向行业展示了何为“绝对头部”。从成交金额、销量到流量、客群覆…...
基于大模型的反流食管炎手术全流程风险预测与治疗方案研究报告
目录 一、引言 1.1 研究背景 1.2 研究目的 1.3 研究方法与创新点 二、反流食管炎概述 2.1 定义与发病机制 2.2 临床症状与诊断标准 2.3 流行病学现状 三、大模型技术原理与应用现状 3.1 大模型基本原理 3.2 在医疗领域的应用案例 3.3 用于反流食管炎预测的优势 四…...
探索 C 与 Java/Kotlin 的语言差异：从指针到高阶函数
作为一名熟悉 Java 和 Kotlin 的开发者，初次接触 C/C 时常会遇到一系列概念上的“文化冲击”。本文将从几个关键点出发，帮助你更好地理解 C/C 与 Java/Kotlin 在语言设计上的核心区别。 1. 指向未知类型的指针 void*、结构体指针访问 ->、空指针常量 …...
Redis之缓存过期淘汰策略
面试切入点 Redis内存满了怎么办？ redis的默认内存多少？在哪里查看？如何设置修改？ 查看redis最大占用内存 打开redis配置文件，设置maxmemory参数，maxmemory是bytes字节类型，注意转换。 redi…...
Rust-引用借用规则
目录 一、概述 二、借用规则 三、详细解释 3.1 第一条规则 3.2 第二条规则 3.3 第三条规则 四、总结 Welcome to Code Blocks blog 本篇文章主要介绍了 [Rust-引用借用规则] ❤博主广交技术好友，喜欢文章的可以关注一下❤ 一、概述 Rust为确保程序在运行时不…...
【报错】解决pytorch出现RuntimeError: An attempt has been made to start a new process...
此错误是由于在 Windows 系统中使用多进程时，没有正确使用 if __name__ __main__: 语句块造成的。在 Windows 里，多进程的启动方式是 spawn，并非 fork，所以必须在主模块中使用 if __name__ __main__: 语句块来避免子进程重复执行…...
游戏引擎学习第228天
对上次的内容进行回顾，并为今天的开发环节做铺垫。 目前大部分功能我们已经完成了，唯一剩下的是一个我们知道存在但目前不会实际触发的 bug。这个 bug 的本质是在某些线程仍然访问一个已经被销毁的游戏模式（mode）之后的状态&…...
Pytorch Hook 技巧
通过 functools.partial 扩展 Pytorch Hook 机制 阅读 atom 文章源码时学习到的技巧，mark一下 通过 functools.partial，开发者无需修改原始函数或 PyTorch 的 Hook 机制，即可实现参数扩展与接口适配，这是 Python 函数式编…...
Python multiprocessing模块介绍
multiprocessing 是 Python 标准库中的一个模块，用于实现多进程并行计算，可以在多核 CPU 上显著提升程序性能，尤其适用于 CPU 密集型任务。Python 的多线程由于 GIL（全局解释器锁）限制，在进行 CPU 密集型任…...
[特殊字符] LoRA微调大模型实践：从MAC到Web的全流程指南
🚀 实践步骤概览 今天我们要在MAC上完成一个完整的AI项目闭环： 微调一个大模型 → 2. 导出模型并部署 → 3. 暴露API给web后端 → 4. 前端展示 🛠️ 微调模型准备 核心配置 框架：LLama-Factory 🏭 算法：…...
第二天 通过脚本控制物体移动和旋转
一、Unity脚本编程基础认知 1.1 为什么说脚本是Unity的灵魂？ Unity引擎的核心架构采用ECS（Entity-Component-System）模式，脚本作为组件的具体实现，控制着游戏对象的所有行为。统计显示，一个中等规模的Uni…...
在SpringBoot中访问 static 与 templates 目录下的内容
目录 步骤一：添加 Thymeleaf 依赖 (处理 Templates 目录)步骤二：配置静态资源路径 (可选但建议了解)步骤三：访问不同目录下的 HTML 文件访问 static 目录下的 HTML 文件访问 templates 目录下的 HTML 文件 总结 在使用 Spring Boot 开发 Web …...
常见的 API 设计风格
在软件开发中，常见的 API 设计风格主要有以下几种，每种风格适用于不同的场景和需求： 1. RESTful API (主流) 特点： 基于 HTTP 协议，使用标准方法（GET/POST/PUT/DELETE）资源导向（UR…...
Grass.io项目现状：DePIN亮眼明星，扩张中的AI数据银行
Grass.io项目现状：DePIN亮眼明星，扩张中的AI数据银行 Grass如何在DePIN项目丛林中脱颖而出？ 答案在于其"零门槛"策略——用户是基石，其他一切皆为杠杆。 Grass通过"技术+模式"双轮驱动打破行业内卷：零知识证明技术与Solana Layer2架构确保数据真实…...
ERR_PNPM_DLX_NO_BIN No binaries found in tailwindcss
场景复现： 最近在vue3项目中安装了tailwindcss，但是它默认帮我安装的版本是4XX的，导致我执行 npx tailwindcss init -p报错了。 解决方案： 更改tailwindcss的版本为3 pnpm add -D tailwindcss3再次执行生成tailwindcss的初始…...
2025“钉耙编程”中国大学生算法设计春季联赛（6）（1001，1003，1008）：1007
不知道为啥，感觉后面的联赛题目有挺多出的是模拟题目（这三道题目难度依次递增） 1001 #include<bits/stdc.h> using namespace std; #define int long long const int op1e97; const int o1e34;inline void solve(){int n,a,b,c;cin>…...
Leetcode 2814. 避免淹死并到达目的地的最短时间
1.题目基本信息 1.1.题目描述 现给定一个 n * m 的索引从 0 开始的二维字符串网格 land，目前你站在为 “S” 的单元格上，你需要到达为 “D” 的单元格。在这片区域上还有另外三种类型的单元格： “.”：这些单元格是空的。 “X”…...
4.15【A】pc homework3~
5 假设read_document函数可以实现读取第m个文件，并返回该文本文档的每行数据 那么考虑双层并行结构，外层为文档级并行，内层为每个文档内的行级并行 动态分配文档任务，避免线程闲置 #include <omp.h> int total_words …...
aslist和list的区别
Arrays.asList和List的主要区别在于它们的固定长度和不可变性、与原始数组的关系、性能以及使用场景。 一、固定长度和不可变性 Arrays.asList：通过Arrays.asList方法创建的List是一个固定长度的List，其长度与原始数组相同。这意味着你不能通过添…...
Notepad++中将文档格式从Windows（CR LF）转换为Unix（LF）
在Windows中用记事本写了一个.sh的Linux运行脚本，是无法直接在Linux中执行，需要首先把文本编码格式转换为Unix的，特别是换行符这些，转换步骤如下： 1、打开文档 在Notepad中打开需要转换的文件。 2、进入文档格式转换…...
控制理论与应用Latex模版/中文Latex
报错1 ! Package CJK Error: Invalid character code. 解决方法： 用记事本打开tex文件 另存为，选择utf-8格式 ! paragraph ended before \mulearg was complete. 备注，控制理论与应用有个自己的模版内容，是通过导入方式调用…...
)
Linux指令和权限(10-3)
部分指令和权限 一丶指令 1.echo echo的基础作用向显示器输出。作用类似于C语言的printf，C的cout。 1.1 echo 输入内容 – 会显示输出到屏幕的下一行 echo "hello Linux"1.2 echo 输入内容>目标文件 – 向目标文件输出内容（输出重定向&…...
算法堆排序记录
【算法】排序算法之堆排序 - 知乎 应用场景：获取第n个大或者小的数 操作步骤： 1、将数组构造成堆 2、调整根节点为最大堆 ->倒序对每个根节点执行最大化 ->根节点最大化过程中如果发生交换，需要保证子节点也为最大堆（执行…...
2025年第十六届蓝桥杯省赛JavaB组真题回顾
第16届蓝桥杯省赛已经结束了，第一次参加也是坐牢了4个小时，现在还是来总结一下吧（先声明以下的解法，大家可以当作一种思路来看，解法不一定是正解，只是给大家提供一种能够正常想到的思路吧） 试题…...
qt 事件及事件过滤
在 Qt 中，事件是对象与用户或系统交互的基本方式。Qt 通过事件机制使得控件和其他对象可以响应用户的操作（如鼠标点击、键盘输入等），以及其他系统级事件（如窗口大小变化、定时器事件等）。 Qt 事件处理机制…...
RPCRT4!OsfCreateRpcAddress函数分析之AssociationBucketMutexMemory数组的填充
第一部分： 1: kd> p RPCRT4!OsfCreateRpcAddress0x28: 001b:77c0f4f5 e888e5ffff call RPCRT4!OSF_ADDRESS::OSF_ADDRESS (77c0da82) 1: kd> t RPCRT4!OSF_ADDRESS::OSF_ADDRESS: 001b:77c0da82 ?? ??? 1: kd> kc # 00 RPCRT4!…...
lvs + keepalived + dns 高可用
项目题目 实验步骤： 1.规划各自IP地址： 以lb-backup为例,修改ip地址即可 [rootlb-backup ~]# nmcli connection modify ens160 ipv4.addresses 192.168.72.106/24 ipv4.dns 223.5.5.5 ipv4.gateway 192.168.72.2 ipv4.method manual connection.autoc…...
多模态医学AI框架Pathomic Fusion，整合了组织病理学与基因组的特征
小罗碎碎念 在医学AI领域，癌症的精准诊断与预后预测一直是关键研究方向。 这篇文章提出了Pathomic Fusion这一创新框架，致力于解决现有方法的局限。 传统上，癌症诊断依赖组织学与基因组数据，但组织学分析主观易变，基因…...
安卓基础（SQLite）
基础 import sqlite3# 连接到数据库 conn sqlite3.connect(mydatabase.db) cursor conn.cursor()# 执行查询 cursor.execute("SELECT * FROM users") rows cursor.fetchall()for row in rows:print(row)# 关闭连接 conn.close() 创建一个继承自 SQLiteOpenHelpe…...
代码提错分支处理方法
如果你不小心将代码提交到了测试分支，并且希望将这些更改应用到正式分支，同时又不想引入测试分支上的其他未准备好合并的代码，可以按照以下步骤操作： 查看提交记录：首先确认你在测试分支上所做的具体提交。切换到正式…...
OpenGL学习笔记（几何着色器、实例化、抗锯齿）
目录 几何着色器爆破物体法向量可视化 实例化（偏移量存在uniform中）实例化数组（偏移量存在顶点属性中）小行星带 抗锯齿SSAA（Super Sample Anti-aliasing）MSAA（Multi-Sampling Anti-aliasing&…...
Git 学习笔记
这篇笔记记录了我在git学习中常常用到的指令，方便在未来进行查阅。此篇文章也会根据笔者的学习进度持续更新。 网站分享 Git 常用命令大全 Learn Git Branching 基础 $ git init //在当前位置配置一个git版本库 $ git add <file> //将文件添加至…...
浅析停车管理系统接入AI的提升
随着人工智能技术的快速发展，传统停车管理系统正在经历智能化变革。AI技术的引入不仅解决了停车管理中的诸多痛点，更为智慧城市建设提供了重要支撑。本文将从效率提升、体验优化、管理升级三个方面，详细分析AI技术为停车管理系统带来的显著提…...
PCL八叉树聚类
PCL八叉树聚类 主要流程完整代码部分代码解析关键元素解析std::for_each算法Lambda表达式等价 效果 主要流程 读取点云数据：从PCD文件中加载原始点云构建八叉树：对点云进行八叉树空间划分获取体素中心：提取八叉树中所有被占据的体素中…...
微服务最佳实践：全链路可用性保障体系
微服务最佳实践：全链路可用性保障体系 一、流量管控：分级限流与负载均衡 （一）动态限流策略 单机限流：采用令牌桶（允许突发流量，固定速率生成令牌）或漏桶算法（流量整形，固定速率处理请求），如Go的time/rate、Uber的ratelimit库，控制单节点流量峰值。分布式限流：通…...
智慧声防：构筑海滨浴场安全屏障的应急广播系
海滨浴场是夏季旅游的热门目的地，但潮汐变化、离岸流、突发天气、溺水事故等安全隐患时刻威胁着游客安全。传统的安全管理依赖人工瞭望和喊话，存在覆盖范围有限、响应速度慢等问题。“智慧声防”应急广播系统，通过智能化、网络化、多场景协同…...
linux-vi和文件操作
在 Linux 系统的世界里，有一个核心思想贯穿始终，那就是 “万物都是文件”。这一理念极大地简化了系统资源的管理和操作，为用户和开发者提供了统一且高效的交互方式。本文将深入探讨这一理念在 Linux 文件系统中的具体体现，从硬盘分…...
MIT6.S081 - Lab8 Locks（锁优化 | 并发安全）
本篇是 MIT6.S081 2020 操作系统课程 Lab8 的实验笔记，目标是在保证并发安全的前提下，重新设计 内存分配器 和 块缓存 这两个部分代码，提高系统并发性能。 对于有项目经验的同学来说，实验的难度不算高，重点在于找出 “…...
TMS320F28P550SJ9学习笔记15：Lin通信SCI模式结构体寄存器
今日初步认识与配置使用Lin通信SCI模式，用结构体寄存器的方式编程 文章提供完整工程下载、测试效果图 我的单片机平台是这个： LIN通信引脚： LIN通信PIE中断： 这个 PIE Vector Table 表在手册111页： 这是提到LINa的PI…...
JavaWeb 课堂笔记 —— 11 MySQL 多表设计
本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…...
)
2025年最新总结安全基础(面试题)
活动发起人@小虚竹 想对你说： 这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。我们诚挚邀请…...
调试chili3d笔记 typescript预习
https://github.com/xiangechen/chili3d 用firefox拓展附加进程 打开开发者 工具，这个网页按f12没反应，手动打开 创建一个立方体可以看到运行了create.box方法，消息来自commandService.ts 位置 太久没写c了，3目都看不懂了 c没有…...
【北交互联-注册/登录安全分析报告】
前言 由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞…...
YOLOv2学习笔记
YOLOv2 背景 YOLOv2是YOLO的第二个版本，其目标是显著提高准确性，同时使其更快 相关改进： 添加了BN层——Batch Norm采用更高分辨率的网络进行分类主干网络的训练 Hi-res classifier去除了全连接层，采用卷积层进行模型的输出&a…...
2025年国企社招欧治链金再生资源入职测评笔试中智赛码平台SHL测试平台Verify认知能力测试
1、欧治链金政治素质测试（中智赛码平台，电脑端作答） 10个单选题、5个多选题、1个问答题 2、欧治链金综合素质测试（SHL测试平台Verify认知能力测试，电脑端作答） 3、欧治链金职业性格测试（中智职…...
MySQL索引和事务
MySQL索引和事务 1.索引1.1概念1.2作用1.3使用场景1.4使用1.4.1查看索引1.4.2创建索引1.4.3删除索引 2.事务2.1使用2.1.1开启事务2.1.2执行多条SQL语句2.1.3回滚或提交 2.2事务的特性2.2.1回滚是怎么做到的2.2.2原子性2.2.3一致性2.2.4持久性2.2.5隔离性2.2.5.1脏读2.2.5.2不可…...