Использование rotationAngle и touchRadius

Paul Kinlan

В Chrome 39 было внесено небольшое изменение в Touch API, которое добавило рабочую версию атрибута webkitRotationAngle в объект TouchEvent. В Chrome 45 (бета-версия вышла в июле 2015 г.) префикс был удален, и теперь свойство называется rotationAngle. Это позволило привести нашу реализацию в соответствие со спецификацией TouchEvent и Firefox.

Хотя он существует уже некоторое время, стоит объяснить, что такое rotationAngle, поскольку он открывает некоторые более интересные возможности использования сенсорных жестов, особенно на мобильных устройствах.

Технически угол поворота – это количество градусов (от 0 до 90) эллипса области контакта, определяемое свойствами Touch.radiusX и Touch.radiusY. Круто, да? (Следует отметить, что я только что узнал, что Chrome на Android не блокирует значения radiusX и radiusY до 64 пикселей, а вместо этого изменяет их в зависимости от размера экрана).

Что это значит?

Это позволяет точно определить размер, форму и ориентацию пальца пользователя на экране. Пользователи не всегда касаются экрана кончиком пальца, а часто нажимают на него так, как будто оставляют отпечаток пальца в полиции. Без rotationAngle вы бы просто получили ширину и высоту жеста касания. С помощью rotationAngle вы можете повернуть изображение на 90 градусов (0 – вертикальное положение, 90 – горизонтальное). Почему только 90 градусов? Вам нужны только 90 градусов, потому что по мере того, как вы проходите эти углы, radiusX и radiusY будут меняться, чтобы приспособиться.

Ещё одна интересная особенность заключается в том, что площадь контакта пальца пользователя меняется по мере того, как он меняет степень давления пальца на экран. Это не прямая замена force, но вы можете различать легкие касания экрана, поскольку они будут иметь меньшую площадь поверхности, чем более сильное нажатие.

Как его использовать?

Во-первых, вам нужно устройство, которое может это обнаружить. Nexus 10 подойдет. Отличный пример – пример отрисовки Рика Байерса. Но чтобы не отставать, вот способ использовать его без холста.

var touchHandler = function(e) {
    e.preventDefault();
    var touches = e.changedTouches;
    var touch = touches[0]; // only concerned about first touch.
    
    var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
    var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
    var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
    var force = touch.force || touch.webkitForce || 0;
    
    // Use the rotationAngle to rotate the 'p' element.
    
    p.style.width = radiusX * 2 + 'px';
    p.style.height = radiusY * 2 + 'px';
    p.style.transform = "rotate(" + rotationAngle + "deg)";
};

document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;

Где бы вы использовали это на практике?

Есть несколько очевидных мест, где это принесет немедленную пользу пользователю:

  • Например, веб-приложения для рисования и обработки изображений могут использовать эту информацию, чтобы изменять штрихи или эффекты, применяемые к холсту. Вы можете использовать радиус касания, чтобы изменить размер кисти, и вы можете комбинировать его с rotationAngle, чтобы изменять угол контакта кисти с холстом.
  • Улучшенное распознавание жестов. Если вы понимаете, как работает rotationAngle, вы можете создать жест одним пальцем, чтобы заставить объект вращаться.

Поддерживается ли эта функция на всех устройствах?

Нет. Пока это не очень распространено. Если у вас Nexus 10, вы увидите что-то вроде этого,

Скриншот с поворотом угла касания

Автор изображения: Рик Байерс (Rick Byers).

Если устройство не может определить угол поворота касания, значение rotationAngle будет равно 0, а значения radiusX и radiusY будут равны (но могут варьироваться в зависимости от текущей площади поверхности касания).

Зачем нужны трейлеры?

Хороший вопрос. Как и многие другие функции в интернете, это дополнение к основному контенту.
События касания будут работать, если они поддерживаются. Если доступны значения радиуса и поворота, вы можете улучшить свое приложение, чтобы сделать его более удобным для пользователя. Не у каждого пользователя есть планшет Wacom, но если он есть, многие приложения для рисования будут использовать его преимущества.

Что насчет событий указателя?

Это действительно просто о том, чтобы убедиться, что у нас есть полностью проработанный API событий касания для разработчиков, которые полагаются на него. Видите, как я уклонился от ответа? Если вы хотите следить за реализацией PointerEvent в Blink, отметьте звездочкой проблему 471824 и прочитайте документ Рика Байерса (Rick Byers).

Похожие статьи