在 for 循环中将一行放入前景

Question

我正在尝试从我创建的一系列书籍中创建一个书架，如果一本书的 "recommended" 属性是 "false"，我将对角线划一本书。您可以在我的 for 循环中看到我尝试使用以下 if 语句来执行此操作：

if(books[i].recommended === false)
{
    fill(0, 0, 0);
    line(bookX,bookY,bookX+90,bookY+100);
}

但是我的问题是我在 for 循环中创建的行在后台，在我的书后面，因此是不可见的。我怎样才能让它出现在前台？

完整代码如下：

//I create my array with my books
var books = [];

for(var y = 1;y<=20;y++)
{
    books.push(
        {
            title: "Book "+y,
            stars: random(4),
            author: "Author "+y,
            color: color(random(255), random(255), random(255)),
            recommended: !!Math.floor(Math.random() * 2)
        }
        );
}

// Loop to draw 3 shelves
var shelfY = 105;
while (shelfY<=360)
{
    fill(173, 117, 33);
    rect(0, shelfY, width, 10);
    shelfY +=120;
}

// Loop to draw all my books
var bookX = 5;
var bookY = 5;
for (var i = 0; i<books.length; i++)
{
    fill(books[i].color);
    rect(bookX, bookY, 90, 100);
    fill(0, 0, 0);
    text(books[i].title, bookX+5, bookY+9, 70, 100);
    text(books[i].author, bookX+5, bookY+24, 70, 100);

    for (var j = 0; j < books[i].stars; j++) 
    {
        image(getImage("cute/Star"), bookX+3 + j * 20, bookY+70,20, 30);
    }

    bookX += 100;

    if(bookX>400)
    {
        bookX = 5;
        bookY += 120;
    }

    if(books[i].recommended === false)
    {
        fill(0, 0, 0);
        line(bookX,bookY,bookX+90,bookY+100);
    }
}

Answer 1

你是在增加 bookX 和 bookY 之后画线，所以它不会画在正确的地方。

尝试将 if (books[i].recommended etc... 放在 bookX += 100; 之前，它会起作用。

这是最终代码：

//I create my array with my books
var books = [];

for(var y = 1;y<=20;y++)
{
    books.push(
        {
            title: "Book "+y,
            stars: random(4),
            author: "Author "+y,
            color: color(random(255), random(255), random(255)),
            recommended: !!Math.floor(Math.random() * 2)
        }
        );
}

// Loop to draw 3 shelves
var shelfY = 105;
while (shelfY<=360)
{
    fill(173, 117, 33);
    rect(0, shelfY, width, 10);
    shelfY +=120;
}

// Loop to draw all my books
var bookX = 5;
var bookY = 5;
for (var i = 0; i<books.length; i++)
{
    fill(books[i].color);
    rect(bookX, bookY, 90, 100);
    fill(0, 0, 0);
    text(books[i].title, bookX+5, bookY+9, 70, 100);
    text(books[i].author, bookX+5, bookY+24, 70, 100);

    for (var j = 0; j < books[i].stars; j++) 
    {
        image(getImage("cute/Star"), bookX+3 + j * 20, bookY+70,20, 30);
    }

    if(books[i].recommended === false)
    {
        fill(0, 0, 0);
        line(bookX,bookY,bookX+90,bookY+100);
    }

    bookX += 100;

    if(bookX>400)
    {
        bookX = 5;
        bookY += 120;
    }

}

在 for 循环中将一行放入前景

Putting a line into the foreground inside a for loop

javascript

processing.js