Выход за рамки панорамирования, масштабирования и касания с помощью событий жестов

Основываясь на ваших отзывах, мы улучшили механизмы, с помощью которых сайты могут предоставлять расширенные возможности сенсорного управления с использованием событий жестов в Internet Explorer 10 в Windows 8 Release Preview. Ранее мы уже писали о том, что нужно сделать веб-разработчикам в первую очередь для обеспечения удобного сенсорного управления и как создавать новые принципы взаимодействия с пользователем, успешно работающие на самых разных устройствах ввода, включая мультисенсорные, с помощью аппаратно-независимых событий указателя. В данной статье рассматриваются события жестов в Internet Explorer 10. Примером событий жестов является приведенная ниже тестовая интерактивная демонстрация Browser Surface.

В этой демонстрации Browser Surface пользователи могут перетаскивать, сжимать и поворачивать фотографии

В Internet Explorer 10 в Windows 8 Release Preview реализованы объекты распознавания жестов в JavaScript. Объекты жестов могут создаваться сайтами. Решите, какие указатели (мыши, пера или сенсорного управления) следует обрабатывать, и направьте события жестов на любой интересующий вас элемент. После этого браузер вычисляет, какой именно жест выполняется, и посредством событий уведомляет об этом страницу. Это позволяет разработчикам создавать механизмы использования жестов, отсутствующие среди собственных возможностей любого из других браузеров. Сюда входит возможность использования нескольких одновременных жестов, например, для поворота двух элементов головоломки обеими руками.

Давайте посмотрим, как это реализуется в коде.

Создание объекта жеста

Первый этап по реализации обработки жестов на вашем сайте заключается в создании экземпляра объекта жеста.

var myGesture = new MSGesture();

Затем задайте целевой элемент для жеста. Это элемент, для которого браузер активирует события жестов. Кроме того, данный элемент определяет пространство координат для таких событий.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Наконец, сообщите объекту жеста, какие именно указатели следует обрабатывать в рамках распознавания жеста.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Примечание. Не забывайте, что для такой настройки элемента, при которой он не станет выполнять действия касаний по умолчанию, например, панорамирование и масштабирование, а вместо этого применит для введенных данных события указателя, следует использовать –ms-touch-action.

Обработка событий жестов

Когда объект жеста имеет допустимую цель и хотя бы один добавленный к ней указатель, он начинает активировать события жестов. Существует 2 вида событий жестов: статические жесты (такие как касание либо нажатие и удерживание) и динамические жесты (такие как сжатие, поворот или прокрутка).

Касание

Самым простым распознаваемым жестом является касание. При обнаружении касания возникает событие MSGestureTap для целевого элемента объекта жеста. В отличие от события щелчка, жест касания активируется только в том случае, когда пользователь касается экрана (либо нажимает кнопку мыши или касается пером) и сразу же убирает руку без перемещения. Часто это бывает удобно, когда требуется разграничить касание и перетаскивание элемента пользователем.

Нажатие и удерживание

Жест нажатия и удерживания распознается, когда пользователь касается экрана одним пальцем, ненадолго удерживает нажатие и поднимает палец от экрана без перемещения. В рамках процесса нажатия и удерживания событие MSGestureHold активируется несколько раз для разных состояний жеста:

element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {

if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {

// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.

}

if (evt.detail & evt.MSGESTURE_FLAG_END) {

// End signals the end of the gesture.

}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.

}

}

Динамические жесты (сжатие, поворот, прокрутка и перетаскивание)

Динамические жесты, такие как сжатие или поворот, регистрируются в форме преобразований, похожих на двухмерные преобразования CSS. Для динамических жестов активируются три события: MSGestureStart, MSGestureChange (активируется многократно на всем протяжении выполнения жеста) и MSGestureEnd. Каждое из событий содержит информацию о масштабе (сжатие), повороте, перемещении и скорости.

Так как динамические жесты регистрируют преобразования, то для манипуляций с таким элементом, как фотография или элемент головоломки, можно легко использовать MSGesture с двухмерными преобразованиями CSS. Например, вы можете разрешить масштабирование, поворот и перетаскивание элементов следующим образом:

targetElement.addEventListener("MSGestureChange", manipulateElement);

function manipulateElement(e) {

// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)

// return;

 

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element

e.target.style.transform = m

.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture

.rotate(e.rotation * 180 / Math.PI) // Apply Rotation

.scale(e.scale) // Apply Scale

.translate(e.translationX, e.translationY) // Apply Translation

.translate(-e.offsetX, -e.offsetY); // Move the transform origin back

}

Динамические жесты, такие как масштабирование и поворот, поддерживаются и при использовании мыши — для этого нужно поворачивать колесо мыши при нажатой клавише CTRL или SHIFT соответственно.

Подводя итоги

События жестов Internet Explorer 10 позволяют вам создавать механизмы сенсорного управления, на данный момент отсутствующие в любом другом браузере. Подробную документацию по MSGesture объектам и MSGesture событиям смотрите на сайте MSDN.

Выведите свои сайты за рамки панорамирования, масштабирования и касания с помощью событий жестов.

— Джейкоб Росси (Jacob Rossi), руководитель программы, Internet Explorer