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 ...
随机推荐
- MySQL 【常识与进阶】
MySQL 事物 InnoDB事务原理 事务(Transaction)是数据库区别于文件系统的重要特性之一,事务会把数据库从一种一致性状态转换为另一种一致性状态. 在数据库提交时,可以确保要么所有修改 ...
- Geotools中读取shapefile路网数据,并创建DirectedGraph
记录一下如何创建DirectedGraph,便于以后查找使用 static ShapefileDataStore sds= null; static DirectedGraph graph = nul ...
- php 数据库 操作
header.php <?php error_reporting(0);//加上error_reporting(0);就不会弹出警告了 // header("Content-type: ...
- @on-row-click="$emit('on-row-click', arguments[0], arguments[1])" 行内返回事件的一种写法
@on-row-click="$emit('on-row-click', arguments[0], arguments[1])"
- 【Weiss】【第03章】练习3.11:比较单链表递归与非递归查找元素
[练习3.11] 编写查找一个单链表特定元素的程序.分别用递归和非递归实现,并比较它们的运行时间. 链表必须达到多大才能使得使用递归的程序崩溃? Answer: 实现都是比较容易的,但是实际上查找链表 ...
- 使用vue构建一个可视化大数据平台
使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示,没有设计搞的原因,只能忽略设计编写一下界面, 用户只需要登录的时候填写自己github用户名.就可以看到数据展 ...
- EOS基础全家桶(一)开篇
简介 从今天开始我会在FishoPark上与大家分享EOS的一些技术经验和基础,如果大家在看文章的过程中有任何问题,欢迎在网站下方的评论里留言,我会尽力为大家解答,如果发现我内容中所写有错,欢迎指正, ...
- 【译】HTTP/2 为更快速的网站而生
最近在做一个内部的服务对接,使用了Google的gRPC框架,gRPC是基于HTTP/2和protocol buffers实现的,所以额外去了解了一下HTTP/2,找到这这边文章.这篇文章虽然是写于2 ...
- Java8 Stream流
第三章 Stream流 <Java8 Stream编码实战>的代码全部在https://github.com/yu-linfeng/BlogRepositories/tree/master ...
- Untargeted lipidomics reveals specific lipid abnormality in nonfunctioning human pituitary adenomas 非靶向脂质组学揭示非功能人类脑垂体瘤中的特异性脂质 (解读人:胡丹丹)
文献名:Untargeted lipidomics reveals specific lipid abnormality in nonfunctioning human pituitary adeno ...