Taro+nutui h5使用nut-signature 签名组件的踩坑记录之使用canvas实现一个签名组件

爱倒腾

已于 2023-09-05 18:02:45 修改

阅读量2.1k

点赞数 1

分类专栏： Taro+Nutui+ts 项目开发的爬坑记录合集小程序文章标签： taro 前端 vue.js 微信小程序

于 2023-01-01 17:00:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44514665/article/details/128176776

版权

本文记录了在Taro（3.4.0-beta.0）+ Nutui（3.1.16）开发H5过程中，遇到Nutui的nut-signature组件在H5上无法正常工作的问题。分析发现，由于H5中无法获取canvas节点导致签名失败。为了解决这个问题，作者选择使用canvas自行实现了一个签名组件，并详细介绍了组件的实现逻辑，包括监听touch事件来模拟签名动作。同时，文章还讨论了签名位置偏移和画笔模糊的常见问题及解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期在使用Taro（“@tarojs/taro”: “3.4.0-beta.0”） + Nutui （3.1.16）开发H5时,需要一个签名功能结果在小程序上运行正常的 nut-signature组件,在h5上出问题了
首先问题是 :

Nutui的签名组件（nut-signature）不能签名

在小程序中是可以正常使用，结果打包成h5就不行了，？？？
代码追踪+源码追踪，直接原因是：
在h5上
在这里插入图片描述
也就是在源码这个
原因: Taro.createSelectorQuery().select("#spcanvas").fields 在数据返回时 res中本该包含node节点的但是在h5上没有,获取canvas节点未获取到导致在h5中签名失败

虽然官网上fields方法是兼容H5的但是这个地方就是没有获取到节点 -.-

解决方案: 用canvas,自己实现签名组件(小程序)

组件大致长这样
请添加图片描述
完整组件地址完整代码

实现逻辑就是监听canvas的 touchstart、touchmove、touchend、touchleave事件
签名大致就是起笔，落笔连线，收笔，想象自己写字的动作.
以vue举例,其他同理:

html代码部分

<div class="pad-20">
        <div class="written">
            <div id="canvas-content" style="width: 100%; height: 100%">
                <canvas
                    class="canvasSign"
                    id="canvasSign"
                    @touchstart="startEventHandler"
                    @touchmove="moveEventHandler"
                    @touchend="endEventHandler"
                    @touchleave="leaveEventHandler"
                />
            </div>

            <div class="flex-center">
                <button class="button_clear button" @click="() => clearClick()">重签</button