前言

指针锁定(Pointer Lock),以前也叫鼠标锁定,提供了基于鼠标随时间的移动(如deltaΔ)的输入方法,不仅仅是视窗区域鼠标的绝对位置。指针锁定让你能够访问原始的鼠标移动,将鼠标事件的目标锁定为单个元素,消除了单个方向上鼠标能够移动的最远距离限制,并且,可以把鼠标从视图中去除(隐藏效果)。 这对于Web的第一人称之类的3D游戏来说,是极为理想的实现。

可以在单个方向无限移动鼠标;可以隐藏视图上的鼠标图案

远远不止上面说到的两点,对于任何把鼠标作为重要输入的应用,该API都是非常重要的。可以帮助我们实现移动、翻转物体以及更改条目。例如,该API允许用户通过简单的仅仅移动鼠标而不使用按钮来控制画面的视角,这样依赖,就解放了按钮,作为其他的的输入需求,例如移动(想象cs游戏,我们用键盘控制行走,跳跃,鼠标控制视角)。除了游戏,该API大有应用,例如地图的拖拽,或者星体图的查看等等。

该API让我们实现复杂的鼠标交互功能成为现实,现在的Web页面、应用广泛应用。帮助我们通过鼠标移动物体,控制视角等。

指针锁定让你能够在鼠标即便超出了我们的视图范围,也能正常访问鼠标事件。

如上图,鼠标动作不受限于黄色的视图区域。

这一特点,可以用户能够在鼠标超出视图依然能无限制的操控、旋转视图中的物体元素。而如果没有指针锁定,这一点是没有办法实现的,鼠标在移动至超出页面或者屏幕边缘后,就无法继续控制视图中的物体元素了。

通过这样的实现,游戏玩家在按键,或者来回滑动鼠标时就不必担心跳出游戏视窗。(可以想象cs游戏,不全屏,小窗口运行的时候,只要不用鼠标点击游戏视窗之外,让游戏视窗失去鼠标焦点,鼠标永远都会在游戏视窗内)

通过指针锁定,可以在不改变我们“物理视图”尺寸的前提下,拓展鼠标的操作空间,拖拽范围。

一些基本概念

Pointer lock(指针锁定) 依赖于 mouse capture(鼠标捕捉) 。Mouse capture 提供了当鼠标在被拖动时,给目标元素连续不断的事件传送(也就是说通过鼠标按住视图中的物体元素时,拖拽鼠标,鼠标的事件状态不会断掉,或者说能保持在移动鼠标时,焦点不会从元素上失去),但是当松开鼠标按钮时,将停止(松开鼠标按钮,元素失去焦点,再拖拽鼠标,元素不受影响)。 而鼠标指针在以下一些方面不同于Mouse capture :

  • 指针锁定是持续的,指针锁定不会释放鼠标,除非有显式的API调用被触发,或者用户使用了特定的释放动作。(cs移动视角,并不需要按住鼠标)
  • 指针锁定不受限于视窗或者屏幕边界。
  • 指针锁定会无视鼠标状态地传送事件(和第一点说的一个事)。
  • 隐藏了鼠标指针图案。

方法 / 属性概览

简单的描述指针锁定的每个属性和方法。


requestPointerLock( )

指针锁定的API和全屏的API相似,通过添加新的方法来拓展DOM元素,requestPointerLock 如果你要在 canvas 元素中添加指针锁定,你可以像这样声明:

canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock; canvas.requestPointerLock()

如果用户已经通过默认的 解锁手势 退出了指针锁定,或者之前未为此文档输入过指针锁定,那么在requestPointerLock 成功之前,该文档必须接受到由于参与手势而产生的事件结果。

不是太容易理解,大概是在声明指针锁定之前,先初始化,或者先确定不会受到解锁手势的影响,以免无法成功实现指针锁定


pointerLockElement 和 exitPointerLock()

该Pointer lock API 还提供了Document接口,加入了一个新属性和一个新方法。 新属性用于访问当前被锁定的元素,名为pointerlockElement, 而新方法名为exitPointerLock(), 用于退出指针锁定。

pointerlockElement属性对于我们用来判断某个元素是否被锁定时非常有用。 以下是一个使用示例:

if(document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
} else {
console.log('The pointer lock status is now unlocked');
}

Document.exitPointerLock()方法用于退出指针锁定,与requestPointerLock一样,它使用pointerlockchangepointerlockerror事件异步工作

document.exitPointerLock = document.exitPointerLock    ||
document.mozExitPointerLock; // Attempt to unlock
document.exitPointerLock();

pointerlockchange 事件

当指针锁定的状态改变,例如,当调用requestPointerLock(), exitPointerLock()方法,以及用户按Esc按键, 则pointerlockchange事件将会被发送至document。 下面是一个没有额外数据的样例:

if ("onpointerlockchange" in document) {
document.addEventListener('pointerlockchange', lockChangeAlert, false);
} else if ("onmozpointerlockchange" in document) {
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
} function lockChangeAlert() {
if(document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
// Do something useful in response
} else {
console.log('The pointer lock status is now unlocked');
// Do something useful in response
}
}

pointerlockerror 事件

当在调用 requestPointerLock() or exitPointerLock()的时候发生错误, pointerlockerror 事件将会被发送到 document,以下是一个样例:

document.addEventListener('pointerlockerror', lockError, false);
document.addEventListener('mozpointerlockerror', lockError, false); function lockError(e) {
alert("Pointer lock failed");
}

Pointer Lock API(1/3):Pointer Lock 的总体认识的更多相关文章

  1. Pointer Lock API(3/3):一个Demo

    简单的Demo演练 点击跳转至Code Pen以查看演示和源码 完整代码 <!DOCTYPE HTML> <html lang="en-US"> <h ...

  2. Pointer Lock API(2/3):属性、方法、事件

    Pointer Lock API 提供了三个属性.两个方法.两个事件 Tabel Of Content 属性 Document.pointerLockElement Document.onpointe ...

  3. 指针锁定 Pointer Lock API 用法

    指针锁定 Pointer Lock API 通过它可以访问原始的鼠标运动(基于指针的相对位移 movementX / movementY),把鼠标事件的目标锁定到一个特定的元素,同时隐藏视图中的指针光 ...

  4. [问题解决] initAndListen: 10309 Unable to create/open lock file: /data/db/mongod.lock

    错误: 在linux下开启mongoDB的 $ >bin: ./mongod 时报错:initAndListen: 10309 Unable to create/open lock file: ...

  5. E:Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)

    出现这个问题的原因可能是有另外一个程序正在运行,导致资源被锁不可用.而导致资源被锁的原因,可能是上次安装时没正常完成,而导致出现此状况. 解决方法:输入以下命令 sudo rm /var/cache/ ...

  6. Synchronized和Lock, 以及自旋锁 Spin Lock, Ticket Spin Lock, MCS Spin Lock, CLH Spin Lock

    Synchronized和Lock synchronized是一个关键字, Lock是一个接口, 对应有多种实现. 使用synchronized进行同步和使用Lock进行同步的区别 使用synchro ...

  7. 解决 E: Could not get lock /var/lib/apt/lists/lock

    参考:Unable to lock the administration directory (/var/lib/dpkg/) is another process using it? 在更换软件源时 ...

  8. Could not get lock /var/lib/apt/lists/lock

    执行: apt-get update 出现 Could not get lock /var/lib/apt/lists/lock 解决办法: 查询与apt相关的进程 ps -e | grep apt ...

  9. 解决Could not get lock /var/cache/apt/archives/lock

    在ubuntu apt-get upgrade的时候,遇到: E: Could not get lock /var/cache/ apt/archives/lock - open (11 Resour ...

随机推荐

  1. python.五角星

    import turtle turtle.pensize(4)turtle.pencolor("black") turtle.fillcolor("red")t ...

  2. Linux双网卡绑定配置

    Linux双网卡绑定配置                                       环境介绍 Linux Redhat 6.5.4张网卡 需求 4张网卡两两绑定,4张网卡分别是eth ...

  3. go中处理各种请求方式以及处理接口请求参数

    话不多说直接上代码,解读内容全部在代码中 1.处理请求方式 package main import ( "fmt" "io/ioutil" "net/ ...

  4. 4000字干货长文!从校招和社招的角度说说如何准备Java后端大厂面试?

    插个题外话,为了写好这篇文章内容,我自己前前后后花了一周的时间来总结完善,文章内容应该适用于每一个学习 Java 的朋友!我觉得这篇文章的很多东西也是我自己写给自己的,比如从大厂招聘要求中我们能看到哪 ...

  5. js 实现字符串的查找和替换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. vuex 业务使用

    1 创建变量 cityVuex.js export default { state: { cityArr: [] }, mutations: { setCityArr (state, arr) { s ...

  7. Java学习笔记(3)——有关异常

    异常处理: try { }catch(ExceptionType0 e) { }catch(ExceptionType1 e) { }.....finally { } 有四种情况不执行finally语 ...

  8. Mybatis---在控制台打印sql语句

    在mybatis主配置文件中mybatis.xml的<configuration>标签中加入 <settings> <setting name="logImpl ...

  9. Shell 截取字符串方法

    原文链接 方法1 "${varible##*string}" 从左向右截取最后一个string后的字符串 e.g. exampleString="abc//888//ab ...

  10. Systematic comparison of strategies for the enrichment of lysosomes by data independent acquisition 通过DIA技术系统比较各溶酶体富集策略 (解读人:王欣然)

    文献名:Systematic comparison of strategies for the enrichment of lysosomes by data independent acquisit ...