具有特定填充百分比的圆圈

Question

我想创建一个填充到一定百分比的圆圈，如下所示： 就像和这个

这是在处理java

下面是angle1和angle2决定弧度的代码。

        percentageRemaining = 0.25;
        angle1 = ????
        angle2 = ????
        noStroke();
        fill(35);
        arc(100, 100, 200, 200, angle1, angle2, CHORD);

我确实尝试了一些修复，但没有成功，所以我不确定。

Answer 1

我的计算机上没有处理功能，因此我尝试使用 editor.p5js.org（Processing 的 Javascript 版本）。转换应该很容易：

let startTime;
let circleRadius = 200;

function setup() {
  createCanvas(800, 600);
  startTime = millis();
}

function draw() {
  background(255);

  let elapsedTime = (millis() - startTime) / 1000.0;
  let percentage = min(elapsedTime / 10.0, 1);
  let fillHeight = circleRadius * 2 * percentage;

  // Draw blue rectangle fill, from bottom to top
  fill(0, 0, 255);
  noStroke();
  rect(width / 2 - circleRadius, height / 2 + circleRadius - fillHeight, circleRadius * 2, fillHeight);

  // White overlay to mask outside of circle
  fill(255);
  noStroke();
  beginShape();
  for (let angle = 0; angle < TWO_PI; angle += 0.01) {
    let x = width / 2 + circleRadius * cos(angle);
    let y = height / 2 + circleRadius * sin(angle);
    vertex(x, y);
  }
  for (let angle = TWO_PI; angle > 0; angle -= 0.01) {
    let x = width / 2 + (circleRadius + 100) * cos(angle);
    let y = height / 2 + (circleRadius + 100) * sin(angle);
    vertex(x, y);
  }
  endShape(CLOSE);

  // Draw outer circle
  noFill();
  stroke(0);
  strokeWeight(5);
  ellipse(width / 2, height / 2, circleRadius * 2);

  // Draw percentage text
  let textY = height / 2;
  let percentText = nf(percentage * 100, 0, 2) + "%";
  
  fill(textY >= height / 2 + circleRadius - fillHeight ? 0 : 255);
  
  textSize(32);
  textAlign(CENTER, CENTER);
  text(percentText, width / 2, textY);
}

输出：

并不完美...但应该是一个合理的开始！