p5.js自定义ImageButton类鼠标悬停仅首个实例生效问题排查

我来帮你分析下这个问题——你遇到的情况其实是多个ImageButton实例的cursor设置互相覆盖导致的，咱们一步步拆解原因和解决方案：

问题根源 #

当你在每个按钮的display()方法里直接设置this.p5.cursor()时，会出现执行顺序的冲突：
假设页面上有两个按钮A（第一个）和B（第二个）：

1. 当鼠标悬停在B上时，B的over()返回true，设置cursor为pointer
2. 紧接着执行A的display()方法，此时A的over()返回false，又把cursor设回了default
3. 最终你看到的就是默认指针，只有当鼠标悬停在第一个按钮时，它的display()最后执行，才能保留pointer状态

而图片切换正常是因为每个按钮的图片绘制是独立的，不会互相覆盖，只是cursor是全局的p5设置，会被后续的操作覆盖。

解决方案：统一管理cursor状态 #

我们需要把cursor的设置从单个按钮的逻辑中抽离出来，先检查所有按钮的hover状态，再统一设置cursor，避免互相覆盖。

步骤1：修改ImageButton类，移除cursor设置 #

首先把按钮类里的cursor操作去掉，只保留图片切换的逻辑：

export default class ImageButton {
 constructor(p5, x, y, img, hoverImg) {
  this.p5 = p5;
  this.x = x;
  this.y = y;
  this.img = img;
  this.hoverImg = hoverImg;
  this.rad = 16;
 }
 display() {
  // 只负责绘制对应状态的图片，不再处理cursor
  const currentImg = this.over() ? this.hoverImg : this.img;
  this.p5.image(currentImg, this.x, this.y, this.rad, this.rad);
 }
 over() {
  return (
   this.p5.mouseX > this.x && this.p5.mouseX < this.x + this.rad &&
   this.p5.mouseY > this.y && this.p5.mouseY < this.y + this.rad
  );
 }
}

步骤2：在p5 Sketch中统一处理cursor #

在你的sketch函数里，先遍历所有按钮检查是否有被hover的，再统一设置cursor：

function sketch(p5) {
  let buttons = [];
  let defaultImg, hoverImg;

  p5.preload = () => {
    // 加载你的按钮图片资源
    defaultImg = p5.loadImage('path/to/default.png');
    hoverImg = p5.loadImage('path/to/hover.png');
  };

  p5.setup = () => {
    p5.createCanvas(400, 400);
    // 创建多个按钮实例
    buttons.push(new ImageButton(p5, 50, 50, defaultImg, hoverImg));
    buttons.push(new ImageButton(p5, 100, 50, defaultImg, hoverImg));
    buttons.push(new ImageButton(p5, 150, 50, defaultImg, hoverImg));
  };

  p5.draw = () => {
    p5.background(220);

    // 先检查是否有任何一个按钮被hover
    const isAnyButtonHovered = buttons.some(button => button.over());
    // 统一设置全局cursor
    p5.cursor(isAnyButtonHovered ? 'pointer' : 'default');

    // 再绘制所有按钮
    buttons.forEach(button => button.display());
  };
}

为什么这样有效？ #

通过buttons.some()我们可以快速判断是否有任意一个按钮处于hover状态，然后只设置一次cursor，避免了多个实例互相覆盖cursor设置的问题。同时每个按钮的图片绘制逻辑保持独立，不会影响原有的hover切换效果。

内容的提问来源于stack exchange，提问作者rogerio-romao