—»     —»   HTML5: Pointer Lock API позволяет вам скрывать указатель мыши из виду
  Раздел: Руководства   Нет комментариев  

HTML5: Pointer Lock API позволяет вам скрывать указатель мыши из виду



Браузеры постепенно становятся полноценными игровыми платформами. Благодаря HTML5 и javascript стала возможна разработка комплексных приложений, хотя для этого пока еще требуется много усилий. Некоторые типы игр подразумевают управление процессов при помощи клавиатуры, и в таком случае постоянно мелькающий на экране указатель мыши может раздражать. Теперь вы можете воспользоваться новым Pointer Lock API, чтобы скрывать указатель при необходимости.

HTML5: Pointer Lock API позволяет вам скрывать указатель мыши из виду

Pointer Lock API: с легкостью скрываем и отображаем указатель мыши

Метод “requestPointerLock()”, привязанный к случайному элементу, просит браузер скрыть указатель мыши. Браузер делает это, но не без помощи пользователя. Это значит, что вы не можете скрыть курсор при загрузке страницы. Вместо этого, придется воспользоваться хотя бы событием “click”, чтобы указатель исчез.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
this.requestPointerLock();
}, false);

В нашем примере указатель скрывается как только пользователь кликает по элементу 'canvas'. Подобно тому, как браузеры работают с Fullscreen API, появится всплывающее окно, в котором будет сказано что, что Pointer Lock API пытается скрыть курсор, и что вернуть его можно, нажав на клавишу ESC.

Пока указатель деактивирован (или скрыт), он остается на том же месте, где вы его оставили. Никакое движение не передвинет указатель с того места. Это также подразумевает невозможность убрать курсор за пределы окна браузера. Однако браузер по прежнему будет реагировать на нажатия клавиш мыши.

Чтобы вернуть указатель обратно, нужно воспользоваться методом “exitPointerLock()”. Используя его вкупе с параметром “pointerLockElement”, мы можем скрывать и отображать указатель, кликая по элементу, к которому привязана необходимая операция. Как только курсор будет скрыт, значением “pointerLockElement” станет DOM-элемент, на который и ведет API. В других случаях, значение будет “null”. При помощи, предположим, “pointerLockElement.nodeName” мы можем запросить название элемента – в нашем случае, мы используем “CANVAS” в качестве значения.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
if (document.pointerLockElement == null) {
this.requestPointerLock();
} else {
document.exitPointerLock();
}
}, false);

В этом примере, мы проверяем, имеет ли “pointerLockElement” значение null. Таким образом, мы проверяем, скрыт ли указатель мыши, или отображен. “requestPointerLock()” или “exitPointerLock()” выполняются соответствующим образом. В отличие от “requestPointerLock()”, “exitPointerLock()” не требует каких-либо действий от пользователя. Нам не нужно начинать метод при помощи события “click”.

В то время, как “requestPointerLock()” можно привязать к любому элементу, “exitPointerLock()” необходимо привязывать к “document”. Не забудьте проставить нужные приставки, так как Pointer Lock API – это кое-что новенькое. “webkitRequestPointerLock()” и “webkitExitPointerLock()” сделают все необходимое.

Продвинутое использование Pointer Lock API: определяем движение указателя мыши

Вместе с Pointer Lock API мы получили два новых параметра для определения движения указателя мыши. На данный момент у нас есть возможность запросить координаты указателя (внутри окна браузера) при помощи event-параметров “clientX” и “clientY”. Новые параметры “movementX” и “movementY” делают немного больше – они способны определять движение указателя мыши, а не просто его расположение.

document.addEventListener("mousemove", function(e) {
document.title = e.clientX + " " + e.movementX;
}

В данном примере, мы позволяет событию “mousemove” запустить функцию, которая вписывает последние значения “clientX” и “movementX” в заголовок документа. В то время, как “clientX” сообщает нам значение расположения на момент запроса, “movementX” сообщает нам о движении указателя по оси X, относительно последнего запуска функции. Чем быстрее двигается указатель, тем выше поднимается значение “movementX”. Движение вправо (“movementX”) и вниз (“movementY”) всегда выдаст в ответ положительное значение, а перемещение влево и вверх будет выдавать отрицательные значения. Если движения не происходит вообще, то значение останется на 0.

В данном случае значения “clientX” и “clientY” останутся неизменными. У них будут те значения, которые были выставлены при деактивации. Параметры “movementX” и “movementY” не имеют никаких зависимостей от Pointer Lock API, и их также можно использовать с полностью видимыми указателями.

Не забывайте использовать правильные приставки к новым параметрам. К примеру, вместе с “webkitMovementX” и “webkitMovementY”.

Pointer-Lock-API и непредвиденные ситуации: реагирование на изменения статуса и ошибки

Pointer Lock API знаком с двумя слушателями событий. Первый называется “pointerlockchange”, и он всегда исполняет функцию либо при сокрытии, либо при отображении указателя мыши.

document.addEventListener("pointerlockchange", function() {
if (document.pointerLockElement == null) {
alert("The mouse pointer is now visible.");
} else {
alert("The mouse pointer is now hidden.");
}
}, false);

Этот пример ведет к диалоговому окну, которое будет показано как при сокрытии, так и при отображении указателя. Используя параметр “pointerLockElement”, мы определяем последний статус, и открываем соответствующее сообщение.

Второй слушатель событий, “pointerlockerror” позволяет нам реагировать на ошибки, которые могут произойти в процессе сокрытия или отображения указателя мыши. Как мы уже отметили ранее, браузер будет реагировать только на сокрытие указателя, так как метод “requestPointerLock()” запускается посредством события “click”. Если мы запустим “requestPointerLock()” посредством “load”, браузер не отреагирует на сокрытие, и вместо этого запустится “pointerlockerror”.

document.addEventListener("pointerlockerror", function() {
alert("I could not hide the mouse pointer.");
}, false);

“pointerlockchange” и “pointerlockerror” реагируют на специфические для браузеров варианты как “webkitpointerlockchange” и “webkitpointerlockerror”.

Браузерная поддержка

На момент написания этой статьи, Pointer Lock API поддерживается настольными версиями Chrome и Firefox. Мобильные браузеры абсолютно не поддерживают этот API, даже мобильные версии Chrome и Firefox не способны предоставить соответствующую поддержку. Так как API имеет большое влияние в сфере игр, есть вероятность, что людям придется устанавливать указанные браузеры, чтобы иметь возможность с удовольствием поиграть во что-нибудь. Если и дальше будет движение в этом направлении, то стоит ожидать, что соответствующая поддержка появится во всех популярных браузерах.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 2261   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728