Введение в Pointer Lock API

Pointer Lock API – это API, который предоставляет прямой доступ к курсору пользователя, ограничивая события мыши (mouse events) определенным элементом и убирая курсор из поля зрения. Этот режим может быть полезен, к примеру, в приложениях связанных с 3d-моделированием.


В данном режиме события курсора обрабатываются даже когда курсор находится за пределами браузера или экрана – в обычном режиме обработка событий ограничена окном браузера. В некотором смысле Pointer Lock API напоминает mouse capture, с той разницей что mouse capture обрабатывает события только при нажатой клавише мыши, не прячет курсор и не обрабатывает события за пределами экрана.


Общий принцип работы


Чтобы инициировать Pointer Lock нужно вызвать метод requestPointerLock() у нужного элемента. На момент написания статьи большинство популярных браузеров (Chrome, Firefox) не спрашивают разрешения, а лишь уведомляют пользователя что курсор захвачен.


У объекта Document есть свойство pointerLockElement, в котором содержится захвативший курсор элемент или null в любом другом состоянии. Для реакции на изменение статуса захвата курсора используется событие pointerlockchange, ощибки можно отслеживать с помощью pointerlockerror.


document.addEventListener('pointerlockchange', lockStatusChange, false);

function lockStatusChange(){
    if(document.pointerLockElement === canv){
        document.addEventListener("mousemove", updateCirclePosition, false);
    }
    else{
        document.removeEventListener("mousemove", updateCirclePosition, false);
    }
}

document.addEventListener('pointerlockerror', lockError, false);

function lockError(e){
    console.log(‘pointer lock failed’);
}

Расширения Mouse Events


Pointer Lock API вводит в интерфейс MouseEvent свойства, содержащие изменения (дельты) движения курсора – movementX и movementY. То есть, значения movementX/movementY равны разнице между текущим и предыдущим screenX/screenY. Когда курсор захвачен (locked state) обычные свойства clientX, clientY, screenX и screenY замораживаются, как если бы курсор был неподвижен. В обычном незахваченном состоянии (unlocked state) movementX и movementY также доступны для удобства.


Пример


Пример в codepen доступен по ссылке. Кликните на canvas для захвата курсора.


Источники


  1. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
  2. https://www.w3.org/TR/2016/REC-pointerlock-20161027/
Метки:
html5, canvas. javascript