长话短说，一个纯粹的手写签名组件

1.项目源码及效果展示

项目源码

在线演示

2.封装背景

为什么要封装这个组件 效果怎么样？受众是哪些？

封装的主要目的就是为了业务需求，并且采用纯canvas+react的写法，把扩展性握在自己的手里。

效果的话，目前完全能满足业务需求，后续如果有更多的个性化需求，也完全可以二次开发。

受众的话主要是一些和我一样有这方面需求，然后又没有太多的时间去自己手写，需要一个三方轮子的开发者，又或者是已经找了一些轮子，但是不能完全符合个性化需求，想要一个基础的轮子，然后自己二次开发的用户。

3.技能基础

技术栈: 主要是canvas，还有react hook等

4.封装步骤

以具体功能点为基础，在基础绘画的功能上加了一些小功能。具体步骤如下：

1. 使用 useState 钩子函数来管理组件的状态，如是否正在绘制、绘制的步骤、最后的坐标等。
2. 使用 useRef 钩子函数来获取画布和颜色选择器的引用。
3. 在绘制过程中，根据鼠标事件和坐标信息，使用 canvas 的 2D 上下文进行绘制操作。
4. 提供了撤销上一步、清除画布、生成图片等功能的按钮，并通过回调函数将结果传递给父组件。
5. 提供了存储历史签名的功能，可以根据实际需求将其存储到数据库中。

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

后续优化方向的话，暂时还没什么好的想法，各位看官如果有什么需要的或者好的想法的，可以提出来，大家一起进步。