如何分步实现鼠标移出时将矩形颜色从白色改为黑色

嘿，作为编程新手能自己动手写基础代码已经超棒啦！咱们一步步来搞定这个鼠标移出矩形时从白色变黑色的需求～

核心思路拆解 #

要实现这个交互，关键是每帧判断鼠标是否在矩形范围内，然后根据判断结果切换填充色。Processing的draw()函数会持续循环执行，刚好能帮我们实现实时的颜色更新。

完整可运行代码 #

void setup () {
  size (200,200);
}

void draw () {
  background (0);
  stroke (255);
  line (100,0,100,200);
  line (0,100,200,100);
  
  noStroke ();
  
  // 1. 判断鼠标是否在左上角矩形内
  boolean isMouseInTopLeft = mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100;
  // 2. 根据位置设置填充色：在里面用白色，移出用黑色
  fill(isMouseInTopLeft ? 255 : 0);
  // 3. 绘制矩形
  rect(0, 0, 100, 100);
  
  // 给其他象限的矩形也加上同样逻辑（可选）
  // 右上角矩形
  boolean isMouseInTopRight = mouseX > 100 && mouseX < 200 && mouseY > 0 && mouseY < 100;
  fill(isMouseInTopRight ? 255 : 0);
  rect(100, 0, 100, 100);
  
  // 左下角矩形
  boolean isMouseInBottomLeft = mouseX > 0 && mouseX < 100 && mouseY > 100 && mouseY < 200;
  fill(isMouseInBottomLeft ? 255 : 0);
  rect(0, 100, 100, 100);
  
  // 右下角矩形
  boolean isMouseInBottomRight = mouseX > 100 && mouseX < 200 && mouseY > 100 && mouseY < 200;
  fill(isMouseInBottomRight ? 255 : 0);
  rect(100, 100, 100, 100);
}

分步细节解释 #

• 步骤1：判断鼠标位置
  用mouseX和mouseY获取当前鼠标坐标，结合矩形的边界（左上角(0,0)，宽高100），用逻辑与&&组合条件，确保鼠标的X、Y都落在矩形范围内，得到一个布尔值isMouseInTopLeft。
• 步骤2：切换填充色
  这里用了三元运算符condition ? value1 : value2，相当于简化的if-else：如果鼠标在矩形内，填充白色（255），否则填充黑色（0）。你也可以写成标准的if-else，效果完全一样：

  if (isMouseInTopLeft) {
    fill(255);
  } else {
    fill(0);
  }
  

• 步骤3：绘制矩形
  每次draw()循环都会重新判断鼠标位置、更新颜色、绘制矩形，所以能实时看到颜色变化。

新手小贴士 #

• 如果希望鼠标刚好碰到矩形边缘时也算“在里面”，可以把判断条件里的<改成<=，>改成>=，比如mouseX >= 0 && mouseX <= 100。
• Processing的background(0)每帧都会清空画布，这样之前的矩形会被擦掉，新的颜色矩形才能正确显示，不要漏掉这行哦～

内容的提问来源于stack exchange，提问作者Serkan K.