Touch: radiusX プロパティ
radiusX
は Touch
インターフェイスの読み取り専用プロパティで、タッチ面の連絡先を最も近く囲む楕円の X 半径を返します。値は Touch.screenX
と同じ倍率の CSS のピクセル値です。
この値と Touch.radiusY
および Touch.rotationAngle
の組み合わせにより、ユーザーと画面の接触領域のサイズと図形を近似した楕円が構成されます。これは、例えば、指先と画面の間の接触を表す比較的大きな楕円であったり、スタイラスの先端を表す小さな領域であったりします。
値
数値です。
例
この例では、 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)`;
}
仕様書
Specification |
---|
Touch Events # dom-touch-radiusx |
ブラウザーの互換性
BCD tables only load in the browser