javascript - JS - 防止鼠标离开屏幕
问题描述
我需要防止光标离开窗口。我已经读过这是不可能的,但是我已经通过 Unity 项目的 WebGL 导出完成了这项工作。您首先必须单击画布,然后浏览器会向您显示一条通知,告诉您您应该按“退出”退出并返回光标。既然 Unity WebGL 画布可以做到这一点,我假设它可以在没有 Unity 的情况下完成?
解决方案
使用 HTML5 指针锁定 API
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
不是我下面的代码示例,所有信任
https://github.com/mdn/dom-examples/tree/master/pointer-lock
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Pointer lock demo</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="information">
<h1>Pointer lock demo</h1>
<p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.</p>
</div>
<canvas width="640" height="360">
Your browser does not support HTML5 canvas
</canvas>
<div id="tracker"></div>
<script src="app.js"></script>
</body>
</html>
JS
// helper function
const RADIUS = 20;
function degToRad(degrees) {
var result = Math.PI / 180 * degrees;
return result;
}
// setup of the canvas
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var x = 50;
var y = 50;
function canvasDraw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
ctx.fill();
}
canvasDraw();
// 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", updatePosition, false);
} else {
console.log('The pointer lock status is now unlocked');
document.removeEventListener("mousemove", updatePosition, false);
}
}
var tracker = document.getElementById('tracker');
var animation;
function updatePosition(e) {
x += e.movementX;
y += e.movementY;
if (x > canvas.width + RADIUS) {
x = -RADIUS;
}
if (y > canvas.height + RADIUS) {
y = -RADIUS;
}
if (x < -RADIUS) {
x = canvas.width + RADIUS;
}
if (y < -RADIUS) {
y = canvas.height + RADIUS;
}
tracker.textContent = "X position: " + x + ", Y position: " + y;
if (!animation) {
animation = requestAnimationFrame(function() {
animation = null;
canvasDraw();
});
}
}
推荐阅读
- python - 使用openCV,在Python中一次调整多个相同大小的图像
- javascript - 我收到此错误,ReactFreshWebpackPlugin 不支持 webpack 5,那么我该如何解决此问题?
- php - 在 PHP 中的 json 中的数组中推送一个值
- sql - Oracle SQL BETWEEN 不返回最后一个值
- c++ - 快速且无休止地平滑数据
- flutter - 在flutter中将内存图像(如Uint8list)保存为图像文件
- firebase - 如何从一处更新多个移动应用程序?
- javascript - 如何从具有多个兄弟姐妹的div中删除文本
- finder - 如何解决 Mac Big Sur 中的查找器问题?
- html - 我无法使用来自 Material CSS 的 HTML 插入选择