时间戳

首页 > 解决方案 > 如何更改椭圆的行和列的颜色以响应鼠标悬停在其中一个椭圆上？

java - 如何更改椭圆的行和列的颜色以响应鼠标悬停在其中一个椭圆上？

问题描述

  1. 我已经在处理过程中构建了这个草图，它在网格上生成椭圆。我想知道当鼠标悬停在行和列上时如何更改行和列的颜色。
void setup()
{
  size(400,400);
  noStroke();
  fill(180,50, 50, 100);
}
 
void draw()
{
  background(255);
 
  for (int row=0; row<10; row = row+1)
  {
    for (int col=0; col<10; col = col+1)
    {
      ellipse(20 + col*40, 20 + row*40,30,30);
        if (mousePressed && (mouseButton == LEFT))
        fill (random (55));
         ellipse(20 + col*40, 20 + row*40,30,30);
      
    }
  }
}

标签： javaprocessing

解决方案

计算椭圆的中心点坐标：

int cY = 20 + row*40;
int cX = 20 + col*40;

鼠标的位置存储在内置变量mouseX和mouseY. 椭圆排列成网格。测试鼠标的x坐标或y坐标是否在属于椭圆的网格区域内。根据测试结果设置颜色：

if ((mouseX > cX-20 && mouseX < cX+20) || mouseY > cY-20 && mouseY < cY+20) { 
    fill(255, 50, 50, 255);
} else {
    fill(180, 50, 50, 100);
}

完整示例：

void setup() {
    size(400,400);
    noStroke();
}
 
void draw() {
    background(255);
   
    for (int row=0; row < 10; row++) {
        int cY = 20 + row*40;
        for (int col=0; col < 10; col++) {
            int cX = 20 + col*40;
            
            if ((mouseX > cX-20 && mouseX < cX+20) || mouseY > cY-20 && mouseY < cY+20) { 
                fill(255, 50, 50, 255);
            } else {
                fill(180, 50, 50, 100);
            }
            ellipse(cX, cY, 30, 30);
        }
    }
}

推荐阅读