本文介绍如何将硬编码的多个矩形交互逻辑重构为可扩展的面向对象设计，并通过数组与循环统一处理鼠标悬停检测与绘制，解决嵌套矩形间颜色干扰问题。
本文介绍如何将硬编码的多个矩形交互逻辑重构为可扩展的面向对象设计，并通过数组与循环统一处理鼠标悬停检测与绘制，解决嵌套矩形间颜色干扰问题。
在 p5.js 中管理多个重叠矩形时，若沿用重复的条件判断和独立变量（如 isMouseOverRect1、rect1Width 等），不仅代码冗余，更易引发逻辑错误——正如原问题所述：当鼠标悬停小矩形时，大矩形也意外变色。根本原因在于原始逻辑未明确「层级优先级」与「状态隔离」，且缺乏数据抽象。
✅ 正确解法的核心是：封装状态 + 抽象行为 + 显式层级判定。我们推荐使用 class 封装矩形，再以数组统一管理，最后用 for 循环驱动交互逻辑。这样既提升可读性，又天然支持任意数量矩形的动态扩展。
1. 定义 Rectangle 类，封装属性与行为
class Rectangle {
constructor(x, y, w, h, id = '') {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.id = id; // 可选标识，便于调试
}
// 判断鼠标是否在当前矩形内（左上角模式，适配 rect() 默认模式）
isMouseOver(mx, my) {
return mx >= this.x && mx <= this.x + this.w &&
my >= this.y && my <= this.y + this.h;
}
// 绘制自身（支持 fill 颜色由外部控制）
draw() {
rect(this.x, this.y, this.w, this.h);
}
}⚠️ 注意：原代码使用 rectMode(CENTER)，但示例中坐标按左上角基准（p5.js 默认）编写。若坚持中心模式，请在 setup() 中调用 rectMode(CENTER)，并相应调整 isMouseOver 的判断逻辑（见文末提示）。
2. 创建矩形数组，按绘制顺序排列（从底层到顶层）
let rectangles = [];
function setup() {
createCanvas(400, 400);
// 按 z-index 顺序添加：先画大的（底层），后画小的（顶层）
rectangles.push(new Rectangle(160, 160, 80, 80, 'big'));
rectangles.push(new Rectangle(180, 180, 40, 40, 'small'));
}3. 使用 for 循环统一处理交互与绘制
关键在于：每个矩形的颜色需基于“它自身是否被悬停”及“其上方是否有更高优先级的悬停矩形”共同决定。我们采用逆序遍历（从顶层到底层），实时累积「已被覆盖」状态：
function draw() {
background(200);
// 存储每层的悬停状态
const isOver = rectangles.map(r => r.isMouseOver(mouseX, mouseY));
// 从顶层向下扫描：若某矩形被悬停，且其上方无其他悬停矩形，则激活它
let topmostHoveredIndex = -1;
for (let i = rectangles.length - 1; i >= 0; i--) {
if (isOver[i]) {
topmostHoveredIndex = i;
break;
}
}
// 逐个绘制，按顺序应用颜色逻辑
for (let i = 0; i < rectangles.length; i++) {
// 仅当该矩形是最高层悬停目标时才填充黑色，否则白色
fill(i === topmostHoveredIndex ? 0 : 255);
rectangles[i].draw();
}
}✅ 此逻辑确保：
- 小矩形在上层，悬停时自动遮蔽大矩形；
- topmostHoveredIndex 精确锁定唯一响应目标；
- 新增矩形只需追加到 rectangles 数组，无需修改 draw() 主逻辑。
✅ 最终完整可运行代码（含 center 模式适配版）
class Rectangle {
constructor(x, y, w, h, mode = 'corner') {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.mode = mode; // 'corner' or 'center'
}
isMouseOver(mx, my) {
if (this.mode === 'center') {
return mx >= this.x - this.w/2 && mx <= this.x + this.w/2 &&
my >= this.y - this.h/2 && my <= this.y + this.h/2;
} else {
return mx >= this.x && mx <= this.x + this.w &&
my >= this.y && my <= this.y + this.h;
}
}
draw() {
rect(this.x, this.y, this.w, this.h);
}
}
let rectangles = [];
function setup() {
createCanvas(400, 400);
rectMode(CENTER); // 启用中心模式
// 坐标按中心点提供（与原题一致）
rectangles.push(new Rectangle(200, 200, 80, 80, 'center'));
rectangles.push(new Rectangle(200, 200, 40, 40, 'center'));
}
function draw() {
background(200);
const isOver = rectangles.map(r => r.isMouseOver(mouseX, mouseY));
let topmostHoveredIndex = -1;
for (let i = rectangles.length - 1; i >= 0; i--) {
if (isOver[i]) {
topmostHoveredIndex = i;
break;
}
}
for (let i = 0; i < rectangles.length; i++) {
fill(i === topmostHoveredIndex ? 0 : 255);
rectangles[i].draw();
}
}? 总结与建议：
- 避免全局布尔变量堆砌，用类封装状态；
- 用数组替代独立变量，为 for 循环提供数据基础；
- 悬停逻辑必须考虑 z-order 与互斥性，而非简单 && !other；
- 扩展性验证：新增一行 rectangles.push(new Rectangle(...)) 即可添加新矩形，零侵入修改。
现在，你的交互系统已具备工业级可维护性——无论 2 个还是 20 个嵌套矩形，逻辑清晰、行为精准、易于迭代。
