Processing中如何实现鼠标悬停时多个矩形变色的效果

核心思路 #

你原来的单矩形代码只存储了一组矩形属性，要实现多矩形独立变色，只需要把每个矩形的属性和逻辑封装复用即可，具体步骤如下：

• 自定义矩形类，把单个矩形的位置、尺寸、颜色、悬停判断、绘制逻辑全部打包封装
• 用数组存储多个矩形实例，初始化时给每个矩形分配不同的位置和颜色
• 渲染时遍历所有矩形，逐个判断悬停状态后独立绘制

完整可运行代码 #

// 自定义矩形类，封装单个矩形的所有属性和判断逻辑
class HoverRect {
  float x, y, size;
  color baseColor, hoverColor;
  boolean isOver;

  // 构造函数，初始化矩形属性
  HoverRect(float x, float y, float size, color base, color hover) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.baseColor = base;
    this.hoverColor = hover;
    this.isOver = false;
  }

  // 判断鼠标是否悬停在当前矩形上
  boolean checkOver() {
    return mouseX >= x - size/2 && mouseX <= x + size/2 &&
           mouseY >= y - size/2 && mouseY <= y + size/2;
  }

  // 更新状态并绘制矩形
  void display() {
    isOver = checkOver();
    stroke(255);
    fill(isOver ? hoverColor : baseColor);
    rect(x, y, size, size);
  }
}

// 存储所有矩形的数组，可随意修改数量
HoverRect[] rects = new HoverRect[4];
int rectSize = 90;

void setup() {
  size(640, 360);
  rectMode(CENTER);
  // 初始化4个矩形，2行2列排布，每个矩形悬停颜色不同
  rects[0] = new HoverRect(width/2 - 100, height/2 - 60, rectSize, color(0), color(255, 0, 0));
  rects[1] = new HoverRect(width/2 + 100, height/2 - 60, rectSize, color(0), color(0, 255, 0));
  rects[2] = new HoverRect(width/2 - 100, height/2 + 60, rectSize, color(0), color(0, 0, 255));
  rects[3] = new HoverRect(width/2 + 100, height/2 + 60, rectSize, color(0), color(255, 255, 0));
}

void draw() {
  background(102);
  // 遍历所有矩形完成更新和绘制
  for (HoverRect r : rects) {
    r.display();
  }
}

优化建议 #

• 需要新增矩形只需要修改数组长度，在setup中添加对应实例即可，无需重复编写悬停判断逻辑
• 可以给不同矩形自定义尺寸、基础色、悬停色，实现更丰富的视觉效果
• 后续需要添加点击、拖拽等交互时，直接把对应逻辑加在HoverRect类中即可，维护成本极低

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