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 |
浏览器兼容性
加载中…