Touch: radiusX 屬性
radiusX 是 Touch 介面的一個只讀屬性，它返回一個橢圓的 X 軸半徑，該橢圓最能擬合觸控表面的接觸區域。該值以 CSS 畫素表示，其尺度與 Touch.screenX 相同。
此值與 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 旋轉該元素。
html
<div id="src">…</div>
js
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);
// Turn off default event handling
e.preventDefault();
// Rotate element 'src'.
src.style.width = `${touch.radiusX * 2}px`;
src.style.height = `${touch.radiusY * 2}px`;
src.style.transform = `rotate(${touch.rotationAngle}deg)`;
}
規範
| 規範 |
|---|
| 觸控事件 # dom-touch-radiusx |
瀏覽器相容性
載入中…