rotationAngle と touchRadius を使用する

Chrome 39 で、Chrome の Touch API に対する比較的小さな変更が行われ、TouchEvent オブジェクトの webkitRotationAngle 属性の有効なバージョンが導入されました。Chrome 45(2015 年 7 月にベータ版をリリース)では、rotationAngle というプレフィックスが追加され、TouchEvent の仕様と Firefox に合わせた実装になっています。

少し前に登場しましたが、 rotationAngle とは何かを説明する価値があります。特にモバイル デバイスでのタップ操作の興味深い使い方を説明できるようになるからです。

技術的には、回転角度は、Touch.radiusXTouch.radiusY によって定義される接触領域の楕円の角度(0 ~ 90)かのことです。 そうですね。(Android 版の Chrome では、radiusXradiusY の値が 64px にロックされず、画面の連絡先サイズに応じて変化することがわかりました)。

具体的にはどういう意味でしょうか。

これは、画面上でユーザーの指のサイズ、形状、向きを正確に表現する方法と考えてください。ユーザーは必ずしも指先のペン先で画面をタップするわけではなく、警察に指紋を渡すように頻繁に画面を押します。rotationAngle を使用しない場合は、タップ操作の幅と高さを簡単に取得できます。rotationAngle を使用すると、90 度回転します(0 は垂直、90 は水平)。なぜ 90 度しかないのでしょうか?必要なのは 90 度だけです。これらの角度を通過すると、radiusXradiusY がそれに合わせて変更されます。

もう一つの便利な点は、画面に対する指の圧力の度合いに応じて指の接触領域が変化することです。これは force を直接置き換えるものではありませんが、ライトブラシは強く押すよりも表面積が小さいため、画面上のライトブラシを区別できます。

使用方法

まず、これを検出できるデバイスが必要です。Nexus 10 なら問題ありません。Rick Byers のペイント サンプルを直接ご覧ください。繰り返しますが ここでは canvas を使わないで

var touchHandler = function(e) {
    e.preventDefault();
    var touches = e.changedTouches;
    var touch = touches[0]; // only concerned about first touch.
    
    var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
    var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
    var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
    var force = touch.force || touch.webkitForce || 0;
    
    // Use the rotationAngle to rotate the 'p' element.
    
    p.style.width = radiusX * 2 + 'px';
    p.style.height = radiusY * 2 + 'px';
    p.style.transform = "rotate(" + rotationAngle + "deg)";
};

document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;

これを実際にどこで使用しますか。

次のような場合は、明らかにユーザーにとって直接的なメリットとなります。

  • たとえば、ペイントや画像操作のウェブアプリでは、この情報を使用してキャンバスに適用されるストロークや効果を変更できます。タッチ半径を使用してブラシのサイズを変更し、rotationAngle で結合して、キャンバス上でのブラシの接触角度を変更できます。
  • 高度なジェスチャー認識: rotationAngle を理解している場合、1 本指のジェスチャーを作成してオブジェクトを回転させることができます。

すべてのデバイスが対応していますか?

いいえ。まだあまり一般的ではありません。Nexus 10 では次のように表示されます

タップ角度の回転のスクリーンショット

画像クレジット: Rick Byers

デバイスがタップの回転角度を認識できない場合、rotationAngle は 0 になり、radiusXradiusY の値は同じになります(ただし、現在のタッチ面の領域によって異なる場合があります)。

なんでわざわざ?

いい質問ですね。ウェブ上の多くの機能と同様に、この機能も付加的なエクスペリエンスです。
タップイベントは、サポートされている場合に動作します。半径と回転の値が使用可能な場合は、アプリを拡張してユーザーに優れたエクスペリエンスを提供できます。すべてのユーザーが Wacom タブレットを持っているわけではありませんが、多くの描画アプリがこのタブレットを活用しています。

ポインタ イベントについて

これは タップイベント API を使用するデベロッパーのために タッチイベント API を具体化したことを確認するためのものです。どうやって質問を避けるのか見てみよう... 実際は、Blink の PointerEvent の実装について詳細を確認したい場合は、問題 471824 にスターを付けて Rick Byers の追跡ドキュメントをお読みください。

関連項目