processing.js 中的鼠标悬停和鼠标跟踪

Question

你好，我正在尝试在二维数组上跟踪鼠标，在每次销售中我都会得到一个正方形，我想做的是当我的鼠标越过某个正方形使其变红时，但是当我把鼠标悬停在草图上，其中一堆是红色的，有什么办法可以解决这个问题吗？这是代码：对不起我的英语。

int[][] back =new int[3][3];
int pad = 10, bs=100, len=pad*(back.length+1)+bs*back.length;

void setup(){
  size(500,500);
  noStroke();
}

void draw(){
 background(255); 
 rectt(0,0,width,height,color(100));
 for(int row=0;row<back.length;row++)
   for(int coll=0;coll<back[row].length;coll++){
     float x = pad+(pad+bs)*coll;
     float y = pad+(pad+bs)*row;
     rectt(x,y,bs,bs,color(150));
     if(mouseX > x && mouseY<y){
      rectt(x,y,bs,bs,color(255,0,0));
     }
   }
}


void rectt(float x, float y, float w, float h, color c){
 fill(c);
 rect(x,y,w,h);
}

Answer 1

看这行代码：

if(mouseX > x && mouseY<y){
   rectt(x,y,bs,bs,color(255,0,0));
}

您究竟希望 if 语句做什么？请绘制一些示例网格并针对一堆不同的点执行 if 语句。

希望这将证明您的逻辑在这里没有意义。您正在检查 mouseX > x，这意味着该点位于单元格的右侧。到目前为止这是有道理的。但随后您还要检查是否 mouseY < y，这意味着该点位于单元格上方。那没有意义！您正在为单元格右侧和上方的所有单元格着色。

相反，您需要检查鼠标位置是否在单元格内部。这通常是 4 个检查：

鼠标是否在单元格左边缘的右侧？
鼠标是否在单元格右边缘的左侧？
鼠标是否在单元格的上边缘下方？
鼠标是否在单元格的底部边缘上方？

您可以通过将单元格宽度和高度添加到其 x 和 y 位置来获得单元格的右边缘和底边缘。

processing.js 中的鼠标悬停和鼠标跟踪

mouseOver and mouse Tracking in processing.js

processing

processing.js