Question

当一个矩形盘旋时，如何着色？下面使用的具体方法实际上并没有给我任何关于如何解决这个问题的想法。它使用单个矩形在窗口中生成网格。如何在不中断此代码的情况下监听mouseX和mouseY并为一个矩形着色？感谢。

int cols,rows;
int scl = 20;
int gridsize = 0;

void setup(){
size(400,400);
int w = 400;
int h = 400;
cols = w / scl;
rows = h / scl;

}

void draw() {
//mouseX, mouseY
background(r,g,b);

for (int x = 0; x < cols; x++){
  for (int y = 0; y < rows; y++){
  stroke(55);
  //noFill();
  fill(50,50,50);
  rect(x*scl,y*scl,scl,scl);
    }
  }
}

供参考，我正在使用Processing 3 for Java。

Answer 1

您始终可以检查鼠标是否在矩形范围内：

你知道mouseX，mouseY值
你知道每个方框的x，y和大小
如果mouseX在x和x +尺寸范围内且mouseY在y和y +尺寸范围内，那么你就是一个盒子。

以上内容适用于您的代码（如果条件格式化易于查看，请随时重新格式化）：

int cols, rows;
int scl = 20;
int gridsize = 0;

void setup() {
  size(400, 400);
  int w = 400;
  int h = 400;
  cols = w / scl;
  rows = h / scl;
}

void draw() {
  //mouseX, mouseY
  background(255);

  for (int x = 0; x < cols; x++) {
    for (int y = 0; y < rows; y++) {
      int xpos = x*scl;
      int ypos = y*scl;
      stroke(55);
      if(
        (mouseX >= xpos && mouseX <= xpos+scl) &&
        (mouseY >= ypos && mouseY <= ypos+scl)
        ){
        fill(90);
      }else{
        fill(50);
      }

      rect(xpos, ypos, scl, scl);
    }
  }
}

有关详情，请查看Processing Button example

Answer 2

George's answer可以很好地适用于这种情况，但如果可能想要在这里使用面向对象，还有另一种更复杂的方法。对于这个小例子，你可以有一个Grid类来保存和管理一组Cell个对象。或者，您可以跳过Grid课程并管理主草图中的Cells。您可以为Cell类提供一个渲染自身的功能，您也可以为每个单元格赋予颜色和大小，这完全取决于您。此外，它可以有一个功能，告诉您鼠标是否在它上面，以及一个改变其颜色的功能。骨架看起来像这样：

class Cell {

float x,y;
float length, breadth;
color col;

Cell(float x, float y) {
    this.x = x;
    this.y = y;

    length = 10;
    breadth = 10;
    col = color(0);
}

void render() {
    fill(col);
    rect(x, y, length, breadth);
}

void setColor(color col) {
    this.col = col;
}

boolean mouseOver() {
    if(mouseX > x && mouseX < x+length) {
        if(mouseY > y && mouseY < y+breadth) {
            return true;
        }
    }
    return false;
}

现在你可以在主草图中使用这个类及其方法来找到鼠标悬停在它上面的单元格并在其上调用setColor来改变它的颜色。

Answer 3

乔治的回答是正确的。我赞成它，我相信你应该把它标记为正确的答案。 Yushi的答案基本上只是George的答案，搬到了课堂上。

他们都使用点矩形碰撞检测，它检查点是否在矩形内。您只需针对该点（在您的情况下是鼠标位置）检查每个矩形，并且这允许您确定鼠标所在的矩形。即使您有一堆不同形状的矩形，这甚至可以使用重叠的矩形。

另一种方法是使用基于网格的碰撞检测，它利用了一堆不均匀间隔的矩形不重叠的事实。您只需使用除法来确定鼠标所在的单元格，然后将该单元格转换为坐标，然后使用这些坐标绘制矩形。这可能听起来令人困惑，但看起来像这样：

int cols;
int rows;
int scl = 20;

void setup() {
  size(400, 400);
  cols = width / scl;
  rows = height / scl;
}

void draw() {
  background(100);

  for (int x = 0; x < cols; x++) {
    for (int y = 0; y < rows; y++) {
      stroke(55);
      fill(50, 50, 50);
      rect(x*scl, y*scl, scl, scl);
    }
  }

  int hoveredRectColX = int(mouseX / scl);
  int hoveredRectRowY = int(mouseY / scl);
  float rectX = hoveredRectColX * scl;
  float rectY = hoveredRectRowY * scl;
  fill(255, 0, 0);
  rect(rectX, rectY, scl, scl);
}

最后一段代码是肉和土豆。首先，它确定鼠标所在的行和列，然后计算出该单元格的位置，并使用它来绘制矩形。如果这没有意义，那么你能做的最好的事情就是拿出一张纸和一支铅笔，并画出一堆例子来看看发生了什么的模式。

无耻的自我推销：我在Processing中编写了一个关于碰撞检测的教程，包括点矩形和基于网格的碰撞检测，可用here。

当它悬停在一个矩形上时如何专门为它设置颜色？

3 个答案: