P5.js修改数组内对象实例描边时错误触发其他实例问题排查

你的核心错误是Ball类的show()方法里绘图状态设置的顺序错了：你先绘制了圆形，再修改stroke属性，导致当前球的选中描边设置，实际会作用到下一个被渲染的球上，所以才会出现选中偏移的现象。你排查到布尔值设置正确是符合实际情况的，问题仅出在绘图状态的生效时机。

调整show()方法的代码顺序，先设置填充、描边等所有绘图属性，再绘制圆形即可：

class Ball {
  constructor(x, y, r, color){
    this.pos = new p5.Vector();
    this.pos.x = x;
    this.pos.y = y;
    this.r = r;
    this.isSelected = false; 
    this.ballFill = color;
  }
  
  show() {
    fill(this.ballFill);
    // 描边设置放在绘制圆形之前
    if (this.isSelected){
      stroke(255, 255, 0);
      strokeWeight(4);
    } else {
      noStroke();
    }
    ellipse(this.pos.x, this.pos.y, this.r * 2);
  }
  
  clicked() {  
    let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
    if (d <= this.r) {
      this.isSelected = true;
    } else {
      this.isSelected = false;
    }
  }
}

• 若你需要支持单选逻辑，当前clicked()方法存在问题：遍历所有球时，会把除了被点击球之外的所有球选中状态都设为false，虽然刚好符合单选需求，但逻辑不够直观。可以先遍历找到被点击的球，再统一修改所有球的选中状态，避免逐次覆盖的问题。
• 若需要支持多选，clicked()方法需要去掉else分支的取消选中逻辑，改为点击切换选中状态即可。

内容的提问来源于stack exchange，提问作者Luca_Vincenti