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 ...
随机推荐
- 看完这篇 HTTPS,和面试官扯皮就没问题了
下面我们来一起学习一下 HTTPS ,首先问你一个问题,为什么有了 HTTP 之后,还需要有 HTTPS ?我突然有个想法,为什么我们面试的时候需要回答标准答案呢?为什么我们不说出我们自己的想法和见解 ...
- Python学习笔记.基础一
Python 语言:解释型.交互式.面向对象. Python源代码遵循GPL协议 Python标识符 在python里,标识符有字母.数字.下划线组成. 在python中,所有标识符可以包括英 ...
- 02-influxdb执行命令方式
influxdb执行命令方式 1. 三种操作方法 InfluxDB提供三种操作方式: 1)客户端命令行方式 2)HTTP API接口 3)各语言API库 2. 客户端命令行方式 查看influxdb占 ...
- JVM笔记-Java技术体系与JVM概述
1. 简述 Java 不仅仅是一门编程语言,还是一个由一系列计算机软件和规范组成的技术体系. Java 的广告词为 "一次编写,到处运行",之所以能够做到"跨平台&quo ...
- js获得用户网络状况API
js获得用户网络状况API 这是一个实验中的功能,目前还有许多浏览器不兼容此功能某些浏览器尚在开发中 1. 网络类型 effectiveType: 可以得到2g,3g,4g connectionInf ...
- Asp.Net Core 中IdentityServer4 授权原理及刷新Token的应用
一.前言 上面分享了IdentityServer4 两篇系列文章,核心主题主要是密码授权模式及自定义授权模式,但是仅仅是分享了这两种模式的使用,这篇文章进一步来分享IdentityServer4的授权 ...
- vscode 自动修复 setting.json 修改完,得重启浏览器 # 新版(>1.41.0)配置 vscode #解决了
vscode 自动修复 setting.json 修改完,得重启浏览器,不用 npm run dev 就能看到效果 "editor.codeActionsOnSave": { &q ...
- Flask 之分析线程和协程
目录 flask之分析线程和协程 01 思考:每个请求之间的关系 02 threading.local 03 通过字典自定义threading.local 04 通过setattr和getattr实现 ...
- Spring Boot入门系列(八)整合定时任务Task,一秒搞定定时任务
前面介绍了Spring Boot 中的整合Redis缓存已经如何实现数据缓存功能.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/categ ...
- .Net微服务实战之技术选型篇
王者荣耀 去年我有幸被老领导邀请以系统架构师的岗位带技术团队,并对公司项目以微服务进行了实施.无论是技术团队还是技术架构都是由我亲自的从0到1的选型与招聘成型的,此过程让我受益良多,因此也希望在接下来 ...