rotationAngle と touchRadius を使用する

Paul Kinlan

Chrome 39 で、Chrome の Touch API に比較的小さな変更が加えられ、TouchEvent オブジェクトの webkitRotationAngle 属性の動作バージョンが導入されました。Chrome 45（2015 年 7 月のベータ版）では、接頭辞なしの rotationAngle になり、TouchEvent 仕様と Firefox に沿った実装になりました。

は以前から存在していましたが、特にモバイル デバイスでタッチ 操作をより興味深い方法で使用できるようになるため、 rotationAngle について説明する価値はあります。

技術的には、回転角度は、Touch.radiusX と Touch.radiusY で定義される接触領域の楕円の角度（0 ～ 90 度）です。すごいですよね。（なお、Android 版 Chrome では radiusX と radiusY の値が 64 ピクセルにロックされず、画面の接触サイズに応じて変化することがわかりました）。

これは実際にはどういう意味でしょうか。

これは、画面上のユーザーの指のサイズ、形状、向きを正確に表す方法と考えることができます。ユーザーは、必ずしも指先で画面をタップするわけではなく、警察に指紋を提出するときのように画面を押し付けることがよくあります。rotationAngle がないと、タッチ操作の幅と高さしか取得できません。rotationAngle を使用すると、90 度回転できます（0 は垂直、90 は水平）。90 度だけなのはなぜですか？90 度だけが必要なのは、これらの角度を超えると、radiusX と radiusY が変化して対応するためです。

もう 1 つの優れた点は、ユーザーが画面上で指の圧力を変えると、ユーザーの指の接触領域が変化することです。force の直接の代替品ではありませんが、画面を軽くブラッシングすると、強く押した場合よりも表面積が小さくなるため、区別できます。

使用方法

まず、これを検出できるデバイスが必要です。Nexus 10 は問題なく動作します。Rick Byers のペイントの例を直接確認することをおすすめします。ただし、キャンバスを使用せずにこれを使用する方法もあります。

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 になり、radiusX と radiusY の値は等しくなります（ただし、現在のタッチ サーフェス領域によって異なる場合があります）。

なんでわざわざ？

お問い合わせいただきありがとうございます。ウェブ上の多くの機能と同様に、これは追加のエクスペリエンスです。
タッチイベントは、サポートされている場合に機能します。半径と回転の値が利用可能な場合は、アプリケーションを拡張して、ユーザーにより優れたエクスペリエンスを提供できます。すべてのユーザーが Wacom タブレットを持っているわけではありませんが、多くのペイント アプリケーションは Wacom タブレットを利用しています。

ポインタイベントはどうなるか

これは、タッチイベント API を利用するデベロッパーのために、この API を完全に具体化することを目的としています。質問を少しはぐらかしたのがわかりますか？Blink の PointerEvent 実装に興味がある場合は、Issue 471824 にスターを付けて、Rick Byers のトラッキング ドキュメントをご覧ください。

関連項目