Question

目标：单击红色蜡烛时，它们应变为绿色。此刻，当单击蜡烛时，将更改数组中的下一个蜡烛，而不是单击的蜡烛。单击最后一个蜡烛时，第一个蜡烛会更改颜色，因此问题继续环绕数组。问题将是什么，我将如何解决？

我尝试了各种数组操作，例如（candles [i-1] ...等）。还有不同的颜色分配方式（具有单独的“颜色”数组。所有这些都导致相同的问题。

let candles = [];
let numCandles = 15;
let bg, r, g;

function setup(){
    
    createCanvas(windowWidth,windowHeight);
    r = color(239,83,80);
    g = color(38,166,154);
    bg = color(19,23,34);
    background(bg);

    for(let i = 0; i < numCandles; i++){
        let c = new candleStick(i);
        candles.push(c);
        c.show();
    }
}

function draw(){
    
    resizeCanvas(windowWidth, windowHeight);
    background(bg);
    for(let i = 0; i < numCandles; i++){
        candles[i].show();
    }
}

function mousePressed(){

    for(let i = 0; i < numCandles; i++){
        
    if(mouseX <= candles[i].x + candles[i].bodyWidth && mouseX >= candles[i].x &&
        mouseY <= candles[i].y + candles[i].bodyHeight && mouseY >= candles[i].y){

            if(candles[i].col == r){
                candles[i].col = g;
                
            }
            else if(candles[i].col == g){
                candles[i].col = r;
                
            }
            
        }
    }
}

class candleStick{

    constructor(index){
        this.bodyHeight = 200;
        this.bodyWidth = 20;
        this.offset = 25;
        this.index = index;
        this.col = r;
        this.x = (windowWidth/2) - (this.index * this.offset) + (numCandles * (this.offset + this.bodyWidth)/4);
        this.y = (windowHeight/2) - this.bodyHeight;
    }

    drawBody(){
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
        fill(this.col);
        noStroke();
    }

    drawLine(){
        line((height/2 - this.bodyWidth/2) - (this.index * this.offset), (width/2 - this.bodyHeight/2), (height/2 - this.bodyWidth/2) - (this.index * this.offset) , (width/2 - this.bodyHeight/2) - 300);
    }

    show(){
        this.drawBody();
        this.drawLine();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

预期结果：单击蜡烛时，该蜡烛的颜色会改变（从红色变为绿色，从绿色变为红色）。所有其他蜡烛应保持不变。

Answer 1

诸如fill()，noStroke()，...等状态的功能用于绘制形状。 fill()设置用于填充形状的颜色，noStroke()禁用绘制轮廓。
rect()使用当前状态绘制一个矩形。

这意味着fill()和noStroke()必须在rect()之前被调用：

class candleStick{

    // [...]

     drawBody(){
        fill(this.col);
        noStroke();
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
    }

    // [...]
}

请注意，您设置的状态不会影响当前绘制的“蜡烛”，该状态会影响行中的下一个蜡烛。这引起了移位效果。

let candles = [];
let numCandles = 15;
let bg, r, g;

function setup(){

    createCanvas(windowWidth,windowHeight);
    r = color(239,83,80);
    g = color(38,166,154);
    bg = color(19,23,34);
    background(bg);

    for(let i = 0; i < numCandles; i++){
        let c = new candleStick(i);
        candles.push(c);
        c.show();
    }
}

function draw(){

    resizeCanvas(windowWidth, windowHeight);
    background(bg);
    for(let i = 0; i < numCandles; i++){
        candles[i].show();
    }
}

function mousePressed(){

    for(let i = 0; i < numCandles; i++){

    if(mouseX <= candles[i].x + candles[i].bodyWidth && mouseX >= candles[i].x &&
       mouseY <= candles[i].y + candles[i].bodyHeight && mouseY >= candles[i].y){

            if(candles[i].col == r){
                candles[i].col = g;
            }
            else if(candles[i].col == g){
                candles[i].col = r;
            }
        }
    }
}

class candleStick{

    constructor(index){
        this.bodyHeight = 200;
        this.bodyWidth = 20;
        this.offset = 25;
        this.index = index;
        this.col = r;
        this.x = (windowWidth/2) - (this.index * this.offset) + (numCandles * (this.offset + this.bodyWidth)/4);
        this.y = (windowHeight/2) - this.bodyHeight;
    }

    drawBody(){
        fill(this.col);
        noStroke();
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
    }

    drawLine(){
        line((height/2 - this.bodyWidth/2) - (this.index * this.offset), (width/2 - this.bodyHeight/2), (height/2 - this.bodyWidth/2) - (this.index * this.offset) , (width/2 - this.bodyHeight/2) - 300);
    }

    show(){
        this.drawBody();
        this.drawLine();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

更改数组中单个对象的外观，指示未对齐

1 个答案: