Mac タッチパッドの 2 本指イベントの js 実装の概要

はじめに

最近 Web の問題を解決するときに、Mac のタッチパッドの 2 本指の イベント (上下左右、ズームイン、ズームアウト) をキャプチャする必要がありましたが、既製のホイールがないことがわかったので、自分で作らなければなりませんでした。

例: jquery.mousewheel.js (クロスブラウザーのマウス ホイール サポートを追加) は単純すぎて、Mac の 2 本指 動作 を処理できないため、使用できません。

目標

Mac タッチパッドの 2 本指の動作を取得するには 2 つの具体的な方法があります。1 つはリアルタイムのドラッグ ルートで、もう 1 つはジェスチャー (上、下、左、右、ズームイン、ズームアウト) です。

難易度

2 本指のアクションはマウスホイール イベントのみをトリガーし、他のタッチやマウス イベントはこれでのみトリガーされます。

2本指機能

1. 高速スライド処理中は、deltaX と deltaY の初期値の正負の値がスライド方向と異なります。

2. ゆっくりとしたスライド プロセス中、deltaX および deltaY の値の範囲は非常に小さく、通常は [-3, 3] です。

3. 1 秒以内に、マウスホイール イベントが約 100 回トリガーされます。

4. スライド中に数値が揺れます。

ドラッグルートアイデア(パス)を実装します

高速スワイプ用

1. deltaX と deltaY の初期値の正負がスライド方向と異なるデータは破棄する必要があります。 (実際の方向性ではないので)

2. 各トリガーの deltaX 値と deltaY 値を減算し、結果の値が方向と異なる場合は破棄されます。

3. 残りの差は方向移動距離です。

4. 2 つの方向の差をすべて合計し、合計で 2 つのグループがあり、値が大きいほうが方向を決定します。

ゆっくりとした滑りに

1. deltaX と deltaY の値は値の範囲が非常に小さいため、両方とも保持されますが、値と方向が異なるものも破棄されます。

2. 2 つの方向の差をすべて合計し、合計で 2 つのグループがあり、値が大きいほうが方向を決定します。

ジェスチャーのアイデアを実装する (ジェスチャー)

上記に基づいて、一定期間内の deltaX、deltaY、およびペアごとの差を記録します。

deltaX と deltaY は、ズームインとズームアウトのジェスチャをカウントするために使用されます。

ペアごとの差は、上下左右の手のジェスチャをカウントするために使用されます。

したがって、ジェスチャは、ある瞬間のジェスチャではなく、一定期間にわたるジェスチャです。

実装コード

特定のコードは投稿しませんが、私のGitハブから直接ダウンロードできます: http://www.php.cn/

概要

ルートの問題: マウスホイールによって与えられる deltaX および deltaY の値は、操作効果とは大きく異なり、高速スライド効果は特に不正確です。

ジェスチャの問題: 2 本指の特性の 3 番目の点により、ジェスチャの実装は正確ではありません。たとえ時間を非常に短くしても、データ量のせいで精度はさらに低くなります。微積分は使用できません); セグメントが長くなると、反応時間も長くなります。

コードをダウンロードして、その効果を確認することはできませんが、より良い解決策があれば、教えてください。​

以上がMac タッチパッドの 2 本指イベントの js 実装の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。