如何用面向对象与循环结构优化多矩形交互逻辑-js教程-PHP中文网

如何用面向对象与循环结构优化多矩形交互逻辑

本文介绍如何将硬编码的多个矩形交互逻辑重构为可扩展的面向对象设计，并通过数组与循环统一处理鼠标悬停检测与绘制，解决嵌套矩形间颜色干扰问题。

本文介绍如何将硬编码的多个矩形交互逻辑重构为可扩展的面向对象设计，并通过数组与循环统一处理鼠标悬停检测与绘制，解决嵌套矩形间颜色干扰问题。

在 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.y && my <blockquote><p>⚠️ 注意：原代码使用 rectMode(CENTER)，但示例中坐标按左上角基准（p5.js 默认）编写。若坚持中心模式，请在 setup() 中调用 rectMode(CENTER)，并相应调整 isMouseOver 的判断逻辑（见文末提示）。</p></blockquote><h3>2. 创建矩形数组，按绘制顺序排列（从底层到顶层）</h3><pre class="brush:php;toolbar:false;">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 循环统一处理交互与绘制

关键在于：每个矩形的颜色需基于“它自身是否被悬停”及“其上方是否有更高优先级的悬停矩形”共同决定。我们采用逆序遍历（从顶层到底层），实时累积「已被覆盖」状态：

全屏的闪电暴雨动画场景特效

p5.js基于canvas绘制闪电交加暴雨,闪电下雨背景动画特效。

下载

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 <p>✅ 此逻辑确保：</p>

小矩形在上层，悬停时自动遮蔽大矩形；
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.y - this.h/2 && my = this.x && mx = this.y && my  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 <p>? <strong>总结与建议</strong>：  </p>