react+canvas实现手写签名组件
长话短说,一个纯粹的手写签名组件
1.项目源码及效果展示
2.封装背景
为什么要封装这个组件 效果怎么样?受众是哪些?
封装的主要目的就是为了业务需求,并且采用纯canvas+react的写法,把扩展性握在自己的手里。
效果的话,目前完全能满足业务需求,后续如果有更多的个性化需求,也完全可以二次开发。
受众的话主要是一些和我一样有这方面需求,然后又没有太多的时间去自己手写,需要一个三方轮子的开发者,又或者是已经找了一些轮子,但是不能完全符合个性化需求,想要一个基础的轮子,然后自己二次开发的用户。
3.技能基础
技术栈: 主要是canvas,还有react hook等
4.封装步骤
以具体功能点为基础,在基础绘画的功能上加了一些小功能。具体步骤如下:
- 使用 useState 钩子函数来管理组件的状态,如是否正在绘制、绘制的步骤、最后的坐标等。
- 使用 useRef 钩子函数来获取画布和颜色选择器的引用。
- 在绘制过程中,根据鼠标事件和坐标信息,使用 canvas 的 2D 上下文进行绘制操作。
- 提供了撤销上一步、清除画布、生成图片等功能的按钮,并通过回调函数将结果传递给父组件。
- 提供了存储历史签名的功能,可以根据实际需求将其存储到数据库中。
5.现有功能以及后续优化方向
现有功能API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
historyUrl | 历史签名的 url | boolean | string | false |
width | 画布宽度 | number | 820 |
height | 画布高度 | number | 300 |
historyParams | 历史签名的参数 | object | {} |
showBtn | 是否显示功能按钮或者添加自己的按钮 | boolean | ReactNode | function | true |
onConfirm | 点击确定的回调 | function | (value:any)=>{} |
needPreview | 是否需要图像预览 | boolean | true |
needPrint | 是否需要图像打印 | boolean | true |
后续优化方向的话,暂时还没什么好的想法,各位看官如果有什么需要的或者好的想法的,可以提出来,大家一起进步。
转载自:https://juejin.cn/post/7352556092331229184