hello, 大家好, 我是徐夕, 今天又到了分享时间. 今天和大家分享一下我最近开源的轻量级电子签名组件——react-sign2。
我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文稿签名, 艺术签名等, 并支持一键将签名保存。
我们要想直接使用, 可以在 npm 上安装 react-sign2 :
# 或者yarn add react-sign2npm i react-sign2然后一个简单的使用如下:
import Sign from 'react-sign2';export default () => <Sign width={400} onDrawEnd={(c) => console.log(c)} />;react-sign2还提供了很多可定制的属性, 来方便使用者灵活定制电子签名, 以下是开放性属性介绍:
比如我可以调整线条的颜色:
调整线条宽度:
在具体使用的时候灵活配置即可, 我还提供了业务中经常用到的监听事件, 方便使用者灵活调用:
按照笔者之前的习惯, 在设计组件之前都会先明确组件的设计需求, 然后根据健壮组件的设计原则来落地组件, 这里给大家分享一下我总结的几条组件设计经验:
对于电子签名组件, 我们最小化的需求就是能满足用户的线上签名, 并能保存签名数据。
以上就是我们最小化的需求, 为了满足我总结的组件设计几大原则, 我们需要对组件进行近一步的需求分析: 签名的颜色, 笔触的粗细, 平滑度, 支持自定义事件等。
这些都是组件第一个阶段可以想到的配置点, 也是能应对第一阶段业务需求的功能, 所以有了第一版的组件需求设计:
接下来就需要用 typescript 来规范组件的输入和输出了. 具体定义如下:
export interface IProp { /** * @description 画布宽度 * @default 400 */ width?: number; /** * @description 画布高度 * @default 200 */ height?: number; /** * @description 线宽 * @default 4 */ lineWidth?: number; /** * @description 线段颜色 * @default 'red' */ strokeColor?: string; /** * @description 设置线条两端圆角 * @default 'round' */ lineCap?: string; /** * @description 线条交汇处圆角 * @default 'round' */ lineJoin?: string; /** * @description 画布背景颜色 * @default 'transparent' */ bgColor?: string; /** * @description true */ showBtn?: boolean; /** * @description 当保存时的回调, blob为生成的图片bob * @default - */ onSave?: (blob: Blob) => void; /** * @description 当画布清空时的回调, 参数为画布的上下文对象,可以直接使用canvas的api * @default - */ onClear?: (canvasContext: CanvasRenderingContext2D) => void; /** * @description 当画布结束时的回调 * @default - */ onDrawEnd?: (canvas: HTMLCanvasElement) => void;}接下来就到了我们具体的代码实现阶段. 由于电子签名的核心技术采用的是canvas(虽然用dom和svg也可以实现), 所以无论你是用的react还是vue3, 或者似乎原生态javascript, 都能低成本的封装. 这里笔者采用全球程序员最爱用的react 来实现。
以上是组件的基本属性定义和代码结构, 画图部分涉及到 canvas 的比较细节的部分。
具体实现的源码我已经上传到github, 感兴趣的朋友大家可以参考一下。
github: https://github.com/MrXujiang/react-sign
大家如果想直接使用, 可以使用如下方式安装使用:
react-sign2 官方演示文档
本文链接：http://www.28at.com/showinfo-26-16012-0.html开源推荐! 一款开箱即用的电子签名组
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： C++读取文件和写入文件内容实例详解
下一篇： 数据结构分类以及数据结构特点、优缺点
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号