P5.js改变存储在数组中的对象实例的笔画影响错误的实例

Question

如果我点击第一个球，第二个球显示为选中的。如果我点击第二个，第三个就会被选中，以此类推。

但是布尔值设置正确。

我在代码中找不到问题，应该是一些逻辑错误。

我很感激你的帮助，谢谢。

尽情享受这个悖论吧;)

我sketch.js

let balls = [];
let ballAmount = 3;

function setup() {

let red = color(255, 0, 0);
let green = color(0,255,0);
let blue = color(0,0,255);
let colors = [red, green, blue];


createCanvas(innerWidth, innerHeight);
noStroke();

for (let i = 0; i < ballAmount; i++) {
let tempX = 200 + (100 * i);
balls.push(new Ball(tempX, 200, 20, colors[i])); 
}
}
function draw() {
background(0);

balls.forEach((ball) => {
ball.show();
});
}
function mousePressed() {

print(balls);
balls.forEach((ball) => {
ball.clicked();
});
}

my ball.js (class)

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);
ellipse(this.pos.x, this.pos.y, this.r * 2);

if (this.isSelected){
stroke(255, 255, 0);
strokeWeight(4);
} else {
noStroke();
}
}

clicked() {  
let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
if (d <= this.r) {
this.isSelected = true;
} else {
this.isSelected = false;
}
}
}

Answer 1

三个音符…

1. 请详细说明你的问题。幸运的是，你的代码是不言自明的，否则我就不知道你到底在问什么了。你的帖子描述是"合理的"，但标题有点令人讨厌。

2. 你画椭圆的时候似乎认为r是半径的一半，所以你把r乘以2。你应该用ellipseMode(RADIUS)来代替，这样更清楚，这就是你想要的行为。这样你就可以输入半径为圆宽度的一半，就像你在用r一样。更多信息请看此页

3. 你总是勾勒出"下一个"球而不是你点击的那个球的原因是因为你在改变笔画值之前绘制了球:

show() {
fill(this.ballFill);
ellipse(this.pos.x, this.pos.y, this.r);
if (this.isSelected){
stroke(255, 255, 0);
strokeWeight(4);
} else {
noStroke();
}
}

应该

show() {
fill(this.ballFill);
if (this.isSelected){
stroke(255, 255, 0);
strokeWeight(4);
} else {
noStroke();
}
ellipse(this.pos.x, this.pos.y, this.r);
}

你在画选中的球时禁用了笔画，然后你启用了笔画，然后你用你刚刚启用的笔画绘制了下一个未选中的球，之后你又禁用了笔画。