Flutter 画笔(Paint)、绘制弧(drawArc),简直无敌

本文介绍了如何使用Flutter的Canvas API进行弧形、扇形和同心圆的绘制,包括使用Rect.fromCenter、Rect.lerp等方法创建不同类型的矩形,并结合Paint对象进行颜色和形状的定制。示例代码展示了如何实现各种形状的绘制,以及避免重绘开销的策略。
摘要由CSDN通过智能技术生成

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

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

}

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromCenter({ Offset center, double width, double height })

center 矩形中心相对于原点偏移量
width 矩形宽度
height 矩形高度

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.fromCenter(center: Offset(size.width/2,size.height/2),width:size.width/2,height:size.height/2);

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

}

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromLTWH(double left, double top, double width, double height)

left 矩形最左边相对于原点偏移量
top 矩形最顶部相对于原点偏移量
width 矩形宽度
height 矩形高度

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.fromLTWH(0.0, 0.0, size.width/2, size.height/2);

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

}

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromPoints(Offset a, Offset b) : this.fromLTRB(

math.min(a.dx, b.dx),

math.min(a.dy, b.dy),

math.max(a.dx, b.dx),

math.max(a.dy, b.dy),

);

a 相对于原点x方向上的偏移范围
b 相对于原点y方向上的偏移范围

下面三种写法效果一样(主要是取x或y方向上偏移量的范围)

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=1.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromPoints(Offset(size.width, 0.0),Offset(0,size.height));

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

}

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

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值