29 дек 2016 в 14:01

Введение в 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 для захвата курсора.

Источники

Хабы:

JavaScript