单击矩形时，使用数组中的颜色填充背景

Question

我使用循环制作了几个矩形。 矩形的颜色由阵列提供。

我想要点击其中一个矩形，背景将填充我选择的颜色。

我是处理新手，所以我对如何处理感到有些困惑。

color[] backgrounds = {#e8be55, #ff8827, #eb5051, #00b4cc, #005f6b, #7c6753, #edeaee};
int bgLength = backgrounds.length;

int xPos;
int yPos;
int size;

void setup(){
background(255);
size(1024, 768);
}

void draw(){
size = 40;
  xPos = guide + 10;
  yPos = 167;

  for(int i = 0; i < bgLength; i++) {
    noStroke();
    fill(backgrounds[i]);
    rect(xPos, yPos, size, size);
    xPos = xPos + size + 4;

      if(xPos>180){
                xPos = guide + 10;
                yPos += size + 4;

        }
  }
}

感谢。

Answer 1

您需要检查界限。首先，我建议你稍微组织一下变量。 例如，一些变量永远不会改变（因此没有理由在draw()中分配它们）。 这样可以更容易地看到坐标是什么。

我建议：

color[] backgrounds = {#e8be55, #ff8827, #eb5051, #00b4cc, #005f6b, #7c6753, #edeaee};
int bgLength = backgrounds.length;

int xOffset = 10;
int yOffset = 167;
int xPos;
int yPos;
int size = 40;
int guide = 10;
int cols = 4;//4 columns

color selectedBackground = backgrounds[backgrounds.length-1];//default to last element in the list/array

void setup(){
  background(255);
  size(1024, 768);
  noStroke();
}

void draw(){
  background(selectedBackground);  

  for(int i = 0; i < bgLength; i++) {
    xPos = xOffset + ((i % cols) * (size+guide));//since % is returns the remainder of division, we use it to compute x position in the grid
    yPos = yOffset + ((i / cols) * (size+guide));//and we divide by the number of columns to compute the y position in the grid

    fill(backgrounds[i]);
    //check if a box is clicked
    if((mouseX >= xPos && mouseX <= xPos+size) && //check horizontal bounds(left/right)
       (mouseY >= yPos && mouseY <= yPos+size)){ //check vertical bounds(top/bottom)
         if(mousePressed){//if mouse is over/within a boxes bounds and clicked
           selectedBackground = backgrounds[i];//set the colour based on id
         }else{//just hovering
           fill(backgrounds[i],127);//draw transparent colour, just to high light selection, not actually needed, but now an easy option
         }
     }
     rect(xPos, yPos, size, size);//we draw at the end because the fill colour might have changed if a box was hovered
  }
}

你可以运行一个javascript演示。 （尽管语法上存在细微差别，但核心概念是相同的）：

＆＃13;

＆＃13;

var backgrounds;// = [color('#e8be55'), color('#ff8827'), color('#eb5051'), color('#00b4cc'), color('#005f6b'), color('#7c6753'), color('#edeaee')];
var bgLength;// = backgrounds.length;

var xOffset = 10;
var yOffset = 67;
var xPos = 0;
var yPos = 0;
var ssize = 40;
var guide = 10;
var cols = 4;//4 columns

var selectedBackground;// = backgrounds[backgrounds.length-1];//default to last element in the list/array

function setup(){
  createCanvas(1024, 768);noStroke();

  backgrounds = [color('#e8be55'), color('#ff8827'), color('#eb5051'), color('#00b4cc'), color('#005f6b'), color('#7c6753'), color('#edeaee')];
  bgLength = backgrounds.length;
  selectedBackground = backgrounds[backgrounds.length-1];//default to last element in the list/array
  
}

function draw(){
  background(selectedBackground);  

  for(var i = 0; i < bgLength; i++) {

    xPos = xOffset + ((i % cols) * (ssize+guide));//since % is returns the remainder of division, we use it to compute x position in the grid
    yPos = yOffset + (floor(i / cols) * (ssize+guide));//and we divide by the number of columns to compute the y position in the grid

    fill(backgrounds[i]);
    //check if a box is clicked
    if((mouseX >= xPos && mouseX <= xPos+ssize) && //check horizontal bounds(left/right)
       (mouseY >= yPos && mouseY <= yPos+ssize)){ //check vertical bounds(top/bottom)
         if(isMousePressed){//if mouse is over/within a boxes bounds and clicked
           selectedBackground = backgrounds[i];//set the colour based on id
         }else{//just hovering
           fill(backgrounds[i].rgba[0]+50,backgrounds[i].rgba[1]+50,backgrounds[i].rgba[2]+50);//draw transparent colour, just to high light selection, not actually needed, but now an easy option
         }
     }
     rect(xPos, yPos, ssize, ssize);//we draw at the end because the fill colour might have changed if a box was hovered
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;