Touch: radiusX プロパティ

値

数値です。

例

この例では、 Touch インターフェイスの Touch.radiusX、Touch.radiusX、Touch.rotationAngle プロパティを使用する例を示します。 Touch.radiusX プロパティは、タッチ領域（指やスタイラスなど）を最も近く囲む楕円の、タッチ点の Touch.rotationAngle が示す軸上の半径です。同様に Touch.radiusY プロパティは、タッチ領域（指やスタイラスなど）を最も近く囲む楕円の、 Touch.rotationAngle で示される線に直交する軸の半径です。 Touch.rotationAngle は、 radiusX と radiusY で記述されている楕円を、その中心に対して時計回りに回転させたときの角度（度）です。

以下の単純なコードでは、 touchstart、touchmove、touchend イベントに対して単一のハンドラーを登録しています。 src 要素がタッチされると、タッチ点の radiusX と radiusY の値に基づいて要素の幅と高さが計算され、タッチ点の rotationAngle を使用して要素が回転します。

<div id="src">…</div>

const src = document.getElementById("src");

src.addEventListener("touchstart", rotate);
src.addEventListener("touchmove", rotate);
src.addEventListener("touchend", rotate);

function rotate(e) {
  const touch = e.changedTouches.item(0);

  // 既定のイベント処理を無効にする
  e.preventDefault();

  // 'src' 要素を回転する
  src.style.width = `${touch.radiusX * 2}px`;
  src.style.height = `${touch.radiusY * 2}px`;
  src.style.transform = `rotate(${touch.rotationAngle}deg)`;
}

仕様書

ブラウザーの互換性