我目前正在尝试在Jupyter 笔记本中使用Pointer Lock API 。基本上我想在不受屏幕尺寸限制的情况下记录一堆触控板移动，然后将其传递给 Python 对其进行一些计算。在接下来的内容中，我将只讨论获取指针锁。
<div>这是我的方法：我在当前笔记本上创建一个新的，这样我就可以用它来锁定指针，让我们调用它canvas，然后调用canvas.requestPointerLock();. 很简单的东西。
我担心的是，相同的代码（如下）在Javascript 测试器中可以正常工作，但在 Jupyter 单元格%%javascript模式下不能正常工作。
var canvas = document.getElementById('canvasPA');
if (canvas !== null && typeof(canvas) != 'undefined') {
canvas.parentNode.removeChild(canvas);
}
/*
* Checking whether the web page can accommodate pointerLock
*/
var havePointerLock = 'pointerLockElement' in document
|| 'mozPointerLockElement' in document
|| 'webkitPointerLockElement' in document;
if (havePointerLock) {
console.log("Document has pointer lock capabilities."); // >> True
}
/*
* Defining the canvasPA div
*/
if (canvas === null || typeof(canvas) == 'undefined') {
console.log("New canvas.");
canvas = document.createElement('div');
canvas.id = 'canvasPA';
canvas.style = 'position: absolute; top: 250px; left: 550px; '
+ 'width: 1000px; height: 400px; '
+ 'background-color: #00BB5511; z-index: 1000;';
document.getElementsByTagName('body')[0].appendChild(canvas);
}
/*
* Defining the changePointerLock behavior.
* When the lock is released, all listeners are removed, then canvasPA is
* removed from the webpage.
*/
function changeCallback() {
var pointerLockElement = document.pointerLockElement
|| document.mozPointerLockElement
|| document.webkitPointerLockElement;
console.log( "pointerLockElement: " + pointerLockElement );
if(pointerLockElement === canvas) {
console.log('The pointer lock status is now locked onto canvas');
} else {
console.log('The pointer lock status is now unlocked');
// Removing all pointerLock-related listeners
document.removeEventListener('pointerlockchange', changeCallback, false);
document.removeEventListener('mozpointerlockchange', changeCallback, false);
document.removeEventListener('webkitpointerlockchange', changeCallback, false);
document.removeEventListener('pointerlockerror', errorCallback, false);
document.removeEventListener('mozpointerlockerror', errorCallback, false);
document.removeEventListener('webkitpointerlockerror', errorCallback, false);
// Remove canvas from the notebook
canvas = document.getElementById("canvasPA");
if (canvas !== null
&& typeof(canvas) != 'undefined'
&& canvas.parentNode !== null) {
canvas.parentNode.removeChild(canvas);
}
}
}
function errorCallback() {
console.log("Error when attempting to lock cursor...");
}
document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
document.addEventListener('pointerlockerror', errorCallback, false);
document.addEventListener('mozpointerlockerror', errorCallback, false);
document.addEventListener('webkitpointerlockerror', errorCallback, false);
// Ask the browser to lock the pointer.
canvas.requestPointerLock = canvas.requestPointerLock
|| canvas.mozRequestPointerLock
|| canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
使用 Javascript 测试器，我的控制台打印：
Document has pointer lock capabilities.
New canvas.
pointerLockElement: [object HTMLDivElement]
The pointer lock status is now locked onto canvas
然后光标被锁定并消失。然后我按 Escape，控制台记录：
pointerLockElement: undefined
The pointer lock status is now unlocked
但是，当我在 Jupyter 单元中尝试完全相同的代码时，我得到：
Document has pointer lock capabilities.
New canvas.
Error when attempting to lock cursor...
并且光标永远不会被锁定。
似乎 Jupyter 笔记本中的某些东西阻止了我获得锁，但我无法确定，因为pointerlockerror没有任何解释。有什么想法吗？
我正在使用 Chrome (64.0.3282.140)、Mac OS X 10.11.6。
非常感谢！
- 马蒂耶夫