Processing Java中如何通过arc()实现按百分比填充的圆形？

核心角度计算逻辑 #

Processing的arc()函数采用弧度制计算角度，默认0弧度对应右侧水平方向，角度沿顺时针递增。要实现底部起始的填充效果（匹配你提到的示例图样式），关键是确定起始角度和填充对应的弧度范围：

• 底部位置对应的弧度是 3 * PI / 2（等价于270°）
• 完整圆形的弧度范围是 TWO_PI（即2π，360°）
• 已填充部分对应的弧度 = TWO_PI * (1 - percentageRemaining)（percentageRemaining为剩余未填充比例）

修正后的代码 #

float percentageRemaining = 0.25;
float startAngle = 3 * PI / 2; // 填充起始点：底部
float filledArc = TWO_PI * (1 - percentageRemaining);
float angle1 = startAngle;
float angle2 = startAngle + filledArc;

noStroke();
fill(35);
arc(100, 100, 200, 200, angle1, angle2, CHORD);

灵活调整填充起始方向 #

如果需要从其他位置开始填充，只需修改startAngle的值：

• 右侧起始：startAngle = 0
• 顶部起始：startAngle = PI / 2
• 左侧起始：startAngle = PI

扩展：波浪填充动画思路 #

若要实现预加载器的波浪填充效果，可在draw()函数中动态更新填充比例，结合正弦函数偏移填充边缘，示例片段：

float percentageRemaining = 1.0;
float waveOffset = 0;

void draw() {
  background(255);
  percentageRemaining -= 0.01;
  if (percentageRemaining < 0) percentageRemaining = 1.0;
  
  waveOffset += 0.1;
  float startAngle = 3 * PI / 2;
  float filledArc = TWO_PI * (1 - percentageRemaining);
  
  noStroke();
  fill(35);
  // 绘制基础填充弧
  arc(100, 100, 200, 200, startAngle, startAngle + filledArc, CHORD);
  
  // 添加波浪边缘效果
  beginShape();
  vertex(100, 200); // 底部中心点
  for (float a = startAngle; a < startAngle + filledArc; a += 0.05) {
    float r = 100 + sin(a * 5 + waveOffset) * 3; // 半径随正弦函数波动
    float x = 100 + cos(a) * r;
    float y = 100 + sin(a) * r;
    vertex(x, y);
  }
  vertex(100, 200);
  endShape();
}

内容的提问来源于stack exchange，提问作者Muhammad Anas Sajjad