如何在扫描梯度中包括行程帽？

Question

您可以看到我的弧线从顶部开始，但是有些区域被涂成粉红色，应该是白色的。我认为这是因为我正在使用StrokeCap.round，但是如何删除该部分？

---

画家类：

class MyPainter extends CustomPainter {
  void paint(Canvas canvas, Size size) {
    double centerPoint = size.height / 2;

    Paint paint = Paint()
      ..color = Colors.white
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    paint.shader = SweepGradient(
      colors: [Colors.white, Colors.pink],
      tileMode: TileMode.repeated,
      startAngle: _degreeToRad(270),
      endAngle: _degreeToRad(270 + 360.0),
    ).createShader(Rect.fromCircle(center: Offset(centerPoint, centerPoint), radius: 0));

    double startAngle = _degreeToRad(270);
    double sweepAngle = _degreeToRad(95 / 100 * 360);
    Rect rect = Rect.fromCircle(center: Offset(centerPoint, centerPoint), radius: centerPoint);
    canvas.drawArc(rect, startAngle, sweepAngle, false, paint);
  }

  double _degreeToRad(double degree) => degree * math.pi / 180;

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

---

用法：

CustomPaint(
  size: Size.fromRadius(100),
  painter: MyPainter(),
)

Answer 1

您可以简单地将扫描梯度中的startAngle降低一定量，例如9度：

startAngle: _degreeToRad(261),

---

这是完整的代码（使用弧度而不是度数：]：>

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final centerPoint = size.height / 2;

    final paint = Paint()
      ..color = Colors.white
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    const startAngle = pi * 3 / 2, sweepAngle = pi * 2 * 95 / 100;

    paint.shader = SweepGradient(
      colors: [Colors.white, Colors.pink],
      tileMode: TileMode.repeated,
      startAngle: startAngle - pi / 20,
      endAngle: startAngle + pi * 2,
    ).createShader(Rect.fromCircle(center: Offset(centerPoint, centerPoint), radius: 0));

    final rect = Rect.fromCircle(center: Offset(centerPoint, centerPoint), radius: centerPoint);
    canvas.drawArc(rect, startAngle, sweepAngle, false, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 2

[当您使用strokeCap = StrokeCap.round时，它将笔划宽度的一半添加到行的开始，而将一半的笔划宽度添加到末尾以创建线的圆边，因此在计算中应删除笔划宽度的一半从头开始，一半从结束我更改了您的代码，它的工作原理如下：