TaroReact小程序实现签名功能完整版本篇文章我们完整的实现一个签名功能,包括从绘制到显示的所有代码,使用T

在开始写码之前先简单介绍一下我这里的设计,一共分为三层:

咱们首先来实现最核心的canvas组件。

因为小程序的api很多还是回调形式的,Taro也不例外,所以先来把两个主要操作转换成图片和获取尺寸封装成async形式:

接下来看一下jsx部分:

index.module.less

.container{position:relative;overflow:hidden;//用于绘制签名的canvas占满全屏.signCanvas{width:100vw;height:100vh;overflow:hidden;}//把旋转内容的canvas藏起来.saveCanvas{position:absolute;top:-600px;left:0;z-index:-1;}}3、初始化canvas接下来完成初始化工作,简单来说就是把canvas的绘图上下文拿到手,然后配置一些线条颜色粗细等。如果你想添加一些默认的提示文字也可以在这里完成。

由于我的签名组件是全屏显示的,所以这里直接把SystemInfo的屏幕长宽赋值给canvas了,这里有一个很难缠的轨迹绘制偏移问题,下面会细讲。

ok,现在来搞一下绘制的核心逻辑,其实很简单,我们在上面的jsx里可以看到一共监听了两个方法:onTouchStart和onTouchMove,思路很简单:

说白了就是绘制一条折线,折线的圆润程度取决于onTouchMove的触发频率,对应代码如下:

//绘制轨迹信息constlineInfo=useRef({startX:0,startY:0});constcanvasStart=(e)=>{e.preventDefault();lineInfo.current.startX=e.changedTouches[0].clientXlineInfo.current.startY=e.changedTouches[0].clientYcontext.current.beginPath()}constcanvasMove=(e)=>{e.preventDefault();letx=e.changedTouches[0].clientXlety=e.changedTouches[0].clientYcontext.current.moveTo(lineInfo.current.startX,lineInfo.current.startY)context.current.lineTo(x,y)context.current.stroke()context.current.draw(true)lineInfo.current.startX=xlineInfo.current.startY=y}这里我们使用useRef保存上个坐标信息而不是useState,原因在于我们是直接和canvasapi交互的,没必要在react层面再添加一个高频的重渲染操作。

并且注意其中的e.preventDefault(),如果不阻止默认行为的话每次触摸开始都会有一个拖拽屏幕的效果。

至此,我们已经完成了核心的签名功能:

这个还不是固定偏移,而是越往右下角偏移的越大,所以很多人初见都会一脸懵逼。去网上搜了搜,按照教程里的做法设置了canvas长宽之后发现还是没解决,很难受。这里就来详细的说明一下。

导致这个问题的核心是:canvas的DPI和屏幕的DPI不同!

为了理解这个问题,我们先来做个小实验,首先回到上面的样式文件里,把canvas组件的长宽从全屏设置为四分之一屏:

.container{//...//用于绘制签名的canvas占满全屏.signCanvas{//把下面这俩从100改为50width:50vw;height:50vh;overflow:hidden;}//...}然后回到浏览器再试一下:

发现了么?绘制出来的笔迹恰好是我们实际触摸位置的四分之一!打开F12看一下:

这里可以看到Taro的Canvas组件由一个外层的html元素和内部的原生canvas构成,外层的taro-canvas-core容器负责监听touch事件,而内部的原生canvas负责绘制内容。还记得之前我们代码里初始化canvas时赋值的长宽么:

useReady(()=>{constquery=Taro.createSelectorQuery()query.select('#myCanvas').context(res=>{if(!res.context)return//————————————————注意这里————————————————const{windowWidth,windowHeight}=Taro.getSystemInfoSync()res.context.canvas.width=windowWidth;res.context.canvas.height=windowHeight;//...}).exec()})在这里我们把整个window的宽高赋值给了canvas,也就是说。在只有四分之一面积的情况下,canvas里塞下了和整个屏幕一样多的像素点!

这下就清晰了,touch事件传给我们基于屏幕的坐标,而canvas的分辨率和屏幕一样,但是尺寸只有屏幕的四分之一(即刚才提到的DPI不一致),所以绘制出来的线条就是我们实际触摸轨迹的四分之一等比映射。

明白了原因想解决就简单了,既然实际尺寸是四分之一,那我们把canvas的分辨率也设置为屏幕的四分之一,或者把touch事件的坐标放大为原来的两倍,保证canvas和屏幕的DPI是一致的就可以:

方法一:缩小canvas分辨率

useReady(()=>{constquery=Taro.createSelectorQuery()query.select('#myCanvas').context(res=>{if(!res.context)returnconst{windowWidth,windowHeight}=Taro.getSystemInfoSync()//把canvas分辨率也改为四分之一res.context.canvas.width=windowWidth/2;res.context.canvas.height=windowHeight/2;//...}).exec()})效果如下:

方法二:放大touch事件的坐标:

constcanvasStart=(e)=>{e.preventDefault();//——————————看后面的乘以2——————————lineInfo.current.startX=e.changedTouches[0].clientX*2lineInfo.current.startY=e.changedTouches[0].clientY*2context.current.beginPath()}constcanvasMove=(e)=>{e.preventDefault();//——————————这里也乘以2了——————————letx=e.changedTouches[0].clientX*2lety=e.changedTouches[0].clientY*2//...}效果如下:

可以看到,笔迹已经跟手了,并且我们还可以注意到,由于方法二的分辨率更高,所以他的笔迹更细腻一点。

这个笔迹偏移问题的核心在于canvas和屏幕的DPI不匹配,所以说我们单纯抄网上教程的配置是没什么用的,你需要根据自己的canvas宽高来配置,例如UI让你把签名区域设置为100%宽度,80%高度。你在css里写width:100vw;height:80vh;,那么在初始化canvasContext的时候你就需要canvas.height=windowHeight*0.8;

简单说就是style里的宽高比例要和canvas的实际像素比例相同。

现在基本的逻辑都完成了,再把一些交互的api封装好,通过forwardRef转发出去就可以了,组件完成代码如下,导出图片的逻辑在saveAsImage,有兴趣的同学可以读一下:

上面的签名canvas组件可以拿到其他小程序项目里用,而现在要做的这个组件就是用来实现本项目的UI需求的,这部分没什么难点,直接贴代码了:

src\pages\sign\index.tsx

.container{position:relative;.btns{position:absolute;top:0;left:0;width:100vh;transform-origin:00;//注意这里,手动把按钮组横了过来transform:rotateZ(90deg)translateY(-100%);display:flex;justify-content:center;padding:32px0px;.btn{margin:0px16px;width:20vh;}}}因为小程序内置的横屏会把标题也横过来,导致签名区域变窄,所以这里选择手写横屏而不是直接用小程序内置的横屏配置。

并且注意onSubmit中,从routerparams里读了一个type,然后把导出的签名图base64发射到名字为type的事件上。所以说,想要发起签名的页面需要在导航到本页前先通过Taro.eventCenter绑定一个事件,然后把事件名字通过routerparams(即type变量)告诉签名页,这样让双方可以进行签名图的传递。

最后,我们来实现如何发起签名和如何接受并显示得到的签名图:

这里需要注意的是,我用的是Taro内置的Image组件,而不是taro-vant的Image,因为这里有个小坑,taro-vant的Image没法直接显示base64图片,没找到原因,Taro的Image就可以。

THE END
1.个性艺术签名2025正式版下载安装个性艺术签名截图 个性艺术签名简介 《个性艺术签名》是一款专业、便捷的签名设计工具,致力于为您打造独一无二的个性签名。无论是日常生活、商务场合还是网络社交,这款应用都能让您轻松拥有大气、美观的签名,让您在他人眼中留下深刻印象。它拥有多种字体选择,方便用户根据个人喜好和需求,快速制作出符合自己风格的签名https://www.xinxiazai.net/work/212964.html
2.AppStore上的“eSignMaster:MakeSignature”我们灵活的电子签名应用程序让您现在免费签名、填写和填写签名表格,只需轻点几下即可。无需切换应用程序即可签署 PDF。 使用我们先进的 PDF 签名器标记文档、签署文件和签署文档。得益于我们用户友好的设计,您可以轻松填写和签署文档,这使其成为顶级的电子签名应用程序和电子签名应用程序。 利用数字签名制作器https://apps.apple.com/cn/app/esignmaster-make-signature/id6738962277
3.连笔签名设计生成工具签名设计软件分享腾讯云开发者社区SignNow是一款专注于电子签名领域的应用程序。它不仅提供了在线手写签名的功能,还可以将已有的签名图片导入并进行编辑。用户可以使用鼠标、触摸屏或笔来创建电子签名,并可以随时调整签名的大小和位置。 4.HelloSign HelloSign是一款全面的电子签名解决方案,它提供了电子签名的创建、发送和管理功能。除了设计生成连笔签名外,https://cloud.tencent.com/developer/news/1187689
4.每日分享(最新版2023免费设计艺术签名多种模式微信小程序源码)2.最新版2023免费设计艺术签名多种模式微信小程序源码 支持微信流量主功能 免费设计艺术签名,支持微信流量主,喜欢的小伙伴可以玩玩! 效果展示: 相关链接 官网:https://www.demosoftware.cn 分享博客:https://blog.demosoftware.cn 休闲阅读:https://novel.demosoftware.cn https://blog.csdn.net/u012838765/article/details/129629186
5.2023免费设计艺术签名多种模式微信小程序源码带流量主某交易网站上卖500元的源码,免费设计艺术签名,支持微信流量主,喜欢的小伙伴可以玩玩! 搭建安装教程参考: 微信小程序搭建开发、修改调试、编译打包上线使用教程 程序演示图: THE END 微信小程序 喜欢就点个赞再走呗~ 6赞赏 上一篇 最新校园跑腿微信小程序源码 https://www.yizhanzzw.com/34447.html
6.签名连笔字,签名连笔字转换器在线转换,签名连笔字在线生成器,签名签名连笔字艺朮字体在线生成器 艺朮字网的艺朮字生成栏目为您提供签名连笔字艺朮字体在线生成器和字体预览。 首页艺朮字生成艺术字体签名连笔字艺朮字体在线生成当前字体字体示例图背景透明文字颜色 签名连笔字 选中后背景透明 背景颜色宽度高度字号 扫码访问小程序也生成艺术字https://www.yishuzi.com.cn/edit/2/44
7.无聊写的小玩意,签名设计小程序1.0版本,发出来给大伙玩玩楼主用的应该是这个网站的效果图:http://m.uustv.com/ 其实随便搜索,有很多免费在线签名设计 https://www.52pojie.cn/thread-1336451-1-1.html
8.才签爱手写(手写签名设计)是一个关注手写相关的设计师交流以及变现的原创设计平台,包括手写签名、手写logo、手写文案等方面的纯原创类型的网站。欢迎相关设计师入住,一起共赢。免费提交姓名有机会获得高端签名。https://www.aishouxie.cn/
9.艺术签名设计小程序艺术字体分类发现字体艺术签名设计小程序 标签: 艺术 最后更新: 2025-01-24 共 5个字体 简介: 艺术签名设计小程序 FuturaFuturisCondExtraBoldC语言:英文 下载 BaseNineC语言:英文 下载 NevaC-Italic语言:英文 下载 OpiumNewC-BoldItalic语言:英文 下载 RubricaSmallCapsC语言:英文http://www.qiuziti.com/fontlist2?id=1090161
10.安装微信签名不一致设计古典微信签名设计教程摘要:安装微信签名不一致设计,古典微信签名设计教程,新片场素材小编史岚安装微信签名不一致设计,古典微信签名设计教程相关内容整理,如果您对安装微信签名不一致设计,古典微信签名设计教程感兴趣欢迎访问免费阅读。 安装微信签名不一致设计,古典微信签名设计教程 一、安装微信签名不一致在线设计教程介绍 https://edu.xinpianchang.com/article/baike-60523.html
11.Java抖音小程序下单生成签名抖音小程序编写好看的皮囊千篇一律,有趣的灵魂万里挑一。最近在学习C#编程语言,接触到了winform,记得曾经在抖音上看到过这样一个小程序,觉得很有意思,就用C#语言实现了下,实现起来很简单(可以说没有任何技术含量)程序执行后效果如下。视频演示传送门 https://blog.51cto.com/u_16099326/10986467
12.深圳APP开发微信小程序开发深圳网站设计微信公众号开发深圳星翼创想网站设计公司成立于2010年,主要提供高端网站设计,微信公众号开发,微信小程序开发,网站建设,微信公众号运营托管,办公系统定制开发等服务,已为两千多家公司提供了网站建设服务!https://www.iswweb.com/
13.抖音不露脸直播项目,签名头像设计小白均可学会日入200+参加小程序计划,引导粉丝到小程序取图,CPS广告变现。 5、抖音橱窗变现:大家都知道喜欢捣鼓头像的人,一般都是16-30岁左右的年轻人,现在年轻人喜欢时尚,所以可以在橱窗上挂各种衣服、鞋子,首饰、等等的 设备要求:手机电脑都可以,最好有台电脑,效率高 抖音不露脸直播项目,签名头像设计小白均可学会日入200+ 网盘下载https://www.zhumengwl.com/2022/0906/16946.html
14.小程序中实现手写签名(9.149.18)本期主题:小程序中实现手写签名 前言:在小程序产品设计上,有许多对列表需要手写签名的情景,如:签收快递,签约合同或协议时,用户通过在小程序中操作来实现手写签名。一、效果预览 二、实现思路 整体思路就是监听画布的触摸操作,记录触摸时坐标,计算触摸实时移动坐标并计算移动距离,并将上次坐标通过划线的方式延伸https://open.alipay.com/portal/forum/post/14301013
15.签名设计网站免费下载网站建设>主题内容>签名设计网站免费下载 您好,您查找的“签名设计网站免费下载”问题,目前没有相关的答案,您可以通过下面查看是否有与“签名设计网站免费下载”相关内容!也可以扫描二维码添加微信了解相关内容。 相关前20条内容: 小程序能否重振O2O生态?-京杭网网站建设公司 https://www.gzit.cn/theme/2463026.html
16.姓名艺术字签名设计免费版精辟60条(8)、比如说很多野路子设计师,不知道艺术签名的基本概念,见客户就问你要商务签还是艺术签?其实艺术签名是一个总体概念,包含所有签名的种类,商务签就是艺术签功能分类的一种。 (9)、首先,要培养一点书法基础(我从八岁的时候就开始学习书法) (10)、“签名了”是一款免费设计艺术字签名的小程序 http://www.awcms.net/shuoshuo/489361.html
17.表格制作在线签名(简笔签名设计在线生成)微信在线表格电子签名怎么弄 点击小程序。 点击小程序,打开小程序后,点击右上角的放大镜,输入好签会签审批手写签名,点击确定新建即可。 微信WeChat是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,由张小龙所带领的腾讯广州研发中心产品团队打造。 https://www.huoban.com/news/post/124220.html