[英]How to specifically color one rect when it's hovered over?
How does one go about coloring an individual rectangle when it's hovered over? 当鼠标悬停在单个矩形上时,如何着色? The specific method used below really doesn't give me any ideas on how to solve this problem. 下面使用的特定方法实际上并没有给我任何有关如何解决此问题的想法。 It generates a grid in the window using individual rectangles. 它使用单个矩形在窗口中生成网格。 How would it be possible to listen for mouseX
and mouseY
and color one rectangle without disrupting this code? 在不中断此代码的情况下,如何监听mouseX
和mouseY
并为一个矩形着色? Thanks. 谢谢。
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);
}
}
}
For reference, I am using Processing 3 for Java. 作为参考,我正在使用Java处理3。
You can always check if the mouse is within the bounds of a rectangle: 您始终可以检查鼠标是否在矩形的边界内:
Here's the above applied to your code (if condition formatting for easy visibility, feel free to re-format): 这是适用于您的代码的上述内容(如果条件格式易于查看,请随时重新设置格式):
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);
}
}
}
For more info also checkout the Processing Button example 有关更多信息,请查看处理按钮示例
George's answer works nicely for this scenario, but there is another, a little more complex way too if might want to go Object Oriented here. George的答案在这种情况下效果很好,但是如果想在此处使用面向对象的方法,则还有另一种更为复杂的方法。 For this little example, you could have a Grid
class which holds and manages an array of Cell
objects. 对于这个小例子,您可以拥有一个Grid
类,该类保存和管理一个Cell
对象数组。 Or you can just skip the Grid
class and manage the Cells
in your main sketch. 或者,您可以跳过Grid
类并在主草图中管理Cells
。 You could give the Cell
class a function to render itself and you could give each cell a color and a size too, it's totally up to you. 您可以为Cell
类提供一个呈现自身的功能,也可以为每个单元格提供颜色和大小,这完全取决于您。 Also, it could have a function which tells you if your mouse is over it and a function to change its color. 另外,它可能具有告诉您鼠标是否在其上方的功能以及更改其颜色的功能。 A skeleton would look like this: 骨架看起来像这样:
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;
}
Now you could just use this class and its methods in your main sketch to find the cell with the mouse over it and call setColor
on it to change its color. 现在,您可以在主草图中使用此类及其方法来找到鼠标悬停在其上的单元格,然后调用setColor
更改其颜色。
George's answer is correct. 乔治的答案是正确的。 I upvoted it and I believe you should mark it as the correct answer. 我支持它,我相信您应该将其标记为正确答案。 Yushi's answer is basically just George's answer, moved into a class. Yushi的答案基本上只是George的答案,已经上了一堂课。
They both use point-rectangle collision detection , which checks whether the point is inside the rectangle. 它们都使用点-矩形碰撞检测 ,该检测将检测点是否在矩形内。 You just check each rectangle against the point (in your case the mouse position), and that allows you to determine which rectangle the mouse is in. This will work even if you have a bunch of rectangles of different shapes, and will even work with overlapping rectangles. 您只需对照该点检查每个矩形(在您的情况下为鼠标的位置),就可以确定鼠标所在的矩形。即使您有一堆形状不同的矩形也可以使用,甚至可以重叠的矩形。
The other way to do it is using grid-based collision detection which takes advantage of the fact that you have a bunch of evenly spaced rectangles that don't overlap. 另一种方法是使用基于网格的碰撞检测 ,它利用了您拥有一堆不重叠的均匀间隔的矩形这一事实。 You'd just use division to figure out which cell the mouse was in, and then you'd convert that cell to coordinates, and you'd use those coordinates to draw the rectangle. 您只需要使用除法确定鼠标所在的单元格,然后将该单元格转换为坐标,然后使用这些坐标来绘制矩形。 That might sound confusing, but it looks like this: 这听起来可能令人困惑,但是看起来像这样:
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);
}
The last block of code is the meat and potatoes. 代码的最后一块是肉和土豆。 First it figures out which row and column the mouse is in, then figures out the position of that cell, and uses that to draw a rectangle. 首先,它找出鼠标所在的行和列,然后找出该单元格的位置,并使用它绘制一个矩形。 If this doesn't make sense, the best thing you can do is get out a piece of paper and a pencil and draw a bunch of examples to see the pattern of what's going on. 如果这没有道理,那么您最好的办法就是拿出一张纸和一支铅笔,并画出一些例子,看看发生了什么。
Shameless self-promotion: I wrote a tutorial on collision detection in Processing, including both point-rectangle and grid-based collision detection, available here . 无耻的自我促进:我编写了有关Processing中的碰撞检测的教程,包括点矩形和基于网格的碰撞检测,可在此处获得 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.