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.3个免费AI工具,帮你快速生成高质量文案!文案创作不再是“一个人孤独的战斗”,AI工具为每一位创作者提供了高效便捷的帮手。无论是ChatGPT的智能对话、Canva Magic Write的设计嵌入,还是Copy.ai的多模板支持,这些工具都能够让你的创作过程更加轻松。 当然,AI工具生成的内容只是一个起点,最终的文案还需要根据实际需求进行打磨和调整。希望这3款免费AI工具能够https://zhuanlan.zhihu.com/p/11433750279
2.免费签名软件有哪些APP推荐免费签名软件有哪些下载豌豆荚免费签名软件有哪些榜单为您提供最新免费签名软件有哪些大全,这里不仅有免费签名软件有哪些安卓版本APP、历史版本应用下载资源,还有类似免费签名软件有哪些的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/390914/
3.2023免费设计艺术签名多种模式微信小程序源码带流量主某交易网站上卖500元的源码,免费设计艺术签名,支持微信流量主,喜欢的小伙伴可以玩玩! 搭建安装教程参考: 微信小程序搭建开发、修改调试、编译打包上线使用教程 程序演示图: THE END 微信小程序 喜欢就点个赞再走呗~ 6赞赏 说点什么抢沙发 说点正能量的内容吧 https://www.yizhanzzw.com/34447.html
4.配音在线生成免费人工智能名片在线制作免费生成?二、人工智能名片在线制作免费生成? 1、手机登录个人微信页面,然后依次查找到“发现”——点击“小程序”。 2、在右上角的小放大镜处——搜索框输入“名片”。 3、在搜索下拉框会出现多种可以创建微信小程序名片的小程序,这时候我们只需要选择第一个“名片”或者你喜欢的小程序即可创建属于自己的微信小程序名片。https://tool.a5.cn/article/show/72608.html
5.设计签名小程序制作软件(设计你的签名小程序篇)设计签名小程序制作软件是一款方便快捷的工具,可用于创建个性化的签名小程序。本文将从四个方面详细阐述设计签名小程序制作软件的特点和功能,包括界面设计、自定义选项、数据管理和云端部署。通过对这四个方面的介绍,读者可以了解到设计签名小程序制作软件的优势和应用场景,从而引起读者的兴趣。 https://www.ahbfapp.com/news/1985.html
6.签名设计1982男神艺术签名签名小程序定制你的个性艺术签名00:00/00:00 签名设计 1982男神艺术签名 签名小程序 定制你的个性艺术签名 拳击那点事发布于:江西省2023.06.23 00:00 分享到 签名设计 1982男神艺术签名 签名小程序 定制你的个性艺术签名https://www.sohu.com/a/689522513_100114195
7.某站卖500块钱的艺术签名设计小程序程序员阿鑫某站卖500块钱的艺术签名设计小程序 某交易网站上卖500元的源码,免费设计艺术签名,支持微信流量主 文件下载: 您需要登录/注册后才能查看相关资源https://www.cxyax.com/?post=1350
8.艺术签名源码字节跳动小程序开发抖音艺术签名小程序源码艺术签名设计小程序源码 最新字节跳动小程序抖音艺术签名小程序源码/艺术签名设计小程序源码 这个小程序是一个非常有用的工具,可以帮助您创建各种各样的艺术签名,以便在社交媒体平台上展示您的个性和创意。 该小程序具有许多功能,例如: 支持各种字体和颜色:您可以根据自己的喜好https://www.iteye.com/resource/q431231353-5290647
9.小程序登录java怎么验签在小程序登录过程中,为了保证请求的合法性和安全性,需要对请求进行验证。本方案将介绍如何在Java后端实现小程序登录验证的过程。 2. 方案设计2.1 生成签名 在小程序端,用户需要使用登录凭证code向服务器发起登录请求。服务器端接到请求后,需要先生成签名验证请求。 https://www.tulingxueyuan.cn/tlzx/jsp/5303.html
10.抖音不露脸直播项目,签名头像设计小白均可学会日入200+参加小程序计划,引导粉丝到小程序取图,CPS广告变现。 5、抖音橱窗变现:大家都知道喜欢捣鼓头像的人,一般都是16-30岁左右的年轻人,现在年轻人喜欢时尚,所以可以在橱窗上挂各种衣服、鞋子,首饰、等等的 设备要求:手机电脑都可以,最好有台电脑,效率高 抖音不露脸直播项目,签名头像设计小白均可学会日入200+ 网盘下载https://www.zhumengwl.com/2022/0906/16946.html
11.签名设计,免费签名设计,手写LOGO设计,手写招牌设计,手写文字设计手写仔是一个关注手写相关的设计师交流以及变现的原创设计平台,包括手写签名、手写logo、手写文案等方面的纯原创类型的网站。欢迎相关设计师入住,一起共赢。免费提交姓名有机会获得高端签名。https://shouxiezai.com/
12.签名LOGO设计免费生成器签名LOGO免费设计在线生成标智客签名LOGO在线设计软件为企业在线生成签名LOGO图片,提供签名品牌标志生成模板、签名标志图片素材下载,是LOGO免费在线生成平台!https://www.logomaker.com.cn/logo/tag/5740/
13.最新艺术签名小程序/字节跳动小程序源码:温馨提示丨升级SVIP终身会员可免费下载海量资源 升级会员 下单流程: 选择资源 赞助获取 网盘下载 额外(二次开发 网站建设) 详情介绍 相关文章 发表评论 SVIP活动倒计时仅剩:17时15分35秒527毫秒 详情介绍 正文: 新字节跳动小程序抖音艺术签名小程序源码/艺术签名设计小程序源码,是一款实用工具,能够帮助用户制作各种https://www.huizhanii.com/33072.html
14.微信小程序实现电子签名功能的方法创新互联这篇文章主要讲解了微信小程序实现电子签名功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。成都创新互联是一家专业提供原阳企业网站建设,专注与成都网站制作、成都做网站、H5场景定制、小程序制作等业务。10年已为原阳众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中http://chengdu.cdxwcx.cn/article/doiiid.html
15.9款好用到爆的微信小程序,光速提升你的工作效率!这个小程序,让你告别打印快递签名文件,在线就可以签名。 这是一款原笔迹签名小程序,导入需要签字的文件,然后小程序里手写自己的签名,调整好签字的位置,最后生成签字文件链接,对方点击链接即可进行签字。 适用于客户签字确认、公司签字审批、多人联名签字等。支持电脑端同步,Word、非常方便! http://www.360doc.com/content/12/0121/07/4310958_960014897.shtml
16.小程序中实现手写签名(9.149.18)在小程序产品设计上,有许多对列表需要手写签名的情景,如:签收快递,签约合同或协议时,用户通过在小程序中操作来实现手写签名。一、效果预览 二、实现思路 整体思路就是监听画布的触摸操作,记录触摸时坐标,计算触摸实时移动坐标并计算移动距离,并将上次坐标通过划线的方式延伸到当前坐标,就是将手指整体运动曲线分解https://open.alipay.com/portal/forum/post/14301013
17.免费为你设计属于你的艺术签一字签的软件下载免费为你设计属于你的艺术签、一字签的软件的话,网页版的朋友需要使用微信扫码下方的小程序码进入小程序底部下载所需的文件,如有什么问题可以直接在小程序评论,我有时间会第一时间回复,下载所需积分可通过小程序端打卡签到、评论文章获得。网页端:艺术签、一字签的软件 https://mznzd.com/cqkj/1121.html
18.字节跳动抖音艺术签名saas独立版平台小程序v1.1.36+抖音前端–最新字节跳动小程序抖音艺术签名小程序源码/艺术签名设计小程序,这个小程序是一个非常有用的工具,可以帮助您创建各种各样的艺术签名,以便在社交媒体平台壹锋源码上展示您的个性和创意。该小程序具有许多功能,例如:支持各种字体和颜色:您可以根据自己的喜好选择不同的字体和颜色来创建独特的签名。内置模板:如果您没有https://www.ttbobo.com/4410.html
19.名人签名封之设计师篇全程担保全程免费,北京一枚小程序邮币卡交易平台签名和信封相映成辉,为信封增色不少。我们一起看一下,邮票设计师的签名,能为信封带来多少星光吧。 北京一枚邮币资讯邮票钱币高价收购、回收,免费鉴定评估,全国上门服务。高价收购大清邮票,民国邮票,解放区邮票,新中国邮票,一版纸币,二版纸币,三版纸币,四版https://weibo.com/ttarticle/p/show?id=2309404805571462430886
20.手写签名设计公众号和小程序,为你量身定制独一无二的签名艺术手写签名设计公众号和小程序是一家专注于为用户提供个性化签名设计服务的平台。我们拥有多名经验丰富的设计师,他们将以纯人工的方式为您设计独一无二的签名艺术。 在我们的平台上,您可以选择多种套餐来满足您的需求。有的套餐提供精美的图片签名,让您的签名更加生动有趣;有的套餐提供书写视频,让您可以亲眼目睹设计https://www.aishouxie.cn/article/content/11
21.在线艺术签名2024官方下载在线艺术签名app最新版本免费下载首页 在线艺术签名 在线艺术签名 个人 电脑版 扫一扫马上玩 简介 免费一笔艺术签名设计。 如何在电脑上使用在线艺术签名小程序 在线艺术签名是一款小程序,通常在手机上使用。如果您想在电脑上使用在线艺术签名,可以使用应用宝电脑版。它能在电脑上运行Android13系统,使您能够全面体验在线艺术签名小程序的丰富功能。https://sj.qq.com/appdetail/wxe5290f141e350b54
22.APP开发网站定制小程序定制魁网云商是一家拥有自主研发能力以小程序开发、软件开发、APP开发、网络营销、SEO、网站建设、VI设计、LOGO设计、商标注册、知识产权服务、网络安全为一体的综合性服务公司。 公司成立至今,凭借经验丰富的营销团队和强大的技术研发团队,帮助客户解决互联网难题,为企业拓https://www.kui.net/dingzhikaifa/
23.小程序微信支付微信小程序支付失败是什么原因?微信支付是商城小程序的重要一环,但在微信小程序申请微信支付的过程会遇到各种问题,为支持商家快速解决问题,本文收集了小程序申请微信支付中常见问题,如遇到错误提示,请按照教程指引正确设置。 二、解决方案 序号 错误提示 错误原因&解决方案 小程序端支付报错内容 http://www.yun918.com/h-nd-1440.html