如何在鼠标悬停时专门为一个矩形着色？

Question

如何在鼠标悬停在单个矩形上时为其着色？下面使用的具体方法真的没有给我任何解决这个问题的想法。它使用单独的矩形在 window 中生成网格。如何在不中断此代码的情况下监听 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 使用 Processing 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);
    }
  }
}

有关更多信息，请查看 Processing Button example

Answer 2

在这种情况下效果很好，但如果想在此处使用面向对象，还有另一种更复杂的方法。对于这个小例子，您可以有一个 Grid class 来保存和管理 Cell 对象的数组。或者您可以跳过 Grid class 并在主草图中管理 Cells。你可以给 Cell class 一个函数来渲染它自己，你也可以给每个单元格一个颜色和一个大小，这完全取决于你。此外，它还可以具有告诉您鼠标是否在其上的功能以及更改其颜色的功能。骨架看起来像这样：

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

现在您可以在主草图中使用此 class 及其方法来找到单元格，将鼠标悬停在单元格上并调用 setColor 来更改其颜色。

Answer 3

乔治的回答是正确的。我投了赞成票，我相信您应该将其标记为正确答案。 Yushi的回答基本上就是George的回答，搬进了class.

他们都使用点-矩形碰撞检测，检查点是否在矩形内。您只需根据点（在您的情况下是鼠标位置）检查每个矩形，这样您就可以确定鼠标所在的矩形。即使您有一堆不同形状的矩形，这也可以使用，甚至可以使用重叠的矩形。

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

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。

如何在鼠标悬停时专门为一个矩形着色？

How to specifically color one rect when it's hovered over?

java

processing

onhover