本文讲解如何将硬编码的多个矩形交互逻辑重构为可扩展、易维护的结构，通过封装矩形类和统一检测逻辑，解决鼠标悬停时层级干扰问题，并支持任意数量矩形的独立响应。
本文讲解如何将硬编码的多个矩形交互逻辑重构为可扩展、易维护的结构，通过封装矩形类和统一检测逻辑，解决鼠标悬停时层级干扰问题，并支持任意数量矩形的独立响应。
在 p5.js 开发中，当需要绘制多个具有独立交互行为（如悬停变色）的矩形时，若沿用原始写法——为每个矩形单独声明变量、重复编写边界检测与填充逻辑——不仅代码冗余，更易引发逻辑耦合问题：例如本例中，小矩形悬停时大矩形也意外变色，根源在于 rect1 和 rect2 的状态判断未解耦，且坐标计算未考虑实际绘制位置差异。
✅ 核心改进思路
- 封装状态与行为：将每个矩形的坐标、尺寸及交互逻辑封装为独立实体（推荐使用 ES6 class）；
- 解耦检测与渲染：每个矩形自主判断是否被鼠标覆盖，避免全局布尔变量交叉影响；
- 支持层级优先级：通过数组顺序隐式定义绘制与交互优先级（后绘制者位于上层，悬停时应优先响应）；
- 自然适配循环：所有矩形存入数组后，for 循环可统一处理检测、绘制与状态更新。
? 推荐实现：基于类的矩形管理
class InteractiveRect {
constructor(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.isHovered = false;
}
// 判断鼠标是否在当前矩形内（含边界）
contains(mx, my) {
return mx >= this.x && mx <= this.x + this.w &&
my >= this.y && my <= this.y + this.h;
}
// 更新悬停状态（接收全局鼠标坐标）
updateHover(mx, my, otherRects = []) {
this.isHovered = this.contains(mx, my);
// 若有其他矩形在上方（索引更大），且其已被悬停，则当前矩形不激活
// （实现“仅最上层响应”的视觉逻辑）
const higherRects = otherRects.filter(r => r !== this);
if (higherRects.some(r => r.isHovered && r.contains(mx, my))) {
this.isHovered = false;
}
}
// 绘制矩形，根据悬停状态设置填充色
draw() {
fill(this.isHovered ? 0 : 255);
rect(this.x, this.y, this.w, this.h);
}
}
// 定义矩形列表（按绘制顺序：先绘底层，后绘上层）
let rectangles = [
new InteractiveRect(160, 160, 80, 80), // 底层大矩形
new InteractiveRect(180, 180, 40, 40) // 上层小矩形
];
function setup() {
createCanvas(400, 400);
rectMode(CORNER); // 使用 CORNER 模式更符合常规坐标理解（x,y 为左上角）
}
function draw() {
background(200);
// 1. 先批量更新所有矩形的悬停状态（传入其他矩形用于层级判定）
for (let i = 0; i < rectangles.length; i++) {
rectangles[i].updateHover(mouseX, mouseY, rectangles);
}
// 2. 再依次绘制（保证层级正确）
for (let rect of rectangles) {
rect.draw();
}
}⚠️ 关键注意事项
-
坐标模式一致性：原始代码使用 rectMode(CENTER)，但示例中改用 CORNER（默认）以简化边界计算。若坚持中心模式，需在 contains() 中调整为：
contains(mx, my) { const halfW = this.w / 2; const halfH = this.h / 2; return mx >= this.x - halfW && mx <= this.x + halfW && my >= this.y - halfH && my <= this.y + halfH; } - 层级逻辑可定制：当前 updateHover 实现“仅最上层响应”，若需“所有被覆盖矩形同时响应”，可直接移除 higherRects 判断逻辑。
- 性能友好：即使矩形数量增至 100+，O(n²) 的层级检查在 p5.js 帧率下仍足够流畅；如需极致优化，可结合空间划分（如四叉树），但对常规 UI 场景非必需。
✅ 扩展性验证
只需向 rectangles 数组追加新实例，即可无缝支持更多矩形：
rectangles.push(new InteractiveRect(220, 100, 60, 30)); rectangles.push(new InteractiveRect(80, 250, 50, 50));
无需修改 setup() 或 draw() 主逻辑——这正是面向对象与循环驱动设计的核心价值：一次抽象，无限复用。
