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

我們可以使用它輕松的實現電子簽名, 比如說常用的合同簽字, 文稿簽名, 藝術簽名等, 并支持一鍵將簽名保存.

基本使用

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

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

然后一個簡單的使用如下:

import Sign from 'react-sign2';

export default () => 
  <Sign width={400} notallow={(c) =>;

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

比如我可以調整線條的顏色:

調整線條寬度:

在具體使用的時候靈活配置即可, 我還提供了業務中經常用到的監聽事件, 方便使用者靈活調用:

• onSave保存時的回調
• onClear當畫布清空時的回調
• onDrawEnd每次繪制結束時的回調

實現思路

按照筆者之前的習慣, 在設計組件之前都會先明確組件的設計需求, 然后根據健壯組件的設計原則來落地組件, 這里給大家分享一下我總結的幾條組件設計經驗:

• 對組件進行嚴格的屬性設計, 保證業務層能低成本使用組件, 并保持一定的可配性
• 組件內外部類型約定(ts規范), 并提供對邏輯的兼容性
• 可讀性(代碼格式統一清晰，注釋完整，代碼結構層次分明，編程范式使用得當)
• 可用性(代碼功能完整，在不同場景都能很好兼容，業務邏輯覆蓋率)
• 復用性(代碼可以很好的被其他業務模塊復用)
• 可維護性(代碼易于維護和擴展，并有一定的向下/向上兼容性)
• 高性能(組件具有一定的性能, 如復雜場景的渲染, 計算等)

對于電子簽名組件, 我們最小化的需求就是能滿足用戶的線上簽名, 并能保存簽名數據.

以上就是我們最小化的需求, 為了滿足我總結的組件設計幾大原則, 我們需要對組件進行近一步的需求分析: 簽名的顏色, 筆觸的粗細, 平滑度, 支持自定義事件等.

這些都是組件第一個階段可以想到的配置點, 也是能應對第一階段業務需求的功能, 所以有了第一版的組件需求設計:

接下來就需要用 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 的比較細節的部分, 如果大家對圖形學感興趣可以參考我的專欄:

100+前端幾何學應用案例 100+前端幾何學應用案例

具體實現的源碼我已經上傳到github, 感興趣的朋友大家可以參考一下, 有問題隨時交流反饋.

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

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

react-sign2 官方演示文檔

擴展

這里給大家聊點題外話, 也是大家比較關注的話題——如何持續維護開源項目. 就拿本文中實現的 react-sign2 舉例,  以上分享的只是組件的第一階段實現, 為了讓我們的開源組件能被更多的人使用, 我們必須與時俱進, 隨著技術的發展持續迭代優化技術底層實現, 比如跨平臺, 跨終端, 跨框架, 優化或者增加新功能:

這樣我們的開源組件庫才能覆蓋更多場景, 被更多人使用.

所以, 開源的正確打開方式, 你學會了嗎? 如果對上面的迭代方向感興趣, 歡迎在評論區交流, 一起共建v3.0.0.

參考資料

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