コンピュータとネットワーク技術の急速な発展に伴い、オンライン署名技術はペーパーレスオフィスでますます使用されています。この直感的で便利な操作は、オフィスの効率を大幅に向上させるだけでなく、デジタルストレージ方式を使用して、保存や取得の困難などの従来の問題を回避します。紙のサイン。私たちの日常生活では、POS マシンの署名、速達配達の署名、銀行や政府機関のビジネス署名など、オンライン署名テクノロジが使用される多くのシナリオがすでに存在しています。最近、私は会社のビジネス処理ニーズに取り組んでおり、これにはオンライン署名も含まれています。次に、Canvas を使用してオンライン署名を実装する方法について説明します。
キャンバスとは何ですか?Canvas は HTML5 の新しい要素で、Web ページ上にグラフィックを描画するために Apple によって Safari 1.3 Web ブラウザに導入されました。これは、Safari の HTML の描画機能を Mac OS X で使用できるためです。 Apple はダッシュボードでスクリプト化されたグラフィックスをサポートする方法も求めていました。 Firefox 1.5 と Opera 9 の 2 つのブラウザも Safari に続き、Canvas のサポートを開始しました。
Canvas タグは、画像を使用せずに Web ページのグラフィック デザインを実装できるため、HTML5 の最大の改良点の 1 つです。これはキャンバスに似ていますが、描画機能はありませんが、JavaScript のサポートにより、キャンバスの範囲内で描画 API を表示して、目的の効果を実現できます。
テクノロジーの選択この機能はCanvasでもSVGでもFlashでも実装可能ですが、なぜCanvasを選んだのでしょうか？
まず、モバイル プラットフォームを機能的にサポートする必要があるため、Flash はモバイル側でのフレンドリーなサポートを提供していませんが、どちらを選択すればよいでしょうか。
どちらもそれぞれ得意分野があるため、署名機能の実装にはCanvasを選択しました。
次に、導入効果を見てみましょう。
Canvas のソース、テクノロジーの選択、最終的なレンダリング効果を理解した後、作成、描画、モニタリング、再描画、画像処理の 5 つの部分から説明します。一緒に Canvas 描画の世界に入りましょう。
キャンバスの作成まず、ブラウザが Canvas をサポートしているかどうかを判断する必要があります。
isCanvasSupported = (): boolean => { let elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}次に、判定結果に基づいてキャンバスを作成するか、プロンプトを表示するかを選択します。
{isCanvasSupported ? <canvas ref={canvas => (this.canvas = Canvas)} height={canvasHeight} width={canvasWidth}> :申し訳ありませんが、現在のブラウザはこの機能をサポートしていません。 }各 Canvas ノードには対応するコンテキスト オブジェクトがあることがわかっています。これは、Canvas オブジェクトの getContext() メソッドを通じて文字列 2d を唯一のパラメータとして直接渡すことで取得できます。次に、ref で Canvas 要素を取得し、getContext() メソッドで Canvas 上の描画環境を取得します。
let cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});環境が整ったので、描いてみましょう！
描くまず開始パスを描画します。
cxt.beginPath();
次に、現在の行の幅を設定します。
cxt.lineWidth = 5;
線の色を設定します。
cxt.ストロークスタイル = '#000';
moveTo と lineTo を通して線を描きます
cxt.moveTo(0,0);cxt.lineTo(150,0);//定義されたパスを描画 cxt.ストローク()
ただし、描かれた線はかなり硬いことがわかりました
このとき、lineCap を使用してラインの端のライン キャップのスタイルを変更し、両端に丸いライン キャップを追加してラインの硬さを軽減できます。
cxt.lineCap = 'ラウンド';
同時に、lineJoinを設定することで、線が交差するときの角の丸みを指定することもできます。
cxt.lineJoin = 'ラウンド';
ただし、描画された線には明らかなギザギザがあることもわかりました。このとき、Canvas が提供する要素の影を描画する機能を使用して、ギザギザのエッジをぼかす必要があります。影があるため、lineWidth の値を適切に変更することができます。
cxt.shadowBlur = 1;cxt.shadowColor = '#000';
この時点で、線を描画する方法は完成しました。次に、描画を一貫して実行するためにキャンバス イベントを監視する方法を見てみましょう。
キャンバスイベントをリッスンするPCとモバイル端末の両方に対応する必要があるため、対応する実行イベントを事前に決定する必要があります。
this.state = {events: (ウィンドウ内の 'ontouchstart') ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}キャンバスが初期化された後、 events[0] イベントのリッスンを開始します。
this.canvas.addEventListener(this.events[0], startEventHandler, false);
startEventHandler 関数で events[1] と events[2] をリッスンします。
this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);
ここがポイントです。私たちの中心的な内容は、交差するパスを計算して描画することです。
moveEventHandler(event:any): void {event.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch? : const coverPos = this.canvas.getBoundingClientRect() ; const マウス X = evt.clientX - カバー位置 y = evt.clientY - coverPos.top; cxt.lineTo(マウスX, マウスY);}Canvas についてご存知のとおり、Canvas キャンバスは描画用の平らな空間を提供します。空間内の各点は独自の座標を持ち、x は水平座標を表し、y は垂直座標を表します。原点 (0, 0) は画像の左上隅にあり、x 軸の正の方向は原点の右側、y 軸の正の方向は原点から下になります。
そこで、getBoundingClientRect() メソッドを使用して、ブラウザ ウィンドウの位置を基準にしてページの Canvas 要素の左と上までのピクセル距離を取得し、次に clientX および clientY イベント プロパティを使用して、その水平座標と垂直座標を返します。イベントがトリガーされたときのブラウザー ページへのマウス ポインター。最後に、lineTo とストロークを使用してパスが描画されます。
同時に、 events[2] イベントの実行後に events[1] と events[2] を忘れずに削除する必要があります。そうしないと、連続描画が発生します。
endEventHandler(event: any): void {event.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); events[2]、endEventHandler、false);}上記のイベント操作を繰り返しループすることで、基本的に署名機能が実現されます。
再描画署名プロセスでは、間違った署名や、あまりにもずさんな署名が避けられないため、署名をクリアする機能をサポートする必要があります。このとき、Canvas の clearRect() メソッドを使用して、署名の内容をクリアします。キャンバスエリア。
cxt.clearRect(0, 0, CanvasWidth, CanvasHeight);画像処理
描画後はまだ完了していません。描画した署名をアップロードして保存する必要があります。このとき、toDataURL() メソッドを使用して Canvas を一般的な画像ファイル形式に変換できます。
通常、操作を直接実行してデータ URI に変換し、ajax を使用してアップロードをリクエストするだけです。
dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);ただし、さまざまなビジネス ニーズにより、ページ上に他のコンテンツを含める必要がある場合があります。このとき、html2canvas を使用してこれを実現できます。 html2canvas は、ブラウザ側でページの全体または一部のスクリーンショットを取得し、それを Canvas にレンダリングしてから、toDataURL() メソッドを使用してそれを処理するのに役立ちます。
html2canvas について言えば、一部の低バージョンのブラウザーでは切り取られる画像が空白になるため、html2canvas は -webkit-flex または -webkit-box をサポートしていないため、注意が必要です。そのため、HTML を Canvas に生成できず、白い画面キャプチャが表示されます。
解決：以上の手順で、基本的にオンライン署名機能が実現しました。このプロジェクトを構築するために React+TypeScript 環境を使用したことに注意してください。上記のコードの実際の使用方法は、独自の環境に基づいて適切に変更する必要があります。
この記事では、Canvas の比較的浅い描画知識を使用します。Canvas をアニメーション制作、物理効果シミュレーション、衝突検出、ゲーム開発、モバイル アプリケーション開発、ビッグ データ ビジュアライゼーション開発に使用したい場合は、手持ちの数学的ジオメトリも確認する必要があります。以前に学んだ物理学の知識、そしてゆっくりと探求していきます。現在、Chart.js、ECharts など、多くの成熟したグラフ プラグインが Canvas を使用して実装されています。それらには、ほぼすべてのグラフ実装をカバーする、美しくクールなグラフが多数含まれています。 Canvas には、ZRender、createJS、Pixi.js などの多くのオープン ソース ライブラリもあります。ECharts の最下層も、カプセル化のために軽量の Canvas クラス ライブラリ ZRender に依存しています。
さて、今日はここで話は終わりにしましょう。ご質問がございましたら、メッセージを残してください。以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。