JS Pointer Lock

JS Pointer Lock

本文关键字：Lock Pointer JS      更新时间：2023-09-26

我在指针锁定时遇到问题。我的代码看起来像这样...

Canvas = document.createElement('canvas');
...(Parameters)...
document.body.appendChild(Canvas);
Canvas.requestPointerLock = Canvas.requestPointerLock ||
             element.mozRequestPointerLock ||
             element.webkitRequestPointerLock;
Canvas.requestPointerLock();

当我运行我的代码时，指针锁没有任何反应（其他一切都以noram方式运行）。我展示的代码正是我认为与问题相关的代码，但如果需要我的程序中的更多代码，请告诉我。

如果我们在点击事件中移动"requestPointerLock（）"，它工作正常。分享以下示例代码以供参考。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Pointer lock</title>
<style type="text/css"> 
html {font-size: 10px; font-family: sans-serif;}
canvas {display: block; margin: 0 auto; border: 1px solid black;}
</style>
</head>
<body>
      <canvas width="640" height="360">
        Your browser does not support HTML5 canvas
      </canvas>
</body>
<script type="text/javascript">
// setup of the canvas
window.addEventListener('load', eventWindowLoaded, false);
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
function eventWindowLoaded() {  
  canvasDraw();
}
var x = 50;
var y = 50;
function canvasDraw() { 
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
  ctx.fillStyle = "#f00";  
  ctx.beginPath();
  ctx.arc(x,y,20,0,degToRad(360), true);
  ctx.fill();
}
// pointer lock object forking for cross browser
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
canvas.onclick = function() {
  canvas.requestPointerLock();
}
// pointer lock event listeners
// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
function lockChangeAlert() {
  if(document.pointerLockElement === canvas ||
  document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", canvasLoop, false);
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", canvasLoop, false);
  }
}

function canvasLoop(e) {
  var movementX = e.movementX || e.mozMovementX || 0;
  var movementY = e.movementY || e.mozMovementY ||  0;
  x += movementX;
  y += movementY; 
  canvasDraw();
  console.log("X position: " + x + ', Y position: ' + y);
}
// helper function
function degToRad(degrees) {
  var result = Math.PI/180 * degrees;
  return result;
}   
</script>
</html>

根据pointerlock上的WC3文档：

requestPointerLock

如果用户已通过默认解锁用户手势退出指针锁定，或者以前未为此文档输入指针锁定，则文档必须接收由参与手势生成的事件，然后requestPointerLock才会成功。

然后，它将在下面讨论订婚手势。

订婚手势

用户代理作为旨在与页面交互的用户交互的结果生成的事件。 例如 click，但不是mousemove。订婚手势是允许显示弹出窗口的定义中包含的任何事件，并添加了keypress和keyup。

因此，为了使代码正常工作，应从参与手势（例如click事件处理程序）调用requestPointerLock。

相关文章：