Touch: radiusX プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 |
ブラウザーの互換性
Loading…