0

我想画一条弧线，范围从 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);

我怎样才能实现这样的戒指风格？

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

// 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);
4

1 回答 1

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);

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

于 2021-05-11T13:14:41.333 回答