大家好，我是徐熙，今天又来分享了。今天给大家分享一下我最近开源的轻量级电子签名组件——react-sign2。我们可以用它轻松实现电子签名，比如常用的合同签名、手稿签名、美术签名等，并且支持一键保存签名。对于基本使用，如果我们想直接使用它，我们可以在npm:#上安装react-sign2或者yarnaddreact-sign2npmireact-sign2然后一个简单的用法如下：importSignfrom'react-sign2';exportdefault()=>;react-sign2还提供了很多可自定义的属性，方便用户灵活自定义电子签名。下面是对开放属性的介绍：比如我可以调整线条的颜色：调整线条的宽度：在具体使用中可以灵活配置。我还提供了业务中经常用到的监听事件，方便用户灵活调用：保存时的onSave回调，画布清空时的onClear回调，每次绘制结束时的onDrawEnd回调实现思路按照笔者之前的习惯，之前设计组件，首先要明确组件的设计需求，然后根据健壮组件的设计原则来实现组件，在这里我想和大家分享一些我总结的组件设计经验：严格的组件属性设计，保证业务层可以低成本使用组件，保持一定的可配置性组件内部和外部类型约定（ts规范），提供逻辑兼容性和可读性（统一清晰的代码格式，完整的注释，清晰的代码结构，适当的useofprogrammingparadigms)usability(完整的代码功能，良好的兼容性in不同场景，业务逻辑覆盖）可重用性（代码可以很好的被其他业务模块复用）可维护性（代码易于维护和扩展，具有一定的向下/向上兼容性）高性能（组件具有一定的性能，比如Renderingof复杂场景、计算等）对于电子签名组件，我们的最低要求是能够满足用户在线签名并保存签名数据。以上是我们的最低要求，以满足我总结的组件设计。原则上我们需要对组件做进一步的需求分析：签名的颜色、笔画的粗细、平滑度、是否支持自定义事件等，这些都是第一阶段可以想到的配置点组件的需求，他们也可以处理第一阶段业务需求的功能，所以就有了组件需求设计的第一版：接下来，需要使用typescript来规范组件的输入输出。具体定义如下：exportinterfaceIProp{/***@descriptioncanvaswidth*@default400*/width?:number;/***@description画布高度*@default200*/height?:number;/***@descriptionlinewidth*@default4*/lineWidth?:number;/***@description线段颜色*@default'red'*/strokeColor?:string;/***@description设置直线两端的圆角*@default'round'*/lineCap?:string;/***@description线相交处的圆角*@default'round'*/lineJoin?:string;/***@descriptionCanvas背景色*@default'transparent'*/bgColor?:string;/***@descriptiontrue*/showBtn?:布尔值；/***@description保存时回调，blob为生成的图片bob*@default-*/onSave?:(blob:Blob)=>void;/***@description画布清空时的回调，参数为画布的上下文对象，可以直接使用画布的api*@default-*/onClear?:(canvasContext:CanvasRenderingContext2D)=>void;/***@描述画布结束时的回调*@default-*/onDrawEnd?:(canvas:HTMLCanvasElement)=>void;}接下来就是我们具体的代码实现阶段了。由于电子签名的核心技术是canvas（虽然用dom和svg也可以实现），所以不管你用react还是vue3，或者貌似是原生态的javascript，都可以低成本封装。笔者这里使用的是全世界程序员最爱的react。以上就是组件的基本属性定义和代码结构。绘图部分涉及画布的细节。对图形感兴趣的可以参考我的专栏：100+前端几何应用案例100+前端几何应用案例具体实现我已经把react-sign的源码上传到github了。感兴趣的朋友可以参考一下。如有任何问题，欢迎随时交流反馈。github:https://github.com/MrXujiang/react-sign如果想直接使用，可以使用下面的方法安装使用：react-sign2官方demo文档扩展这里有点题外话大家，也是大家比较关心的话题——如何持续维护开源项目。以本文实现的react-sign2为例，我上面分享的只是组件实现的第一阶段，为了让我们的开源组件能够被更多人使用，我们必须与时俱进，不断迭代随着技术的发展，优化技术的底层实现，比如跨平台、跨终端、跨框架，优化或者增加新特性：这样我们的开源组件库就可以覆盖更多的场景，被更多的人使用人们。那么，你学会开源的正确方法了吗？如果你对以上迭代方向感兴趣，欢迎评论区交流，一起打造v3.0.0。参考https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_APIhttps://juejin.cn/post/7174251833773752350
