如何使sweepGradient从颤动的圆形顶部开始应用？

Question

我想在扑朔迷离中创建类似的东西。

这是我的代码

import 'package:flutter/material.dart';
import 'dart:math';

class Arc extends CustomPainter {
    final double angle = 210.0;
double doubleToAngle(double angle) => angle * pi / 180.0;

Arc(this.angle);

void drawArcWithRadius(
    Canvas canvas, Offset center, double radius, double angle, Paint paint) {
    canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
        doubleToAngle(-90.0), doubleToAngle(angle), true, paint);
}

@override
void paint(Canvas canvas, Size size) {
    final Offset center = Offset(size.width / 2.0, size.height / 2.0);
    final double radius = size.width / 3.0;
    print("Size $size");
    print("Width ${size.width}");
    print("Size $center");
    print("Size $radius");
    Paint paint = Paint()
        ..strokeCap = StrokeCap.round
        ..strokeWidth = 20.0
        ..style = PaintingStyle.stroke
        ..color = Colors.red
        ..shader = new SweepGradient(
            colors: [
//          Color(0xFFFE7E00),
//          Color(0xFFFD0000),
                    Colors.green,
                    Colors.blue,
                ],
                startAngle: 0.0,
                endAngle: doubleToAngle(angle)
            ).createShader(Rect.fromCircle(center: center, radius: radius));
        drawArcWithRadius(canvas, center, radius, angle, paint);
    }
@override
bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
}
}

但是我最终却是这样的。 似乎渐变不是从顶部开始的。我该如何解决这个问题？

Answer 1

请注意，SweepGradient的角度是从3点钟的方向开始的，并且它们是顺时针的方式。

因此，您应该按如下所示设置参数：

Calculate

如果愿意，请检查我的示例代码以作为参考。 https://stackoverflow.com/a/54970376/845627