Flutter中的弧形渐变？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个Paint对象，并且尝试使用绘制一个Arc Gradient canvas.drawArc，但唯一的方法（至少根据我的研究）是使用a

Shader，但是Shader要从一个Gradient对象获取a ，则必须use Gradient.createShader(Rect

rect)，它接受一个矩形。我的问题是，有没有办法为弧形而不是矩形创建着色器？到目前为止，这里可供我参考：

Paint paint = new Paint()
  ..color = bgColor
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 3.0
  ..style = PaintingStyle.stroke
  ..shader = new Gradient.radial(size.width / 2.0, size.height / 2.0, size.height / 3.0, Colors.transparent, timerColor, TileMode.mirror).createShader(/* I don't have a rect object */);
canvas.drawArc(..., paint);

回答：

您所需的矩形实际上是一个正方形，您要绘制的圆将适合该正方形。圆弧只是那圆弧中扫过许多弧度的一片馅饼。使用Rect.fromCircle，使用中心和半径创建此正方形。然后在创建渐变和绘制圆弧时使用此正方形。

这是一个例子

import 'dart:math';
import 'package:flutter/material.dart';
class X1Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // create a bounding square, based on the centre and radius of the arc
    Rect rect = new Rect.fromCircle(
      center: new Offset(165.0, 55.0),
      radius: 180.0,
    );
    // a fancy rainbow gradient
    final Gradient gradient = new RadialGradient(
      colors: <Color>[
        Colors.green.withOpacity(1.0),
        Colors.green.withOpacity(0.3),
        Colors.yellow.withOpacity(0.2),
        Colors.red.withOpacity(0.1),
        Colors.red.withOpacity(0.0),
      ],
      stops: [
        0.0,
        0.5,
        0.7,
        0.9,
        1.0,
      ],
    );
    // create the Shader from the gradient and the bounding square
    final Paint paint = new Paint()..shader = gradient.createShader(rect);
    // and draw an arc
    canvas.drawArc(rect, pi / 4, pi * 3 / 4, true, paint);
  }
  @override
  bool shouldRepaint(X1Painter oldDelegate) {
    return true;
  }
}
class X1Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: const Text('Arcs etc')),
      body: new CustomPaint(
        painter: new X1Painter(),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      theme: new ThemeData.dark(),
      home: new X1Demo(),
    ),
  );
}

以上是 Flutter中的弧形渐变？ 的全部内容， 来源链接： utcz.com/qa/432027.html

回到顶部