Использование RotationAngle и TouchRadius

Пол Кинлан

Сравнительно небольшое изменение в Touch API в Chrome появилось в Chrome 39 , где была введена рабочая версия атрибута 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 для изменения угла контакта кисти с холстом.
  • Улучшенное распознавание жестов: если вы понимаете угол поворота, вы можете создать жест одним пальцем, чтобы повернуть объект.

Все ли устройства поддерживают эту функцию?

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

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

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

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

Зачем беспокоиться?

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

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

Это на самом деле просто для того, чтобы убедиться, что у нас есть полностью проработанный API событий касания для разработчиков, которые на него полагаются. Смотрите, как я немного уклонился от вопроса... А если серьезно, если вам интересно следить за реализацией PointerEvent в Blink, вы можете отметить Issue 471824 и прочитать документацию по отслеживанию Рика Байерса .

Смотрите также