皆さん、こんにちは。Xu Xiです。またシェアタイムです。今日は、最近オープンソース化した軽量電子署名コンポーネント、react-sign2についてご紹介します。

よく使用される契約書署名、文書署名、芸術的署名などの電子署名を簡単に実装することができ、ワンクリックで署名を保存することをサポートしています。

基本的な使い方

直接使用するには、npm から react-sign2 をインストールします。

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

簡単な使用法は次のようになります。

 import Sign from 'react-sign2'; export default () => <Sign width={400} onDrawEnd={(c) => console.log(c)} />;

react-sign2 は、ユーザーがデジタル署名を柔軟にカスタマイズできるように、多くのカスタマイズ可能な属性も提供しています。以下は、オープン属性の概要です。

たとえば、線の色を調整できます。

線幅を調整:

使用時には柔軟に設定できます。また、ビジネスシナリオでよく使用されるリスナーイベントも用意しており、ユーザーが柔軟に呼び出せるようにしています。

• 保存時 保存中のコールバック。
• クリア時 キャンバスがクリアされたときのコールバック。
• 描画終了時 各描画が終了するたびに発生するコールバック。

実装のアイデア

いつもの習慣に従い、コンポーネントを設計する前に必ず設計要件を明確にし、その後、堅牢なコンポーネント設計の原則に従ってコンポーネントを実装します。ここでは、私がこれまでに経験したコンポーネント設計の経験をまとめてご紹介します。

• コンポーネントの厳密なプロパティ設計により、ビジネス レイヤーはコンポーネントを低コストで使用し、ある程度の構成可能性を維持できるようになります。
• コンポーネントの内部および外部の型規則 (TypeScript 仕様) が定義され、ロジックとの互換性が提供されます。
• 読みやすさ (統一された明確なコード形式、完全なコメント、明確なコード構造と階層構成、プログラミング パラダイムの適切な使用)。
• 使いやすさ (完全なコード機能、さまざまなシナリオでの優れた互換性、高いビジネス ロジック カバレッジ)。
• 再利用性 (コードは他のビジネス モジュールで適切に再利用できます)。
• 保守性 (コードは保守や拡張が容易で、ある程度の下位互換性と上位互換性があります)。
• 高いパフォーマンス (コンポーネントは、複雑なシーンのレンダリングや計算など、特定のパフォーマンス特性を備えています)。

電子署名コンポーネントの場合、ユーザーがオンラインで署名し、署名データを保存できるようにすることが最低要件です。

これらは最低限の要件です。まとめたコンポーネント設計原則を満たすには、コンポーネントの要件分析をさらに実施する必要があります。署名の色、線の太さ、滑らかさ、カスタムイベントのサポートなどです。

これらはすべて、コンポーネント設計の第一段階で考えられる構成ポイントであり、第一段階のビジネスニーズを満たす機能でもあります。そのため、コンポーネント要件設計の最初のバージョンが以下のように作成されました。

次に、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、Vue 3、あるいはネイティブJavaScriptのいずれを使用しても、低コストでカプセル化できます。ここでは、世界中のプログラマーの間で最も人気の高い言語であるReactを用いて実装します。

上記はコンポーネントの基本的なプロパティ定義とコード構造の概要です。描画セクションでは、キャンバスのより詳細な側面について説明します。

具体的な実装のソースコードをGitHubにアップロードしました。ご興味のある方はぜひご覧ください。

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

直接使用したい場合は、次の方法でインストールして使用できます。

react-sign2 公式デモドキュメント

参考文献

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API をご覧ください。
2. https://juejin.cn/post/7174251833773752350.