本文教你将重复的矩形鼠标悬停检测逻辑重构为可扩展结构，通过数组+函数封装或自定义类实现任意数量矩形的独立交互，避免状态干扰，并支持动态添加与层级判断。
本文教你将重复的矩形鼠标悬停检测逻辑重构为可扩展结构，通过数组+函数封装或自定义类实现任意数量矩形的独立交互，避免状态干扰，并支持动态添加与层级判断。
在 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 = rect.x && mx = rect.y && my <blockquote>
<p>? <strong>关键设计说明</strong>： </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8078" title="Wjs Uploading Video"><img
src="https://img.php.cn/upload/skill/000/000/081/179185692016044.jpg" alt="Wjs Uploading Video" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8078" title="Wjs Uploading Video" class="overflowclass">Wjs Uploading Video</a>
<p class="overflowclass">将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8078" title="Wjs Uploading Video" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>使用 slice(0, i) 获取当前矩形「上方」（数组中排在其前）的所有矩形状态，确保仅最顶层悬停矩形响应； </li>
<li>所有状态计算与绘制解耦，避免 if/else 嵌套污染逻辑； </li>
<li>新增矩形只需向 rectangles 数组 push() 即可，完全无需修改主逻辑。</li>
</ul>
</blockquote><h3>✅ 推荐方案二：面向对象封装（高复用性 & 可扩展）</h3><p>使用 ES6 class 封装矩形行为，天然支持状态隔离与方法复用：</p><pre class="brush:php;toolbar:false;">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.y && my 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.y - r.h/2 && my- 所有方案均避免全局布尔变量，消除状态耦合；
- for 循环真正发挥作用：当矩形数量从 2 增至 20+ 时，代码长度几乎不变，而原始写法将指数级膨胀。
通过对象化或数组化重构，你不仅解决了悬停冲突问题，更获得了可无限扩展、易测试、易维护的交互系统——这才是工程化思维在创意编程中的真正落地。
