夜间模式CodeSnippetStyle:
日间模式CodeSnippetStyle:

0%


Pointer Lock API(1/3):Pointer Lock 的总体认识

前言

指针锁定(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"); 
}
posted @ 2019-12-17 20:29  暮冬有八  阅读(686)  评论(0编辑  收藏  举报
BACK TO TOP

😀迷海无灯听船行。Github WeChat