javascript - 检查鼠标是在窗口内还是在窗口外
问题描述
我已经看到这类问题已经回答了,但是每个答案都有点模糊或有一些交叉兼容性问题或超出我的理解范围。那么有没有人可以给我一个最新的,完整的,明确(显示和解释所有涉及的步骤)答案?当鼠标在窗口外时,我不想让圆圈变大。我没有使用 JQuery(在许多答案中都有特色)。我应该使用它吗?是有什么方法可以用纯 javascript 来实现吗?感谢您的帮助,如果我的代码有点多余,我们深表歉意:)
var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener("mousemove", function(event){
mouse.x = event.x;
mouse.y = event.y;
})
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
var colorArray = [
"#6CC61D",
"#E05132",
"#278E83",
"#A633D4"
]
function Circle(x,y,dx,dy,radius){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
c.fillStyle = this.color;
c.fill()
}
this.update = function(){
if (this.x + this.radius>window.innerWidth || this.x -this.radius<0){
this.dx = - this.dx;}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
this.dy = - this.dy;
}
if (mouse.x - this.x < 50 && mouse.x - this.x > - 50 && mouse.y - this.y < 50 && mouse.y - this.y > - 50 && this.radius<50 ){
this.radius += 1;
}
else if(this.radius>2){
this.radius -= 1;
}
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
var circleArray = [];
for (var i = 0; i < 600; i++) {
var x = Math.random() * (window.innerWidth - radius * 2) + radius;
var y = Math.random() * (window.innerHeight - radius * 2) + radius;
var dy = (Math.random() - 0.5) * 8;
var dx = (Math.random() - 0.5) * 8;
var radius = 30;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
function animate(){
requestAnimationFrame(animate);
c.clearRect(0,0,window.innerWidth,window.innerHeight);
for (var i = 0;i < circleArray.length;i++){
circleArray[i].update()
}
circle.update();
}
animate();
解决方案
我没有使用 JQuery(在许多答案中都有介绍)。我应该使用它吗?
有没有办法用纯javascript实现这个?
这是根据你的喜好。由于 JQuery 是 javascript,如果你可以用 JQuery 来做,你可以只用 JS 来做。对于“它可以实施吗?”,很可能是什么。我将开始对您的代码进行一些格式化,以将逻辑(计算/更新位置、速度和半径)与渲染(绘图)分离,这样操作起来会更容易。
检查鼠标是否超出窗口:
您可以使用mouseout事件来检测鼠标何时离开窗口
window.addEventListener('mouseout', action);
当鼠标在窗口外时,避免圆圈变大:
对于动作,将mouse.x
&设置mouse.y
回undefined
window.addEventListener('mouseout', function(){
mouse.x = undefined;
mouse.y = undefined;
})
然后在您的 Circle 更新方法中添加另外 2 个条件,以仅在除其他条件之外定义mouse.x
&时增加半径mouse.y
(因此,如果鼠标在窗口中)。
if (mouse.x &&
mouse.y &&
Math.abs(mouse.x - this.x) < 50 &&
Math.abs(mouse.y - this.y) < 50 &&
this.radius < 50 ) {
this.radius += 1;
}
结果 :
const canvas = document.querySelector("canvas");
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const mouse = {
x: undefined,
y: undefined
}
window.addEventListener("mousemove", function(event){
mouse.x = event.x;
mouse.y = event.y;
})
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
window.addEventListener('mouseout', function(){
mouse.x = undefined;
mouse.y = undefined;
})
const colorArray = [
"#6CC61D",
"#E05132",
"#278E83",
"#A633D4"
]
function Circle(x, y, dx, dy, radius){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function(){
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
c.fillStyle = this.color;
c.fill()
}
this.update = function(){
if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0) {
this.dx = - this.dx;
}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
this.dy = - this.dy;
}
if ( mouse.x &&
mouse.y &&
Math.abs(mouse.x - this.x) < 50 &&
Math.abs(mouse.y - this.y) < 50 &&
this.radius < 50 ) {
this.radius += 1;
} else if(this.radius > 2) {
this.radius -= 1;
}
this.x += this.dx;
this.y += this.dy;
}
}
const circleArray = [];
for (let i = 0; i < 600; i++) {
const radius = 30;
const x = Math.random() * (window.innerWidth - radius * 2) + radius;
const y = Math.random() * (window.innerHeight - radius * 2) + radius;
const dy = (Math.random() - 0.5) * 8;
const dx = (Math.random() - 0.5) * 8;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
function clearCanvas(){
c.clearRect(0,0,window.innerWidth,window.innerHeight);
}
function update(){
for (let i = 0; i < circleArray.length; i++){
circleArray[i].update()
}
}
function draw(){
for (let i = 0; i < circleArray.length; i++){
circleArray[i].draw()
}
}
function animate(){
requestAnimationFrame(animate);
clearCanvas();
update();
draw();
}
requestAnimationFrame(animate);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</body>
</html>
推荐阅读
- laravel - 如何在 Laravel 中选择具有关系的自定义属性字段?
- java - 如何使spring boot在多对多关系中创建的id成为主键
- python - 与斜杠匹配的 Django URL
- flutter - 使用 WebRTC 进行 Flutter 直播
- mysql - 如何最好地使用 sql 查询中的代码列表作为另一个查询的输入
- tensorflow - Tensorflow 教程错误(InvalidArgumentError:断言失败:[无法将字节解码为 JPEG、PNG、GIF 或 BMP])
- azure-storage - 如何使用 Python SDK 将大文件 (~100mb) 上传到 Azure blob 存储?
- java - 无法在 spring-cloud-stream-binder-kafka-streams:3.1.1 中设置 GroupId
- php - 在表单提交上调用 php 函数
- python - 如何使用 Python 使用代理 IP 连接到 Cosmos DB