Javascript_html5 チュートリアル スキルにおける高度なジェスチャの使用の概要

IE10 で高度なユーザー入力に対する新たに追加された認識サポート。例: クリック操作を登録すると、addEventListener という文を通じて、現在のユーザーがどのデバイスをクリックしたか、それが指のクリックなのかマウスのクリックなのかを知ることができます。または、スタイラスでクリックします (タブレット デバイスにはすべてスタイラスが付属しています)。

キャンバス id="MyCanvas">キャンバス>
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, false); function MyBack(e) { >
上記のコードは、現在のユーザーがどのデバイスをクリックしているかを識別し、コールバック メソッドの e.pointerType を通じてそれを決定します。マウスが 4、スタイラスが 3、指が 2 です。値 1 がどのようなデバイスであるかについては、まだ研究されていません。
もう 1 つ注意すべき点は、JavaScript で入力デバイスの認識を追加する場合、登録されるメソッド イベントも少し異なることです。

addEventListener によって追加されたイベントは MSPointerDown です IE10 では、このような複数デバイスの認識では、通常のクリック機能に影響を与えない限り、指のクリックが優先されます。ただし、IE10 はユーザーの入力デバイスを認識するだけでなく、多くの高度なジェスチャもサポートしています 以下は IE10 の高度なジェスチャ サポートのデモです

ジェスチャー オブジェクトの作成

Web サイトでジェスチャを処理する最初のステップは、ジェスチャ オブジェクトをインスタンス化することです。

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">new</span></p> MSGesture();</span>

次に、ジェスチャのターゲット要素を指定します。ブラウザは要素上でジェスチャ イベントをトリガーします。同時に、この要素はイベントの座標空間を決定することもできます。

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

<span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"</span>

, handleGesture);

最後に、ジェスチャ認識中にどのポインタを処理するかをジェスチャ オブジェクトに伝えます。

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

注: 要素がデフォルトのタッチ操作 (パンやズームなど) を実行しないようにし、入力用のポインター イベントを提供するには、–ms-touch-action を使用して要素を構成する必要があることを忘れないでください。

ジェスチャイベントの処理

ジェスチャ オブジェクトに有効なターゲットが設定され、少なくとも 1 つのポインタが追加されると、ジェスチャ イベントの起動が開始されます。ジェスチャ イベントは、静的ジェスチャ (クリックまたはホールドなど) と動的ジェスチャ (ピンチ、回転、スワイプなど) の 2 つのタイプに分類できます。

クリック

最も基本的なジェスチャ認識はクリックです。クリックが検出されると、ジェスチャ オブジェクトのターゲット要素で MSGestureTap イベントが発生します。クリック イベントとは異なり、タップ ジェスチャは、ユーザーが移動せずにタッチ、マウス ボタンを押す、またはスタイラスでタッチした場合にのみトリガーできます。これは、ユーザーが要素をクリックしているか、ユーザーが要素をドラッグしているかを区別したい場合に便利です。

長押し

長押しジェスチャとは、ユーザーが 1 本の指で画面をタッチし、しばらく押したまま動かさずに指を持ち上げる操作を指します。長押し操作中に、ジェスチャのさまざまな状態に対して MSGestureHold イベントが複数回トリガーされます:

コードをコピー

コードは次のとおりです:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// 開始はジェスチャの開始を示します。ホールド ジェスチャの場合、これはユーザーが指を離すと完全なプレス アンド ホールドになるまでその場に保持されていることを意味します。
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End はジェスチャの終了を示します。
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
//キャンセルは、ユーザーがジェスチャーを開始したがキャンセルしたことを示します。ホールドの場合、これはユーザーが持ち上げる前にドラッグしたときに発生し、ジェスチャー認識が完了したことを示します。
}
}

動的なジェスチャ (ピンチ、回転、スワイプ、ドラッグ)

動的なジェスチャ (ピンチや回転など) は、CSS 2D トランジションと同様に、トランジションとして報告されます。動的ジェスチャは、MSGestureStart、MSGestureChange (ジェスチャが続くと繰り返し発生します)、および MSGestureEnd の 3 つのイベントをトリガーできます。各イベントには、スケーリング (縮小)、回転、変形、速度に関する情報が含まれています。

動的なジェスチャはトランジションとして報告されるため、CSS 2D トランジションを含む MSGesture を使用して写真やパズルなどの要素を簡単に操作できます。たとえば、次の方法で要素の拡大縮小、回転、ドラッグを有効にできます。

コードをコピーします

コードは次のとおりです。 :

targetElement.addEventListener("MSGestureChange", manageElement);
function recruitElement(e) {
// 提供されている組み込み慣性を無効にする場合は、次のコードのコメントを解除します動的ジェスチャ認識による
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSSMatrix(e.target.style.transform); // 最新情報を取得要素の CSS 変換
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // 変換の原点をジェスチャの中心の下に移動します
.rotate(e . 回転 * 180 / Math.PI) // 回転を適用
.scale(e.scale) // スケールを適用
.translate(e.translationX, e.translationY) // 移動を適用
.translate ( -e.offsetX, -e.offsetY); // 変換原点を後方に移動します
}

スケーリングや回転などの動的なジェスチャはマウス操作をサポートできます。回転によって実行 これは、マウス ホイールを使用しながら、CTRL または SHIFT 修飾キーをそれぞれ使用することによって実現されます。