Question

我有一个问题。当我将鼠标移开时，如何逐步将矩形的颜色从白色更改为黑色？我对此有点新鲜。

我已经尝试了一下：

void setup () {
  size (200,200);

}

void draw () {
  background (0);
  stroke (255);
  line (100,0,100,200);
  line (0,100,200,100);

  // Fill a black color
  noStroke ();
  fill (255);

  // Depending on the mouse location, a different rectangle is displayed.    
  if (mouseX < 100 && mouseY < 100) {
    rect (0,0,100,100);
  } else if (mouseX > 100 && mouseY < 100) {
    rect (100,0,100,100);
  } else if (mouseX < 100 && mouseY > 100) {
    rect (0,100,100,100);
  } else if (mouseX > 100 && mouseY > 100) {
    rect (100,100,100,100);
  }
}

如果有人能帮助我，我将不胜感激。感谢。

Answer 1

如果我理解你的问题，你想要显示一个矩形网格，你想要一个矩形变成白色并在鼠标退出该矩形时保持白色。是吗？

如果是这样，那么您需要跟踪每个矩形是黑色还是白色。最简单的方法可能是boolean值的二维数组。数组中的每个单元格将代表网格中的单个方块。

如果希望该方块变为白色，请将数组中的相应单元格设置为true。然后遍历数组并使用数组中的值绘制每个方块以确定颜色。

Answer 2

通话function Locker() { this.dates = []; this.weeks = {}; } Locker.prototype.add = function(dateString) { var wStart = weekStart(dateString); if(this.weeks[wStart] == undefined) { this.weeks[wStart] = 1; } else { this.weeks[wStart]++; } if(this.weeks[wStart] == 3) { this.lock(getDatesFromWeek(wStart)); } } Locker.prototype.lock = function(dates) { this.lockedDates = this.lockedDates.concat(dates); // do something } var calendarLocker = new Locker(); // everytime an user add a date, call calendarLocker.add(date); // so when it reaches the limit, the locker will call calendarLocker.lock将矩形颜色设置为白色。使用fill(255);将矩形设置为黑色，或使用fill(0);将任意值x设置为0到255之间的灰色阴影。

要进行淡入淡出，您需要在每次draw（）调用中绘制多个矩形（绘制所有这些矩形最简单）。当前框将为白色，鼠标位于此处。其他人将逐渐变黑。因此，您需要为每个框指示其当前颜色的变量。

这是我的版本：

fill(x);

如果有很多方框，你应该使用一个数组或一些数据结构，而不是像int boxColor1; int boxColor2; int boxColor3; int boxColor4; void setup () { size (200,200); boxColor1 = boxColor2 = boxColor3 = boxColor4 = 0; } void draw () { background (0); // Fill a black color noStroke (); // Subtrack 10 from each box color, but don't go below zero boxColor1 = max( 0, boxColor1-10 ); boxColor2 = max( 0, boxColor2-10 ); boxColor3 = max( 0, boxColor3-10 ); boxColor4 = max( 0, boxColor4-10 ); // Depending on the mouse location, a different rectangle is displayed. if (mouseX < 100 && mouseY < 100) { boxColor1 = 255; } else if (mouseX > 100 && mouseY < 100) { boxColor2 = 255; } else if (mouseX < 100 && mouseY > 100) { boxColor3 = 255; } else if (mouseX > 100 && mouseY > 100) { boxColor4 = 255; } fill (boxColor1); rect (0,0,100,100); fill (boxColor2); rect (100,0,100,100); fill (boxColor3); rect (0,100,100,100); fill (boxColor4); rect (100,100,100,100); // Draw edge lines last, over the top stroke (255); line (100,0,100,200); line (0,100,200,100); }，boxColor1等许多不同的变量。

当我将鼠标移开时，如何逐步将颜色从白色更改为黑色？

2 个答案: