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 точки касания.

<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)`;
}