如何在盤旋時直接着色一個矩形？

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。