Processing 按1/2选形与方向键控制移动功能失效问题求解

原始功能需求 #

• 画布初始化大小为400*400，背景色值为80（深灰色）
• 画布中固定绘制两个基础图形：25*25的矩形、直径50的圆形
• 选中规则：按下键盘按键‘1’激活矩形的控制权限，按下按键‘2’激活圆形的控制权限
• 移动规则：被选中的图形可通过UP、DOWN、LEFT、RIGHT方向键，以10像素为步长调整位置

现存代码核心问题定位 #

• 内置回调函数拼写错误：将Processing框架自动触发的按键回调函数keyPressed()错写为keyPresse()，函数无法被系统识别调用，所有按键逻辑完全不执行
• 逻辑分支结构错误：将“选中按键判定”和“方向键判定”嵌套在同一个分支下——按下‘1’时key变量值固定为'1'，不可能同时匹配方向键的keyCode值，嵌套的移动逻辑永远无法触发，也没有设计独立的状态存储当前选中的图形
• 图形坐标绑定缺失：draw函数内绘制圆形时，坐标值硬编码为(50,50)，没有使用代码中定义的ex、ey变量作为圆形的动态坐标，即便后续逻辑修改了ex/ey的值，圆形位置也不会发生变化

修正后的可运行完整代码 #

int x = 0; // 矩形左上角X坐标
int y = 0; // 矩形左上角Y坐标
int ex = 0; // 圆形圆心X坐标
int ey = 0; // 圆形圆心Y坐标
int selectedShape = 0; // 选中状态标记：0=无选中，1=矩形，2=圆形

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

void draw(){
  background(80);
  // 绘制矩形：被选中时显示红色描边做视觉提示
  if (selectedShape == 1) {
    stroke(255, 0, 0);
  } else {
    stroke(255);
  }
  rect(x, y, 25, 25);
  
  // 绘制圆形：被选中时显示红色描边做视觉提示
  if (selectedShape == 2) {
    stroke(255, 0, 0);
  } else {
    stroke(255);
  }
  ellipse(ex, ey, 50, 50);
  noStroke();
}

void keyPressed() {
  // 单独处理选中按键逻辑
  if (key == '1') {
    selectedShape = 1;
    return;
  }
  if (key == '2') {
    selectedShape = 2;
    return;
  }
  
  // 单独处理方向键移动逻辑，根据选中状态修改对应图形的坐标
  if (selectedShape == 1) { // 控制矩形移动
    if (keyCode == UP) y -= 10;
    else if (keyCode == DOWN) y += 10;
    else if (keyCode == LEFT) x -= 10;
    else if (keyCode == RIGHT) x += 10;
  } else if (selectedShape == 2) { // 控制圆形移动
    if (keyCode == UP) ey -= 10;
    else if (keyCode == DOWN) ey += 10;
    else if (keyCode == LEFT) ex -= 10;
    else if (keyCode == RIGHT) ex += 10;
  }
}

功能验证说明 #

• 运行代码后，按下‘1’，矩形会切换为红色描边的选中状态，此时按方向键即可控制矩形移动
• 按下‘2’，圆形会切换为红色描边的选中状态，此时按方向键即可控制圆形移动
• 两个图形的移动逻辑互相独立，切换选中状态不会出现操作串扰

内容的提问来源于stack exchange，提问作者Mike L