Объединение Touch и Mouse с событиями указателя

Примечание: белая рамка, углы и фоновое изображение задаются с помощью CSS, определенного в toucharticle.css . Corners.js просто создает четыре элемента div (с функцией append) и размещает их поверх основного элемента в каждом углу с помощью соответствующих классов CSS.

Тем не менее, есть кое-что, что меня не устраивает в текущем результате. Как только вы удерживаете изображение, как только вы слегка двигаете пальцем, флаг MSGESTURE_FLAG_CANCEL поднимается и захватывается обработчиком, который удаляет углы. Я бы предпочел убирать углы только тогда, когда пользователь отпускает палец в любом месте над изображением или как только он перемещает палец из поля, ограниченного изображением. Чтобы сделать это, мы собираемся удалить углы только в MSPointerUp или MSPointerOut. Это дает этот код вместо этого:

  var myGreatPic = document.getElementById ( "myGreatPicture" );
 // Создание нового MSGesture, который будет контролировать элемент DOM myGreatPic 
  var myGreatPicAssociatedGesture = new MSGesture ();
 myGreatPicAssociatedGesture.target = myGreatPic;

 // Вы должны сначала зарегистрироваться в MSPointerDown, чтобы иметь возможность 
  // иметь доступ к более сложным событиям жестов 
  myGreatPic.addEventListener ( "MSPointerDown" , указатель вниз, false );
 myGreatPic.addEventListener ( "MSGestureHold" , holded, false );
 myGreatPic.addEventListener ( "MSPointerUp" , removecorners, false );
 myGreatPic.addEventListener ( "MSPointerOut" , removecorners, false );

 // После касания мы отправляем все указатели на объект MSGesture 
  указатель на функцию (событие) {
     myGreatPicAssociatedGesture.addPointer (event.pointerId);
 }

 // Это событие будет вызвано объектом MSGesture 
  // на основе указателей, предоставленных во время события MSPointerDown 
  функция holded (событие) {
     // Жест начинается, мы добавляем углы 
      if (event.detail === event.MSGESTURE_FLAG_BEGIN) {
         Corners.append (myGreatPic);
     }
 }

 // Удаляем углы на указателе вверх или наружу 
  функция removecorners (событие) {
     Corners.remove (myGreatPic);
 }

 // Чтобы не было эквивалента контекстуального   
  // меню "правой кнопкой мыши", отображаемое в событии MSPointerUp,  
  // мы предотвращаем поведение по умолчанию 
  myGreatPic.addEventListener ( "contextmenu" , function (e) {
     e.preventDefault ();  // Отключаем системное меню 
  }, ложно ); 

который теперь обеспечивает поведение, которое я искал:

Пример 2: масштабирование, перемещение и вращение

Наконец, если вы хотите масштабировать, переводить или вращать элемент, вам просто нужно написать очень мало строк кода. Сначала вам нужно зарегистрироваться на событие MSGestureChange . Это событие отправит вас через различные атрибуты, описанные в документации по объекту MSGestureEvent, такие как вращение , масштабирование , translationX , translationY, которые в настоящее время применяются к вашему HTML-элементу.

Более того, по умолчанию объект MSGesture предоставляет алгоритм инерции бесплатно. Это означает, что вы можете взять HTML-элемент и выбросить его на экран пальцами, и анимация будет обработана для вас.

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

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

  myGreatPic.addEventListener ( "MSGestureChange" , манипулировать элементом , false ); 

И используйте следующий обработчик:

  function manageulateElement (e) {
     // Раскомментируем следующий код, если вы хотите отключить встроенную инерцию  
      // обеспечивается динамическим распознаванием жестов 
      // if (e.detail == e.MSGESTURE_FLAG_INERTIA) 
      // возвращение; 

      // Получить последнюю CSS-трансформацию для элемента 
      var m = new MSCSSMatrix (e.target.currentStyle.transform); 
     e.target.style.transform = m
     .translate (e.offsetX, e.offsetY) // Переместить начало преобразования под центр жеста 
      .rotate (e.rotation * 180 / Math.PI) // Применить вращение 
      .scale (e.scale) // Применить масштаб 
      .translate (e.translationX, e.translationY) // Применить перевод 
      .translate (-e.offsetX, -e.offsetY);  // Переместить источник преобразования назад 
  } 

который дает вам этот последний образец:

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

Прямая ссылка на все образцы

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

— Простой сенсорный образец по умолчанию с ничего не сделано
— Простой пример касания, шаг 1 с помощью CSS -ms-touch-action
— Простой пример касания, шаг 2а с базовой реализацией MSPointerMove
— Простой пример касания, шаг 2b, с указанием типа указателя
— Простой сенсорный пример, шаг 3, с MSPointers и запасным вариантом мыши
— MSGesture образец 1: обработчик MSGestureHold
— MSGesture образец 1b: обработчик MSGestureHold
— MSGesture образец 2: MSGestureChange

Связанные ресурсы:

— Спецификация событий указателя W3C

— Обработка ввода с помощью Multi-Touch и мыши во всех браузерах: библиотека polyfill, которая должна помочь многим разработчикам в будущем
— Указатель и жест события

— Пойдите вне панорамирования, масштабирования и касания, используя события жестов

— IE Test Drive Browser Surface, который сильно вдохновил множество встроенных демонстраций

— Попробуйте классные игры в IE10 с Touch:

— Contre Jour и прочитайте очень интересную статью за кулисами

— Atari Arcade Games и прочтите также эту очень информативную статью: Сборка Atari с CreateJS, в которой подробно описывается выбор поддержки Touch на всех платформах.

— Запись сессии BUILD 3-140: сенсорный экран, стилус и мышь, о боже!

Логически, со всеми подробностями, представленными в этой статье, и связанными ссылками на другие ресурсы, вы теперь готовы реализовать модель MSPointer Events на своих веб-сайтах и в приложениях Магазина Windows. Затем у вас есть возможность легко улучшить работу ваших пользователей в Internet Explorer 10.