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
一样,它使用pointerlockchange
和pointerlockerror
事件异步工作
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 的总体认识的更多相关文章
- Pointer Lock API(3/3):一个Demo
简单的Demo演练 点击跳转至Code Pen以查看演示和源码 完整代码 <!DOCTYPE HTML> <html lang="en-US"> <h ...
- Pointer Lock API(2/3):属性、方法、事件
Pointer Lock API 提供了三个属性.两个方法.两个事件 Tabel Of Content 属性 Document.pointerLockElement Document.onpointe ...
- 指针锁定 Pointer Lock API 用法
指针锁定 Pointer Lock API 通过它可以访问原始的鼠标运动(基于指针的相对位移 movementX / movementY),把鼠标事件的目标锁定到一个特定的元素,同时隐藏视图中的指针光 ...
- [问题解决] initAndListen: 10309 Unable to create/open lock file: /data/db/mongod.lock
错误: 在linux下开启mongoDB的 $ >bin: ./mongod 时报错:initAndListen: 10309 Unable to create/open lock file: ...
- E:Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)
出现这个问题的原因可能是有另外一个程序正在运行,导致资源被锁不可用.而导致资源被锁的原因,可能是上次安装时没正常完成,而导致出现此状况. 解决方法:输入以下命令 sudo rm /var/cache/ ...
- Synchronized和Lock, 以及自旋锁 Spin Lock, Ticket Spin Lock, MCS Spin Lock, CLH Spin Lock
Synchronized和Lock synchronized是一个关键字, Lock是一个接口, 对应有多种实现. 使用synchronized进行同步和使用Lock进行同步的区别 使用synchro ...
- 解决 E: Could not get lock /var/lib/apt/lists/lock
参考:Unable to lock the administration directory (/var/lib/dpkg/) is another process using it? 在更换软件源时 ...
- 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 ...
- 解决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 ...
随机推荐
- python.五角星
import turtle turtle.pensize(4)turtle.pencolor("black") turtle.fillcolor("red")t ...
- Linux双网卡绑定配置
Linux双网卡绑定配置 环境介绍 Linux Redhat 6.5.4张网卡 需求 4张网卡两两绑定,4张网卡分别是eth ...
- go中处理各种请求方式以及处理接口请求参数
话不多说直接上代码,解读内容全部在代码中 1.处理请求方式 package main import ( "fmt" "io/ioutil" "net/ ...
- 4000字干货长文!从校招和社招的角度说说如何准备Java后端大厂面试?
插个题外话,为了写好这篇文章内容,我自己前前后后花了一周的时间来总结完善,文章内容应该适用于每一个学习 Java 的朋友!我觉得这篇文章的很多东西也是我自己写给自己的,比如从大厂招聘要求中我们能看到哪 ...
- js 实现字符串的查找和替换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vuex 业务使用
1 创建变量 cityVuex.js export default { state: { cityArr: [] }, mutations: { setCityArr (state, arr) { s ...
- Java学习笔记(3)——有关异常
异常处理: try { }catch(ExceptionType0 e) { }catch(ExceptionType1 e) { }.....finally { } 有四种情况不执行finally语 ...
- Mybatis---在控制台打印sql语句
在mybatis主配置文件中mybatis.xml的<configuration>标签中加入 <settings> <setting name="logImpl ...
- Shell 截取字符串方法
原文链接 方法1 "${varible##*string}" 从左向右截取最后一个string后的字符串 e.g. exampleString="abc//888//ab ...
- 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 ...