画像と写真 · ブラウザー画像 & 描画エディター
ブラウザーでのフリーハンド描画の仕組み: ピクセルへのポインター イベント
· 仕組み
画像編集 キャンバス ブラウザ処理
マウス、指、またはスタイラスを使用して描かれたフリーハンド ストロークは、ブラウザによって滑らかな線に変換される位置サンプルのストリームです。この記事では、入力イベントからペイントされたピクセルまでの 1 つのストロークをたどります。
スムーズに表示されるぐらつく円 – あなたが描いたものと編集者が記録したもの
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。滑らかに表示されるぐらつく円から始めます。描画するのはジェスチャーであり、エディターはサンプリングされた位置を記録します。このストローク パイプラインのソース コードでは、Unified pointerdown、pointermove、pointerup、および pointercancel ハンドラーが 1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマップし直すことが確認されています。ブラシは、幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視されます。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。丸いキャップと結合により、連続したフリーハンド ストロークが生成されます。タップするとまだ円形のマークが描かれます。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
ポインター イベント: 1 つの API でマウス、タッチ、ペン — ブラウザーが位置、圧力 (可能な場合)、および実際に取得するサンプリング レートを報告する方法
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。ポインター イベントは、マウス、タッチ、ペン入力を 1 つの API の背後に配置し、デバイスが提供するサンプリング レートで位置と場合によっては圧力を報告します。このストローク パイプラインのソース コードでは、ブラシは幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視することが確認されています。丸いキャップと結合により、連続したフリーハンド ストロークが生成されます。タップするとまだ円形のマークが描かれます。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。デバイスのピクセル比は 3 に制限されており、画面上のバッキング ストアのみを鮮明にします。ドキュメントのピクセルは画像解像度のままです。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
ポインタ イベントはここでマウス、タッチ、ペンの位置を統合しますが、圧力は消費されません
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。ポイントをパスに変換するということは、サンプルをセグメントまたは曲線で接続することを意味し、スムージングでは常に、ある程度の忠実性と引き換えに読みやすさを確保します。このストローク パイプラインのソース コードでは、ラウンド キャップと結合により連続したフリーハンド ストロークが生成されることが確認されています。タップするとまだ円形のマークが描かれます。デバイスのピクセル比は 3 に制限されており、画面上のバッキング ストアのみを鮮明にします。ドキュメントのピクセルは画像解像度のままです。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。統合された pointerdown、pointermove、pointerup、および pointercancel ハンドラーは、1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマッピングし直します。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
キャンバス上のパスのストローク - 線の幅、キャップ、結合、アンチエイリアス、およびストロークのエッジが純粋な単色のピクセルにならない理由
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。パスをストロークすると、幅、キャップ、結合、アンチエイリアスが追加されます。これが、エッジに完全に純粋な 1 つの色ではなく、ブレンドされたピクセルが含まれる理由です。このストローク パイプラインのソース コードでは、デバイスのピクセル比が 3 に制限され、画面上のバッキング ストアのみをシャープにすることが確認されています。ドキュメントのピクセルは画像解像度のままです。統合された pointerdown、pointermove、pointerup、および pointercancel ハンドラーは、1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマッピングし直します。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを離した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。ブラシは、幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視されます。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
デバイスのピクセル比 — 高密度ディスプレイでは描画キャンバスにスクリーン ポイントよりも多くのバッキング ピクセルが必要な理由と、そうでない場合に何が起こるか
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。デバイスのピクセル比は、描画キャンバスが高密度ディスプレイ上のスクリーン ポイントよりも多くのバッキング ピクセルを必要とする理由と、低解像度のバッキング ストアが柔らかく見える理由を説明します。このストローク パイプラインのソース コードでは、Unified pointerdown、pointermove、pointerup、および pointercancel ハンドラーが 1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマップし直すことが確認されています。ブラシは、幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視されます。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。丸いキャップと結合により、連続したフリーハンド ストロークが生成されます。タップするとまだ円形のマークが描かれます。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
作業例: 写真に撮ったワークシート上の 3 つの回答を丸で囲む — 各ストロークがどのようにキャプチャされ、描画され、エクスポートされるか
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。写真に撮ったワークシート上の 3 つの回答を丸で囲むと、パスは一連のサンプル、補間されたブラシ マーク、そして最終的にエクスポートされたピクセルになります。このストローク パイプラインのソース コードでは、ブラシは幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視することが確認されています。丸いキャップと結合により、連続したフリーハンド ストロークが生成されます。タップするとまだ円形のマークが描かれます。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。デバイスのピクセル比は 3 に制限されており、画面上のバッキング ストアのみを鮮明にします。ドキュメントのピクセルは画像解像度のままです。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
これでカバーされないもの — 感圧ブラシ、ベクター エクスポート、手書き認識
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。境界には、感圧ブラシ、ベクトルのエクスポート、手書き認識が含まれます。このストローク パイプラインのソース コードでは、ラウンド キャップと結合により連続したフリーハンド ストロークが生成されることが確認されています。タップするとまだ円形のマークが描かれます。デバイスのピクセル比は 3 に制限されており、画面上のバッキング ストアのみを鮮明にします。ドキュメントのピクセルは画像解像度のままです。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを放した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。統合された pointerdown、pointermove、pointerup、および pointercancel ハンドラーは、1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマッピングし直します。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。
要点: デバイスが描画を実行します。ブラウザー画像および描画エディターがストロークをローカルでキャプチャし、どこにも送信しない方法
フリーハンド マークは、連続したリボンではなく、サンプリングされた位置として開始されます。要点はローカルかつ具体的です。デバイスはポインター入力を提供し、ブラウザー画像および描画エディターはブラウザーでストロークをキャプチャしてレンダリングします。このストローク パイプラインのソース コードでは、デバイスのピクセル比が 3 に制限され、画面上のバッキング ストアのみをシャープにすることが確認されています。ドキュメントのピクセルは画像解像度のままです。統合された pointerdown、pointermove、pointerup、および pointercancel ハンドラーは、1 つのアクティブなポインターをキャプチャし、ズームを通じて CSS 座標をマッピングし直します。
マウス、指、またはスタイラスを使用して 3 つの答えを丸で囲み、ポインタを離した後に 1 つのジェスチャが 1 つの履歴エントリになるのを確認してください。ブラシは、幅の 4 分の 1 に基づいた間隔でまばらなサンプル間を補間しますが、圧力値は無視されます。ハードウェアがより豊富な入力を報告する場合でも、圧力による芸術性とベクトル手書きはこのパスの外に残ります。