flutter - 如何在 Sweep Gradient 中包含 Stroke Cap？

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

当您使用 strokeCap = StrokeCap.round 时，它会将一半的笔触宽度添加到您的线条的开头，将一半的笔触宽度添加到结尾以创建线条的圆形边缘，因此在您的计算中，您应该从从头开始一半
我更改了您的代码，它可以正常工作，代码如下:

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

    double strokeWidth = 30;
    double percentValue=100/100;
    double radius=centerPoint;

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

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


    Rect rect = Rect.fromCircle(center: Offset(centerPoint, centerPoint), radius: radius);

    var scapSize = strokeWidth / 2;
    double scapToDegree = scapSize / radius;

    double startAngle = _degreeToRad(270)+scapToDegree;
    double sweepAngle = _degreeToRad( 360)-(2*scapToDegree);

    canvas.drawArc(rect, startAngle, percentValue*sweepAngle, false, paint);


  }

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

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

并为您提供性能提示:

don't create your shader and gradient each time , the Paint method will be executed numers of time so you should check if you already created the shader for the inComing size use that and don't create it again