Processing绘制九层楼房并实现鼠标交互

Processing绘制九层楼房并实现鼠标交互

本示例使用 Processing 绘制一个九层楼房，并实现鼠标交互功能，点击楼层时输出对应的楼层数字。

代码示例

int floorNum = 0;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  strokeWeight(2);
  
  // 画九层楼房
  for (int i = 0; i < 9; i++) {
    fill(255-i*20);
    rect(50, 350-i*35, 100, 30);
    fill(0);
    textAlign(CENTER, CENTER);
    text(i+1, 100, 365-i*35);
  }
  
  // 输出当前点击的楼层
  if (floorNum > 0) {
    textAlign(CENTER, BOTTOM);
    text('你点击了第' + floorNum + '层楼', width/2, height/2);
  }
}

void mouseClicked() {
  // 判断点击的位置是否在楼房内
  if (mouseX > 50 && mouseX < 150) {
    int floor = 9 - floor((mouseY - 20) / 35);
    if (floor > 0 && floor <= 9) {
      floorNum = floor;
    }
  }
}

效果图

当点击某一层楼时，会在画面中央输出当前点击的楼层。