Flutter 画笔(Paint)、绘制弧(drawArc)(1)

本文详细介绍了如何在Flutter中使用`CustomPainter`和`Paint`类进行图形绘制,包括画圆、同心圆、渐变圆、正矩形、等分弧度以及五彩蜘蛛网和扇叶的绘制技巧,还提供了源码示例和相关学习资源推荐。
摘要由CSDN通过智能技术生成

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: 100.0);

canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromLTRB(0.0, 0.0, size.width, size.height/2);

canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.lerp(在两个矩形之间进行线性插值)

源码:

static Rect lerp(Rect a, Rect b, double t) {

assert(t != null);

if (a == null && b == null)

return null;

if (a == null)

return Rect.fromLTRB(b.left * t, b.top * t, b.right * t, b.bottom * t);

if (b == null) {

final double k = 1.0 - t;

return Rect.fromLTRB(a.left * k, a.top * k, a.right * k, a.bottom * k);

}

return Rect.fromLTRB(

lerpDouble(a.left, b.left, t),

lerpDouble(a.top, b.top, t),

lerpDouble(a.right, b.right, t),

lerpDouble(a.bottom, b.bottom, t),

);

}

double lerpDouble(num a, num b, double t) {

if (a == null && b == null)

return null;

a ??= 0.0;

b ??= 0.0;

return a + (b - a) * t;

}

a 矩形
b 矩形
t 时间值(0.0~1.0之间)

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect a=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/3);

Rect b=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/2);

Rect rect=Rect.lerp(a, b, 1.0);

canvas.drawArc(rect, 0.0, 2*pi/4, true, paint);

rect=Rect.lerp(a, b, 0.2);

canvas.drawArc(rect, 0.0, 2*pi/4, true, paint…color=Colors.blue);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect a=Rect.fromLTRB(8

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值