Processing中如何旋转ControlP5按钮以实现环形排列效果

ControlP5 没有原生支持组件旋转的公开接口，以下是两种可直接落地的实现方案：

方案1：重写ControlP5按钮的自定义绘制逻辑 #

通过给每个按钮绑定自定义的ControllerView，在绘制时插入旋转逻辑，既可以保留ControlP5自带的状态管理、点击事件、分组管理等全部原生功能，也不需要修改你现有复用图片资源的逻辑。
核心实现代码参考：

// 预先定义环形布局基础参数
float centerX = 300; // 环形圆心X坐标
float centerY = 300; // 环形圆心Y坐标
float ringRadius = 150; // 环形半径
int totalBtn = 24; // 总按钮数量

for(int k=0; k<totalBtn; ++k){
  float angle = radians(k * 360f / totalBtn); // 计算当前按钮对应的旋转角度
  // 计算按钮中心在环形上的坐标
  float btnCenterX = centerX + cos(angle) * ringRadius;
  float btnCenterY = centerY + sin(angle) * ringRadius;
  
  Button currentBtn = cp5.addButton("Button" + (k+1))
    // 20*20的按钮，左上坐标偏移半个宽高，让按钮中心对齐计算出的环形点位
    .setPosition(btnCenterX - 10, btnCenterY - 10)
    .setImages(imgden1)
    .setSize(20, 20)
    .setFont(font)
    .moveTo(AreaRingGroup);
  
  // 给当前按钮绑定自定义绘制逻辑
  currentBtn.setView(new ControllerView<Button>() {
    public void display(PGraphics pg, Button b) {
      pg.pushMatrix();
      // 位移到按钮中心后执行旋转
      pg.translate(b.getWidth()/2, b.getHeight()/2);
      pg.rotate(angle);
      pg.translate(-b.getWidth()/2, -b.getHeight()/2);
      
      // 按照按钮当前状态绘制对应图片
      if(b.isPressed()) {
        pg.image(imgden1[1], 0, 0);
      } else if(b.isHover()) {
        pg.image(imgden1[2], 0, 0);
      } else {
        pg.image(imgden1[0], 0, 0);
      }
      pg.popMatrix();
    }
  });
}

方案2：自定义实现环形按钮逻辑 #

如果你不需要用到ControlP5的额外功能，完全自己实现环形按钮更灵活，不受ControlP5的API限制：

• 提前计算好每个按钮的角度、坐标
• 绘制时遍历所有按钮，先旋转画布再绘制对应状态的图片
• 鼠标点击时通过极坐标转换即可判断命中的按钮，逻辑非常简单。

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