Использование 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;

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

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

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

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

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

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

Изображение предоставлено Риком Байерсом .

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

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

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

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

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

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