如何解决Flutter中的弧形渐变?
您所需的矩形实际上是一个正方形,您要绘制的圆将适合该正方形。圆弧只是那圆弧中扫过许多弧度的一片馅饼。使用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(),
),
);
}
解决方法
我有一个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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。