如何在盘旋时直接着色一个矩形？

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的回答基本上只是乔治的回答，转而上课。

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

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

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。