Flutter painter 画圆弧带指示通过 360 度

Question

我想画一个圆弧，范围从 0 度到 360 度 以及更远 。通过 360 度时，我想以某种方式指示用户，可能有间隙或一些阴影（见附图，尤其是 360 和 450 示例）。目前没有显示（图片左下角）。

目前我是这样画戒指的：

// full paint
Paint full = Paint()
  ..color = fullColor
  ..strokeCap = StrokeCap.round
  ..style = PaintingStyle.stroke
  ..strokeWidth = _strokeWidth;

// full
double arcAngle = 2 * pi * (fullPercent / 100);
canvas.drawArc(Rect.fromCircle(center: center, radius: _radius), -pi / 2,
    arcAngle, false, full);

如何实现这样的戒指样式？

更新（根据 moneer 的回答解决）：

// empty
final Offset center = Offset(0.5 * size.width, 0.5 * size.height);
canvas.drawCircle(center, _radius, empty);

double arcAngleStart = -0.5 * pi;
double arcAngleEnd = 2 * pi * (percent % 100 / 100);
if (percent >= 100) {
  // full
  canvas.drawCircle(center, _radius, full);
  // over
  canvas.drawArc(Rect.fromCircle(center: center, radius: _radius),
      arcAngleStart, arcAngleEnd + 0.0 * pi / 180, false, over);
  // arcAngleStart & arcAngleEnd
  arcAngleStart -= 0.25 * pi;
  arcAngleEnd += 0.25 * pi;
}

// full
canvas.drawArc(Rect.fromCircle(center: center, radius: _radius),
    arcAngleStart, arcAngleEnd, false, full);

Answer 1

可以通过绘制多层来做间隙。除非您想出不同的方法，否则您很可能无论如何都需要这样做（以便绘制背景）。这是使用您的代码的示例。请原谅混乱。我有点急:)

   Paint background = Paint()
  ..color = Colors.red
  ..strokeCap = StrokeCap.round
  ..style = PaintingStyle.stroke
  ..strokeWidth = 10.0;
    
    Paint middle = Paint()
  ..color = Colors.white
  ..strokeCap = StrokeCap.round
  ..style = PaintingStyle.stroke
  ..strokeWidth = 10.0;
    
    Paint full = Paint()
  ..color = Colors.red
  ..strokeCap = StrokeCap.round
  ..style = PaintingStyle.stroke
  ..strokeWidth = 10.0;

    
    double arcAngle1 = 2 * pi * (100 / 100);
canvas.drawArc(Rect.fromCircle(center: Offset(size.height + 100, size.width + 100), radius: 50), -pi / 2,
    arcAngle1, false, background);
    
        double arcAngle2 = 2 * pi * (51 / 100);
canvas.drawArc(Rect.fromCircle(center: Offset(size.height + 100, size.width + 100), radius: 50), -pi / 2,
    arcAngle2, false, middle);
    
double arcAngle3 = 2 * pi * (50 / 100);
canvas.drawArc(Rect.fromCircle(center: Offset(size.height + 100, size.width + 100), radius: 50), -pi / 2,
    arcAngle3, false, full);

您将需要根据传递的参数添加条件以控制正在绘制的内容。因此，例如，如果您不需要指示，只需用单一颜色绘制一个完整的圆圈。

Flutter painter 画圆弧带指示通过 360 度

Flutter painter draw arc with indication when passing 360 degrees

flutter

drawing