rotationAngle と touchRadius を使用する

Chrome の Touch API に比較的小さな変更が加えられ、 Chrome 39 webkitRotationAngle 属性の作業バージョンを TouchEvent オブジェクト。現在 Chrome 45(2015 年 7 月のベータ版)では、rotationAngle という接頭辞が付いていません。 実装をより緊密に統合して TouchEvent [仕様] と [Firefox] を選択します。

長い間使われていますが、 rotationAngle: タップの興味深い使用法 モバイル デバイスでは特に便利です。

技術的には、回転角度は角度(0 ~ 90 度)で表します。 接触領域の楕円は、 Touch.radiusX および Touch.radiusY: なるほど。なお、 Android は radiusXradiusY の値を 64 ピクセルにロックせず、代わりに 画面の接触サイズによって変わります)。

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

モデルのサイズ、形状、向きを正確に表現する方法と タップしてください。ユーザーが必ずしもペン先で画面をタップするわけではない 画面を押す回数は多くありませんが、 入手できますrotationAngle なしでは、単純に タップ操作の幅と高さrotationAngle を使用すると、 90 度回転します(0 は垂直、90 は水平)。なぜ 90 度?90 度以外の角度ではよいからです。 これに合わせて radiusXradiusY が変更されます。

もう一つの優れた点は 指が接触する領域が 画面にかかる指の圧力が変わるほどですこれは、 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;

これを実際に使用する場面

明らかに、これが組織の関係者にとってすぐにメリットとなる user:

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

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

いいえ。まだあまり一般的ではありませんが、Nexus 10 をお持ちでしたら、 次のようになります。

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

画像クレジット: Rick Byers

デバイスがタップの回転角度を認識できない場合、 rotationAngle は 0、radiusXradiusY の値は次のようになります。 同じです(ただし、そのときの接触面の面積によって変わることがあります)。

なんでわざわざ?

いい質問ですね。ウェブ上の多くの機能と同様に、これは付加的なエクスペリエンスです。
タッチイベントは、半径と回転の値がサポートされていれば、機能します。 さまざまな機能が用意されています。アプリケーションを強化して、 体験できますすべてのユーザーが Wacom のタブレットを持っているわけではありませんが、多くの絵画がある場合 活用できるようになります。

ポインタ イベントについてはどうでしょうか。

これは、タッチイベントを完全に具体化したものであることを確認するためのものです。 必要としているデベロッパー向けの API です。どうやって質問を回避したか見て...さらに表示 ですが、Blink の PointerEvent をたどって Issue 471824 にスターを付けてください。 「Rick Byers'トラッキング ドキュメントをご覧ください。

関連項目