Относительно небольшое изменение 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 и прочитать документ по отслеживанию Рика Байерса .