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

【问题标题】：How to make sweepGradient to start applying from the top of a circle in flutter?如何使sweepGradient从颤动的圆圈顶部开始应用？
【发布时间】：2018-10-28 14:46:33
【问题描述】：

我想在 Flutter 中创建类似的东西。

这是我的代码

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

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

【问题讨论】：

@pskink 我做到了。它不起作用。
@pskink 那我应该选择什么 startAngle 呢？
@pskink 也许我的英语不好，我无法向你解释自己。我知道我的代码中有一个 startAngle。我要说的是，我为 startAngle 放什么并不重要。如果我将它设置为 0.0 或 math.pi / 2.0 它不会改变渐变的起点。
我写了 Gradient.sweep 但 IDE 说 Gradient 没有名为“sweep”的构造函数。我已经报告了这个错误。
不幸的是没有:( 。画布上什么也没画。

标签： android dart flutter android-canvas

【解决方案1】：

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

所以你应该设置如下参数：

    final gradient = new SweepGradient(
      startAngle: 3 * math.pi / 2,
      endAngle: 7 * math.pi / 2,
      tileMode: TileMode.repeated,
      colors: [startColor, endColor],
    );

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

【讨论】：