Flutter 提供了CustomPainter 与 Android 相似的 Paint 和 Canvas 来实现自定义 View,需要实现 paint() 绘制方法与 shouldRepaint() 在刷新布局的时是否需要重绘。
class PaintCustom extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Paint 画笔
Paint主要属性:
color -> 画笔颜色
strokeWidth -> 画笔粗细
isAntiAlias -> 是否抗锯齿
filterQuality -> 颜色渲染模式质量:高 / 中 / 低
shader -> 着色器,一般用来绘制渐变效果或 ImageShader
strokeCap -> 笔触线帽类型:round / butt / square
笔触类型包括三种,默认为 butt 即从初始点到终止点;square 在初试点与终止点绘制一个方块;round 即在初试点与终止点绘制一个圆角;
drawArc,drawLine,drawCircle,drawPoints
canvas.drawLine(
Offset(30.0, 30.0), Offset(Screen.width - 30.0, 30.0), Paint());
canvas.drawLine(
Offset(30.0, 60.0), Offset(Screen.width - 30.0, 60.0), Paint()..strokeWidth = 8.0..isAntiAlias = true);
canvas.drawLine(
Offset(30.0, 120.0), Offset(Screen.width - 30.0, 120.0), Paint() ..strokeWidth = 8.0 ..isAntiAlias = true..strokeCap = StrokeCap.round);
canvas.drawLine(
Offset(30.0, 90.0), Offset(Screen.width - 30.0, 90.0), Paint()..strokeWidth = 8.0..isAntiAlias = true..strokeCap = StrokeCap.square);
strokeJoin -> 线结合处:锐角 / 圆弧 / 直线
在线的交汇点处,可以设置交叠时样式,包括:锐角,圆弧和直角样式。
style -> 画笔样式:填充 / 描边
style 包括两种样式,默认 PaintingStyle.fill 为填充,PaintingStyle.stroke 为描边;用圆来绘制效果更明显;
canvas.drawCircle(Offset(100.0, 200.0), 50.0, Paint()..strokeWidth = 8.0);
canvas.drawCircle(Offset(260.0, 200.0), 50.0, Paint()..strokeWidth = 8.0..style = PaintingStyle.stroke);
maskFilter -> 模糊遮照效果
模糊效果包括:nomal 内外模糊;solid 内部填充外边模糊,类似于荧光灯效果;outer 内部透明外边模糊;inner 内部模糊,外边正常;
canvas.drawLine(Offset(30.0, 280.0), Offset(Screen.width - 30.0, 280.0),
Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0));
canvas.drawLine(Offset(30.0, 310.0), Offset(Screen.width - 30.0, 310.0),
Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.outer, 3.0));
canvas.drawLine(Offset(30.0, 340.0), Offset(Screen.width - 30.0, 340.0),
Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.solid, 3.0));
canvas.drawLine(Offset(30.0, 370.0), Offset(Screen.width - 30.0, 370.0),
Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0));
drawArc
canvas.drawPoints(
PointMode.points,
[
Offset(10, 100),
],
Paint()
..strokeWidth = 6
..strokeCap = StrokeCap.round
..color = Color(0xff1ccf9e));
// 画半圆弧 有直径线 1,
canvas.drawArc(
Rect.fromCircle(
center: Offset(60, 150),
radius: 50,
),
0,
-Math.pi,
true,
Paint()
..strokeWidth = 2
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..color = Color(0xffffffff));
canvas.drawArc(
Rect.fromCircle(
center: Offset(200, 100),
radius: 50,
),
0,
-Math.pi,
true,
Paint()
..strokeWidth = 5
..strokeCap = StrokeCap.round
..color = Color(0xffffffff));
// 画半圆弧 无直径线 2
canvas.drawArc(
Rect.fromCircle(
center: Offset(60, 220),
radius: 50,
),
0,
-Math.pi,
false,
Paint()
..strokeWidth = 2
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..color = Color(0xffee22ee));
// 画半圆弧 无直径线
canvas.drawArc(
Rect.fromCircle(
center: Offset(220, 200),
radius: 50,
),
0,
-Math.pi / 2,
false,
Paint()
..strokeWidth = 2
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..color = Color(0xff1388ee));
canvas.drawArc(
Rect.fromCircle(
center: Offset(220, 220),
radius: 50,
),
0,
Math.pi,
false,
Paint()
..strokeWidth = 2
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..color = Color(0xff00ffee));
Offset(10, 100) 圆心距离左边和顶部的距离, radius: 50 圆半径