触摸：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>

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。