java如何在鼠标悬停在一个矩形上时为其指定颜色？

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

作为参考，我使用Processing3forJava

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

乔治的回答是正确的。我投了更高的票，我相信你应该把它标为正确答案。玉石的答案基本上就是乔治的答案，搬进了一个班级

它们都使用点-矩形碰撞检测，检查点是否在矩形内。您只需对照点（在本例中为鼠标位置）检查每个矩形，即可确定鼠标所在的矩形。即使您有一堆不同形状的矩形，这也可以使用，甚至可以使用重叠的矩形

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

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

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

无耻的自我提升：我写了一篇关于处理中的碰撞检测的教程，包括点矩形和基于网格的碰撞检测，可供here

Answer 3

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来更改其颜色