如何检测鼠标何时在某个圆圈之外？

Question

当鼠标悬停在图像上时。它被这个 if 语句检测到：

if ((distance(circles[this.index].x, circles[this.index].y, mouse.x, mouse.y)) < circles[this.index].radius)

我还想检测鼠标何时位于图像之外。在之前的 if 语句之后，我不能使用 else 的原因是：

当我在屏幕上生成多个图像时以及当我的鼠标悬停在 1 个图像上时。它确实悬停该图像并且代码检测到它，但它也不会悬停所有其他图像。这就是显示4次“外圈”和1次“内圈”的原因

如日志所示：

Console.log 输出：

Mouse inside circle 
Mouse outside circle 4 
Mouse inside circle 
Mouse outside circle 4 

我正在寻找一种检测鼠标何时离开圆圈的方法。

您可以在下面找到我正在使用的代码：

PS：重要的是它检测鼠标在哪个（索引）圈中并离开。我想创建大量图片，但在下面的代码中，我使用了 5 个作为演示 purpeses。

if ((distance(circles[this.index].x, circles[this.index].y, mouse.x, mouse.y)) < circles[this.index].radius)

Mouse inside circle 
Mouse outside circle 4 
Mouse inside circle 
Mouse outside circle 4 

Answer 1

只需将另一个属性添加到圆圈中即可

  function Circle(x, y, radius, index) {
        //Give var for circle
        this.x = x;
        this.y = y;
        this.dx = 1;
        this.dy = 1;
        this.radius = radius;
        this.index = index;
        this.mouseInside = false
    }

然后更新逻辑改为这样

 if ((distance(this.x, this.y, mouse.x, mouse.y)) < circles[this.index].radius) {
            if (!this.mouseInside) {
                this.mouseInside = true
                console.log(`mouse enter circele at ${this.index}`)
            }
        }
        else if (this.mouseInside) {
            this.mouseInside = false
            console.log(`mouse leave circele at ${this.index}`)
        }

检查圆圈是否重叠，您可以决定是否要更新

  var overlapsCircles = circles.filter(circle => {
    var diffrentId = circle.index != this.index
    var overlapping =
      distance(this.x, this.y, circle.x, circle.y) < this.radius
    return diffrentId && overlapping
  })

  if (overlapsCircles.length > 0) {
    var overlapCircle = overlapsCircles.map(circle => circle.index)
    console.log('overlap circle with index ' + overlapCircle)
  }

  function Circle(x, y, radius, index) {
        //Give var for circle
        this.x = x;
        this.y = y;
        this.dx = 1;
        this.dy = 1;
        this.radius = radius;
        this.index = index;
        this.mouseInside = false
    }

 if ((distance(this.x, this.y, mouse.x, mouse.y)) < circles[this.index].radius) {
            if (!this.mouseInside) {
                this.mouseInside = true
                console.log(`mouse enter circele at ${this.index}`)
            }
        }
        else if (this.mouseInside) {
            this.mouseInside = false
            console.log(`mouse leave circele at ${this.index}`)
        }