在p5.js中实现鼠标悬停数据点显示信息的问题排查

你的鼠标悬停数据点无响应问题，核心原因和对应修复方法如下：

1. 绘制循环被禁用，无法实时检测鼠标状态 #

你在setup()里调用了noLoop()，导致draw()只执行一次。鼠标移动时不会重新触发hover检测和界面刷新，自然看不到悬停效果。

修复：

• 直接删掉setup()里的noLoop()，让draw()持续运行；
• 要是想保留noLoop()节省性能，就加个mouseMoved()函数触发重绘：

function mouseMoved() {
  redraw();
}

2. Movie实例的坐标没正确赋值 #

getHoveredMovie()靠movie.x和movie.y判断鼠标位置，但你的代码里没看到Genre.display()方法给每个Movie实例设置这两个属性的逻辑——没有坐标，hover检测根本找不到目标。

修复：
在Genre.display()方法里，绘制每个Movie数据点时，把当前点的坐标存到movie.x和movie.y里，示例如下（根据你的实际布局调整计算逻辑）：

class Genre {
  constructor(name) {
    this.name = name;
    this.movies = [];
  }

  addMovie(movie) {
    this.movies.push(movie);
  }

  display(x, y) {
    // 这里可以加绘制分类标题的逻辑
    this.movies.forEach(movie => {
      // 示例：给每个电影点计算偏移后的坐标
      let movieX = x + random(-100, 100);
      let movieY = y + random(-80, 80);
      // 关键：把坐标存到movie实例里
      movie.x = movieX;
      movie.y = movieY;
      // 绘制数据点
      let pointSize = movie.getStarSize();
      ellipse(movieX, movieY, pointSize);
    });
  }
}

3. 超大画布导致坐标不匹配 #

你创建了windowWidth * 2.5和windowHeight * 2.5的画布，大概率超出了浏览器视口，导致鼠标的实际位置和canvas内部的mouseX/mouseY对应不上（比如画布被滚动条截断，鼠标点不到正确的canvas坐标）。

修复：

• 先改成createCanvas(windowWidth, windowHeight)测试，确认功能正常后再调整尺寸；
• 要是必须用大尺寸，给canvas加CSS让它能滚动，或者用scale()缩放画布而不是直接放大尺寸。

4. 验证碰撞检测的尺寸逻辑 #

检查Movie.getStarSize()是否返回了合理的数值。如果返回0或者太小，hover检测的判定范围几乎不存在，自然触发不了。可以在getHoveredMovie()里加日志验证：

function getHoveredMovie() {
    let genreList = Object.keys(genres);
    for (let i = 0; i < genreList.length; i++) {
        let genre = genres[genreList[i]];
        for (let movie of genre.movies) {
            let x = movie.x;
            let y = movie.y;
            let size = movie.getStarSize();
            // 打印参数验证
            console.log(`电影：${movie.title}，坐标：(${x}, ${y})，点大小：${size}`);
            if (dist(mouseX, mouseY, x, y) < size / 2) {
                return movie;
            }
        }
    }
    return null;
}

内容的提问来源于stack exchange，提问作者theamoghmerudi