hello, 大家好, 我是徐夕, 今天又到了分享時(shí)間. 今天和大家分享一下我最近開(kāi)源的輕量級(jí)電子簽名組件——react-sign2。

我們可以使用它輕松的實(shí)現(xiàn)電子簽名, 比如說(shuō)常用的合同簽字, 文稿簽名, 藝術(shù)簽名等, 并支持一鍵將簽名保存。

基本使用

我們要想直接使用, 可以在 npm 上安裝 react-sign2 :

# 或者yarn add react-sign2
npm i react-sign2

然后一個(gè)簡(jiǎn)單的使用如下:

import Sign from 'react-sign2';

export default () => 
  <Sign width={400} onDrawEnd={(c) => console.log(c)} />;

react-sign2還提供了很多可定制的屬性, 來(lái)方便使用者靈活定制電子簽名, 以下是開(kāi)放性屬性介紹:

比如我可以調(diào)整線條的顏色:

調(diào)整線條寬度:

在具體使用的時(shí)候靈活配置即可, 我還提供了業(yè)務(wù)中經(jīng)常用到的監(jiān)聽(tīng)事件, 方便使用者靈活調(diào)用:

• onSave 保存時(shí)的回調(diào)。
• onClear 當(dāng)畫(huà)布清空時(shí)的回調(diào)。
• onDrawEnd 每次繪制結(jié)束時(shí)的回調(diào)。

實(shí)現(xiàn)思路

按照筆者之前的習(xí)慣, 在設(shè)計(jì)組件之前都會(huì)先明確組件的設(shè)計(jì)需求, 然后根據(jù)健壯組件的設(shè)計(jì)原則來(lái)落地組件, 這里給大家分享一下我總結(jié)的幾條組件設(shè)計(jì)經(jīng)驗(yàn):

• 對(duì)組件進(jìn)行嚴(yán)格的屬性設(shè)計(jì), 保證業(yè)務(wù)層能低成本使用組件, 并保持一定的可配性。
• 組件內(nèi)外部類(lèi)型約定(ts規(guī)范), 并提供對(duì)邏輯的兼容性。
• 可讀性(代碼格式統(tǒng)一清晰，注釋完整，代碼結(jié)構(gòu)層次分明，編程范式使用得當(dāng))。
• 可用性(代碼功能完整，在不同場(chǎng)景都能很好兼容，業(yè)務(wù)邏輯覆蓋率)。
• 復(fù)用性(代碼可以很好的被其他業(yè)務(wù)模塊復(fù)用)。
• 可維護(hù)性(代碼易于維護(hù)和擴(kuò)展，并有一定的向下/向上兼容性)。
• 高性能(組件具有一定的性能, 如復(fù)雜場(chǎng)景的渲染, 計(jì)算等)。

對(duì)于電子簽名組件, 我們最小化的需求就是能滿(mǎn)足用戶(hù)的線上簽名, 并能保存簽名數(shù)據(jù)。

以上就是我們最小化的需求, 為了滿(mǎn)足我總結(jié)的組件設(shè)計(jì)幾大原則, 我們需要對(duì)組件進(jìn)行近一步的需求分析: 簽名的顏色, 筆觸的粗細(xì), 平滑度, 支持自定義事件等。

這些都是組件第一個(gè)階段可以想到的配置點(diǎn), 也是能應(yīng)對(duì)第一階段業(yè)務(wù)需求的功能, 所以有了第一版的組件需求設(shè)計(jì):

接下來(lái)就需要用 typescript 來(lái)規(guī)范組件的輸入和輸出了. 具體定義如下:

export interface IProp {
  /**
   * @description   畫(huà)布寬度
   * @default       400
   */
   width?: number;
   /**
    * @description   畫(huà)布高度
    * @default       200
    */
   height?: number;
   /**
    * @description   線寬
    * @default       4
   */
   lineWidth?: number;
   /**
    * @description   線段顏色
    * @default       'red'
   */
   strokeColor?: string;
   /**
    * @description   設(shè)置線條兩端圓角
    * @default       'round'
   */
   lineCap?: string;
   /**
    * @description   線條交匯處圓角
    * @default       'round'
   */
   lineJoin?: string;
   /**
    * @description   畫(huà)布背景顏色
    * @default       'transparent'
   */
   bgColor?: string;
   /**
    * @description   true
   */
   showBtn?: boolean;
   /**
   * @description   當(dāng)保存時(shí)的回調(diào), blob為生成的圖片bob
   * @default       -
   */
   onSave?: (blob: Blob) => void;
  /**
   * @description   當(dāng)畫(huà)布清空時(shí)的回調(diào), 參數(shù)為畫(huà)布的上下文對(duì)象,可以直接使用canvas的api
   * @default       -
   */
   onClear?: (canvasContext: CanvasRenderingContext2D) => void;
   /**
   * @description   當(dāng)畫(huà)布結(jié)束時(shí)的回調(diào)
   * @default       -
   */
   onDrawEnd?: (canvas: HTMLCanvasElement) => void;
}

接下來(lái)就到了我們具體的代碼實(shí)現(xiàn)階段. 由于電子簽名的核心技術(shù)采用的是canvas(雖然用dom和svg也可以實(shí)現(xiàn)), 所以無(wú)論你是用的react還是vue3, 或者似乎原生態(tài)javascript, 都能低成本的封裝. 這里筆者采用全球程序員最?lèi)?ài)用的react 來(lái)實(shí)現(xiàn)。

以上是組件的基本屬性定義和代碼結(jié)構(gòu), 畫(huà)圖部分涉及到 canvas 的比較細(xì)節(jié)的部分。

具體實(shí)現(xiàn)的源碼我已經(jīng)上傳到github, 感興趣的朋友大家可以參考一下。

github: https://github.com/MrXujiang/react-sign

大家如果想直接使用, 可以使用如下方式安裝使用:

react-sign2 官方演示文檔

參考資料

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API。
2. https://juejin.cn/post/7174251833773752350。