悬停在一个矩形上时如何为它着色？

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);
    }
  }
}

作为参考，我正在使用Java处理3。

Answer 1

您始终可以检查鼠标是否在矩形的边界内：

• 你知道mouseX，mouseY的值
• 你知道每个盒子的x，y和大小
• 如果mouseX在x和x + size范围内，而mouseY在y和y + size范围内，那么您将超过一个框。

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

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);
    }
  }
}

有关更多信息，请查看处理按钮示例

Answer 2

George的答案在这种情况下效果很好，但是如果想在此处使用面向对象的方法，则还有另一种更为复杂的方法。 对于这个小例子，您可以拥有一个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中的碰撞检测的教程，包括点矩形和基于网格的碰撞检测，可在此处获得 。