本文教你将重复的矩形鼠标悬停检测逻辑重构为可扩展结构，通过数组+函数封装或自定义类实现任意数量矩形的独立交互，避免状态干扰，并支持动态添加与层级判断。
本文教你将重复的矩形鼠标悬停检测逻辑重构为可扩展结构，通过数组+函数封装或自定义类实现任意数量矩形的独立交互，避免状态干扰，并支持动态添加与层级判断。
在 p5.js 中处理多个重叠矩形的鼠标交互时，原始代码常因硬编码变量（如 isMouseOverRect1、rect1Width）和冗余条件判断导致难以维护，且易出现“悬停小矩形时大矩形也变色”的逻辑错误——本质是未正确建模每个矩形的独立状态与层级关系。
✅ 推荐方案一：对象数组 + 工具函数（简洁灵活）
将每个矩形抽象为对象，统一存入数组，再用 for 循环遍历处理：
let rectangles = [
{ x: 160, y: 160, w: 80, h: 80 },
{ x: 180, y: 180, w: 40, h: 40 }
];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
// 预计算所有矩形的悬停状态
let hoverStates = rectangles.map(r => isOverRectangle(mouseX, mouseY, r));
// 绘制每个矩形：仅当被悬停且无更小的上方矩形也被悬停时才变黑
for (let i = 0; i < rectangles.length; i++) {
const isHovered = hoverStates[i];
// 检查「上方」（索引更小，即视觉上更靠前/更小）是否有其他悬停矩形
const hasTopHover = hoverStates.slice(0, i).some(Boolean);
fill(isHovered && !hasTopHover ? 0 : 255);
rect(rectangles[i].x, rectangles[i].y, rectangles[i].w, rectangles[i].h);
}
}
// 通用点-矩形碰撞检测（左上角坐标系）
function isOverRectangle(mx, my, rect) {
return mx >= rect.x && mx <= rect.x + rect.w &&
my >= rect.y && my <= rect.y + rect.h;
}? 关键设计说明：
Wjs Uploading Video下载将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 使用 slice(0, i) 获取当前矩形「上方」（数组中排在其前）的所有矩形状态，确保仅最顶层悬停矩形响应；
- 所有状态计算与绘制解耦，避免 if/else 嵌套污染逻辑；
- 新增矩形只需向 rectangles 数组 push() 即可，完全无需修改主逻辑。
✅ 推荐方案二：面向对象封装（高复用性 & 可扩展）
使用 ES6 class 封装矩形行为，天然支持状态隔离与方法复用：
class InteractiveRect {
constructor(x, y, w, h, zIndex = 0) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.zIndex = zIndex; // 用于层级排序（值越大越靠前）
}
isOver(mx, my) {
return mx >= this.x && mx <= this.x + this.w &&
my >= this.y && my <= this.y + this.h;
}
draw(isHovered, otherHoveredRects = []) {
// 若自身被悬停，且无更高 zIndex 的矩形同时被悬停，则填充黑色
const topHovered = otherHoveredRects.some(r => r.zIndex > this.zIndex && r.isOver(mx, my));
fill(isHovered && !topHovered ? 0 : 255);
rect(this.x, this.y, this.w, this.h);
}
}
// 初始化矩形（zIndex 越大，视觉层级越高）
let rects = [
new InteractiveRect(160, 160, 80, 80, 1), // 大矩形，层级低
new InteractiveRect(180, 180, 40, 40, 2) // 小矩形，层级高
];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
// 先收集所有悬停状态
const hoverStates = rects.map(r => r.isOver(mouseX, mouseY));
// 按 zIndex 升序绘制（保证高 z-index 矩形后绘制，覆盖底层）
rects.sort((a, b) => a.zIndex - b.zIndex).forEach((rect, i) => {
rect.draw(hoverStates[i], rects);
});
}⚠️ 注意事项：
- 原始代码使用 rectMode(CENTER)，但上述示例默认采用 p5.js 默认的 CORNER 模式（左上角定位），若需中心对齐，请在 setup() 中调用 rectMode(CENTER)，并调整 x/y 为矩形中心坐标（如 {x:200, y:200, w:80, h:80}），此时碰撞检测需改为：
isOverRectangle(mx, my, r) { return mx >= r.x - r.w/2 && mx <= r.x + r.w/2 && my >= r.y - r.h/2 && my <= r.y + r.h/2; }- 所有方案均避免全局布尔变量，消除状态耦合；
- for 循环真正发挥作用：当矩形数量从 2 增至 20+ 时，代码长度几乎不变，而原始写法将指数级膨胀。
通过对象化或数组化重构，你不仅解决了悬停冲突问题，更获得了可无限扩展、易测试、易维护的交互系统——这才是工程化思维在创意编程中的真正落地。
