Краткое руководство: жесты и операции DOM (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Вы можете настроить взаимодействие с пользователями для некоторых основных жестов, описанных в языке прикосновений Windows (например, проведение пальцем, поворот и изменение размера) с помощью обработки событий основных жестов модели DOM.

Обновления в Windows 8.1: В Windows 8.1 появилось множество обновлений и усовершенствований API ввода с помощью указателя. Подробнее: Изменения API для Windows 8.1.

Если у вас нет опыта в разработке приложений на JavaScript: Прочитайте эти разделы, чтобы ознакомиться с технологиями, обсуждаемыми в данной статье.

Создание первого приложения на JavaScript

Схема создания приложений на JavaScript

Информацию о событиях см. в разделе Краткое руководство: добавление элементов управления HTML и обработчиков событий

Компоненты приложения от начала до конца:

Дополнительные сведения об этой функциональности см. в нашей серии Компоненты приложения от начала до конца.

Взаимодействие с пользователем от А до Я (HTML)

Настройка взаимодействия с пользователем от А до Я (HTML)

Рекомендации по взаимодействию с пользователем:

Библиотеки элементов управления платформы (HTML и XAML) предоставляют все механизмы взаимодействия с пользователем, в том числе стандартные взаимодействия, анимированные физические эффекты и визуальную обратную связь. Если вы не планируете настраивать механизмы поддержки взаимодействий, используйте стандартные элементы управления.

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

• Руководство по стандартным способам взаимодействия с пользователем
• Рекомендации по скольжению по диагонали
• Руководство по визуальному масштабированию и изменению размеров
• Руководство по функции сдвига
• Рекомендации по вращению
• Руководство по контекстному масштабированию
• Рекомендации по выделению текста и изображений
• Рекомендации по нацеливанию
• Руководство по визуальной обратной связи

Примеры: Примеры использования этой функциональности см. в коллекции примеров приложений.

Пример настройки взаимодействия с пользователем

Пример прокрутки, сдвига и масштабирования в HTML

Ввод: пример обработки событий указателя DOM

Ввод: пример пользовательских жестов

Цель: Описывается ожидание и обработка основных жестов для преобразования, вращения и масштабирования на основе данных, вводимых с помощью касания, мыши, пера и событий жестов DOM.

Необходимые условия

Обзор документа Краткое руководство: указатели.

Предполагается, что вы умеете создавать простые приложения на JavaScript с использованием шаблона библиотеки Windows для JavaScript.

Для выполнения этого руководства вам необходимо:

• Установить Microsoft Visual Studio.
• Получить лицензию разработчика. Инструкции см. в разделе о разработке с помощью Visual Studio 2013.
• Создание первого приложения на JavaScript.
• Сведения об объектах и элементах управления WinJS см. в документе Краткое руководство: добавление элементов управления и стилей WinJS.

Время для завершения: 30 мин.

Что такое события жестов?

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

В Windows поддерживается базовый набор жестов для взаимодействия с пользовательским интерфейсом и управления им.

Жест		Описание
Касание		Обнаружен один кратковременный контакт. Касание элемента вызывает основное действие.
Нажатие и удерживание		Обнаружен один контакт без перемещения. Такое взаимодействие вызывает появление подробных сведений или обучающих визуальных эффектов (например, подсказки или контекстное меню) без необходимости выполнения действия.
Скользящее движение		Пользователь прикасается к экрану одним или несколькими пальцами и двигает их в одном направлении. Скользящие действия используются главным образом для сдвига объектов, но также подходят для перемещений, рисования или рукописного ввода.
Прокрутка		Пользователь прикасается к экрану одним или несколькими пальцами и перемещает их в одном направлении на короткое расстояние. Проведите пальцем для выбора объекта, команды или перемещения.
Вращение		Пользователь прикасается к экрану двумя или несколькими пальцами и двигает их по дуге в направлении по часовой стрелке или против нее. Выполните поворот для вращения объекта.
Уменьшение		Пользователь прикасается к экрану двумя или более пальцами и сдвигает их. Используйте сжатие для уменьшения масштаба.
Растяжение		Пользователь прикасается к экрану двумя или более пальцами и раздвигает их. Используйте сжатие для увеличения масштаба.
Подробнее об этих жестах и их отношении к языку касаний Windows см. в разделе Взаимодействие с помощью сенсорного ввода.

 

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

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

Важно  Если вы реализуете собственную поддержку взаимодействий, помните: пользователи ожидают, что способ взаимодействия с элементами вашего приложения будет интуитивно понятным. Рекомендуется моделирование взаимодействий с пользователем на базе библиотек элементов управления платформы (HTML и XAML) для единообразия элементов и возможности их обнаруживать. Элементы управления в этих библиотеках предоставляют все механизмы взаимодействия с пользователем, в том числе стандартные взаимодействия, анимированные физические эффекты, визуальную обратную связь и специальные возможности. Создавайте пользовательские взаимодействия, только если они действительно необходимы и если ни один стандартный механизм взаимодействия не подходит для использования в вашем сценарии.

 

Создание пользовательского интерфейса

В этом примере мы используем в качестве целевого объекта для ввода от указателя и обнаружения и обработки жеста прямоугольник (target).

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

Мы отображаем сведения для каждого события указателя и жеста в целевом объекте вместе с примененной к нему текущей матрицей преобразования.

HTML-код для этого примера.

<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- BasicGesture references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div class="TargetContainer" id="targetContainer">
        <div id="colorMixer">
            <input type="radio" name="color" value="R" title="Red" id="red" class="Red" /><label for="red" id="labelRed">Red</label>
            <input type="radio" name="color" value="G" title="Green" id="green" class="Green" /><label for="green" id="labelGreen">Green</label>
            <input type="radio" name="color" value="B" title="Blue" id="blue" class="Blue" /><label for="blue" id="labelBlue">Blue</label>
            <div id="targetLog"></div>
            <div id="eventLog"></div>
        </div>
    </div>
</body>
</html>

Код каскадных таблиц стилей (CSS) для этого примера.

Примечание  События указателя не генерируются в процессе взаимодействий сдвига или масштабирования. Сдвиг и масштабирование для области можно отключить при помощи таких свойств CSS, как msTouchAction, overflow и -ms-content-zooming.

 

body {
    overflow: hidden;
    position: relative;
}

div #targetContainer {
/*
Set the width and height properties of the target container to fill the viewport. 
You can set these properties to 100%, but we use 100vw (viewport width) and 100vh (viewport height).
See https://go.microsoft.com/fwlink/?LinkID=301480 for more detail on CSS units supported by Internet Explorer.
*/
    height: 100vw;
    width: 100vh;
    overflow: hidden;
    position: absolute;
}

div #colorMixer {
/*
A manipulation-blocking element is defined as an element that explicitly 
blocks direct manipulation via declarative markup, and instead fires gesture 
events such as MSGestureStart, MSGestureChange, and MSGestureEnd.
*/
    touch-action: none;
    -ms-transform-origin: 0px 0px;
    position: absolute;
    background-color: black;
    border-color: white;
    border-width: thick;
    border-style: solid;
}

div #colorSelector {
    position: relative;
}

div #eventLog {
    -ms-overflow-style:scrollbar;
}

input.Red {
    background-color: rgb(255,0,0);
}

input.Green {
    background-color: rgb(0,255,0);
}

input.Blue {
    background-color: rgb(0,0,255);
}

Ожидание событий указателя и жестов

Этот код настраивает смеситель и селекторы цветов и объявляет различные обработчики событий.

В большинстве случаев рекомендуется получать информацию об указателе через аргумент события обработчиков события указателя на выбранном языке платформы.

Если аргумент события не предоставляет сведения об указателе, необходимые вашему приложению, вы можете получить доступ к расширенным сведениям об указателе из аргумента события с помощью методов getCurrentPoint и getIntermediatePoints или свойств currentPoint иintermediatePoints. Мы рекомендуем использовать методы getCurrentPoint и getIntermediatePoints, так как вы можете указывать контекст сведений об указателе.

Сначала мы объявляем глобальные переменные, определяем объект данных (colorInfo) для отслеживания состояния целевого объекта и инициализируем смеситель цветов (target) и селекторы цветов RGB.

var _width = 640;
var _height = 640;

var _pointerInfo;
var _targetLog;

var _selectedColor;
var _colorRed, _colorGreen, _colorBlue;

// Color-specific data object.
//   value: The color value (r, g, or b)
//   rotation: The rotation value used to calculate color value.
//   matrix: The transform matrix of the target.
function colorInfo(value, rotation, matrix) {
    this.value = value;
    this.rotation = rotation;
    this.matrix = matrix;
}

function initialize() {
    // Configure the target.
    setTarget();

    // Initialize color tracking.
    setColors();
}

Затем мы настраиваем смеситель цветов, связываем распознаватель жестов (msGesture) с объектом, а затем объявляем обработчики событий.

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

 

// Configure the interaction target.
function setTarget() {
    //  Set up the target position, size, and transform.
    colorMixer.style.width = _width + "px";
    colorMixer.style.height = _height + "px";
    colorMixer.style.msTransform = (new MSCSSMatrix()).
        translate((window.innerWidth - parseInt(colorMixer.style.width)) / 2.0,
        (window.innerHeight - parseInt(colorMixer.style.height)) / 2.0);

    // Create gesture recognizer.
    var msGesture = new MSGesture();
    msGesture.target = colorMixer;
    colorMixer.gesture = msGesture;
    // Expando property for handling multiple pointer devices.
    colorMixer.gesture.pointerType = null;

    // Expando property to track pointers.
    colorMixer.pointers = [];

    // Declare event handlers.
    colorMixer.addEventListener("pointerdown", onPointerDown, false);
    colorMixer.addEventListener("pointerup", onPointerUp, false);
    colorMixer.addEventListener("pointercancel", onPointerCancel, false);
    colorMixer.addEventListener("lostpointercapture", onLostPointerCapture, false);
    colorMixer.addEventListener("MSGestureChange", onMSGestureChange, false);
    colorMixer.addEventListener("MSGestureTap", onMSGestureTap, false);
    colorMixer.addEventListener("MSGestureEnd", onMSGestureEnd, false);
    colorMixer.addEventListener("MSGestureHold", onMSGestureHold, false);
}

Наконец, мы инициализируем селекторы цветов RGB (с обработчиками событий) и объект colorInfo.

// Initialize values and event listeners for color tracking.
function setColors() {
    var m = new MSCSSMatrix(colorMixer.style.msTransform);
    _colorRed = new colorInfo(0, 0, m);
    _colorGreen = new colorInfo(0, 0, m);
    _colorBlue = new colorInfo(0, 0, m);

    document.getElementById("red").addEventListener("click", onColorChange, false);
    document.getElementById("green").addEventListener("click", onColorChange, false);
    document.getElementById("blue").addEventListener("click", onColorChange, false);
}

// Re-draw target based on transform matrix associated with color selection.
function onColorChange(e) {
    switch (e.target.id) {
        case "red":
            colorMixer.style.msTransform = _colorRed.matrix;
            break;
        case "green":
            colorMixer.style.msTransform = _colorGreen.matrix;
            break;
        case "blue":
            colorMixer.style.msTransform = _colorBlue.matrix;
            break;
    }
    _selectedColor = e.target.id;

    eventLog.innerText = "Color change";
    targetLog.innerText = colorMixer.style.msTransform;
}

Обработка события опускания указателя

В случае события опускания указателя мы получаем выбранный цвет RGB и связываем указатель с распознавателем жестов, вызвав метод addPointer. Мы отслеживаем последовательностьpointerType для повторного связывания указателя и распознавателя жестов, если требуется.

Если цвет не выбран, мы игнорируем событие указателя.

// Pointer down handler: Attach the pointer to a gesture object.
function onPointerDown(e) {
    // Do not attach pointer if no color selected.
    if (_selectedColor === undefined)
        return;
    _selectedColor = getSelectedColor();

    // Process pointer.
    if (e.target === this) {
        this.style.borderStyle = "double";
        //  Attach first contact and track device.
        if (this.gesture.pointerType === null) {
            this.gesture.addPointer(e.pointerId);
            this.gesture.pointerType = e.pointerType;
        }
            // Attach subsequent contacts from same device.
        else if (e.pointerType === this.gesture.pointerType) {
            this.gesture.addPointer(e.pointerId);
        }
            // New gesture recognizer for new pointer type.
        else {
            var msGesture = new MSGesture();
            msGesture.target = e.target;
            e.target.gesture = msGesture;
            e.target.gesture.pointerType = e.pointerType;
            e.target.gesture.addPointer(e.pointerId);
        }
    }
    eventLog.innerText = "Pointer down";
}

// Get the current color.
function getSelectedColor() {
    var colorSelection = document.getElementsByName("color");
    for (var i = 0; i < colorSelection.length; i++) {
        if (colorSelection[i].checked)
            return colorSelection[i].id;
    }
}

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

В этом коде мы обрабатываем жесты преобразования (длинное или короткое скольжение), вращение и масштабирование (сжатие или растягивание).

// Gesture change handler: Process gestures for translation, rotation, and scaling.
// For this example, we don't track pointer movements.
function onMSGestureChange(e) {
    // Get the target associated with the gesture event.
    var elt = e.gestureObject.target;
    // Get the matrix transform for the target.
    var matrix = new MSCSSMatrix(elt.style.msTransform);

    // Process gestures for translation, rotation, and scaling.
    e.target.style.msTransform = matrix.
        translate(e.offsetX, e.offsetY).
        translate(e.translationX, e.translationY).
        rotate(e.rotation * 180 / Math.PI).
        scale(e.scale).
        translate(-e.offsetX, -e.offsetY);

    // Mix the colors based on rotation value.
    switch (_selectedColor) {
        case "red":
            _colorRed.rotation += ((e.rotation * 180 / Math.PI));
            _colorRed.rotation = _colorRed.rotation % 360;
            targetLog.innerText = _colorRed.rotation.toString();
            if (_colorRed.rotation >= 0)
                _colorRed.value = parseInt(Math.abs(_colorRed.rotation) * (256 / 360));
            else
                _colorRed.value = parseInt((360 - Math.abs(_colorRed.rotation)) * (256 / 360));
            document.getElementById("labelRed").innerText = _colorRed.value.toString();
            _colorRed.matrix = matrix;
            break;
        case "green":
            _colorGreen.rotation += ((e.rotation * 180 / Math.PI));
            _colorGreen.rotation = _colorGreen.rotation % 360;
            targetLog.innerText = _colorGreen.rotation.toString();
            if (_colorGreen.rotation >= 0)
                _colorGreen.value = parseInt(Math.abs(_colorGreen.rotation) * (256 / 360));
            else
                _colorGreen.value = parseInt((360 - Math.abs(_colorGreen.rotation)) * (256 / 360));
            document.getElementById("labelGreen").innerText = _colorGreen.value.toString();
            _colorGreen.matrix = matrix;
            break;
        case "blue":
            _colorBlue.rotation += ((e.rotation * 180 / Math.PI));
            _colorBlue.rotation = _colorBlue.rotation % 360;
            if (_colorBlue.rotation >= 0)
                _colorBlue.value = parseInt(Math.abs(_colorBlue.rotation) * (256 / 360));
            else
                _colorBlue.value = parseInt((360 - Math.abs(_colorBlue.rotation)) * (256 / 360));
            document.getElementById("labelBlue").innerText = _colorBlue.value.toString();
            _colorBlue.matrix = matrix;
            break;
    }
    e.target.style.backgroundColor = "rgb(" + _colorRed.value + ", " + _colorGreen.value + ", " + _colorBlue.value + ")";
    targetLog.innerText = e.target.style.msTransform;
    eventLog.innerText = "Gesture change";
}

Обработка других жестов по требованию

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

// Tap gesture handler: Display event.
// The touch language described in Touch interaction design (https://go.microsoft.com/fwlink/?LinkID=268162),
// specifies that the tap gesture should invoke an elements primary action (such as launching an application 
// or executing a command). 
// The primary action in this sample (color mixing) is performed through the rotation gesture.
function onMSGestureTap(e) {
    eventLog.innerText = "Gesture tap";
}

// Gesture end handler: Display event.
function onMSGestureEnd(e) {
    if (e.target === this) {
        this.style.borderStyle = "solid";
    }
    eventLog.innerText = "Gesture end";
}

// Hold gesture handler: Display event.
function onMSGestureHold(e) {
    eventLog.innerText = "Gesture hold";
}

// Pointer up handler: Display event.
function onPointerUp(e) {
    eventLog.innerText = "Pointer up";
}

// Pointer cancel handler: Display event.
function onPointerCancel(e) {
    eventLog.innerText = "Pointer canceled";
}

// Pointer capture lost handler: Display event.
function onLostPointerCapture(e) {
    eventLog.innerText = "Pointer capture lost";
}

Ссылки на связанные разделы, содержащие более сложные образцы, см. в нижней части страницы.

Полный пример

См. полный код для жестов и операций DOM.

Краткая сводка и дальнейшие действия

Из данного краткого руководства вы узнали об обработке основных событий жестов в приложениях Магазина Windows на JavaScript.

Распознавание основных жестов вместе с событиями указателя полезно для управления простыми взаимодействиями, такими как преобразование (длинное или короткое скольжение), вращение и масштабирование (сжатие или растягивание).

Для обработки более сложных взаимодействий и предоставления полностью настраиваемого взаимодействия с пользователем см. разделы Краткое руководство: статические жесты и Краткое руководство: жесты управления.

Дополнительные сведения о языке касания Windows 8 см. в разделе Взаимодействие с помощью сенсорного ввода.

Связанные разделы

Разработчикам

Реакция на взаимодействие с пользователем

Разработка приложений Магазина Windows (JavaScript и HTML)

Краткое руководство: указатели

Краткое руководство: статические жесты

Краткое руководство: жесты управления

Конструкторам

Взаимодействие с помощью сенсорного ввода