序言
最近仿照网上的案例，学习了 CustomPaint 的绘制使用。万丈高楼平地起，每天学习，每天进步。下面把 CustomPaint 在使用过程中的重点记录一下。
基本用法
父层 CustomPaint 是固定写法，painter 入参是我们真实的绘制实现，size 用于指定画布大小，不指定时，画布大小为 child 的大小。
CustomPaint(
size: Size(200, 200), //指定画布大小
painter: MyPainter(), //自定义的绘制内容
child: RepaintBoundary(child)),
)
如果
CustomPaint有子节点，为了避免子节点不必要的重绘并提高性能，通常情况下都会将子节点包裹在RepaintBoundary组件中。
MyPainter 如何使用？
新建 MyPainter 继承 CustomPainter , 并重写如下两个方法：
-
void paint(Canvas canvas, Size size): 在这里面，配合canvas，paint完成自定义绘制 -
bool shouldRepaint(covariant MyPainter old): 在实际场景中正确利用此回调可以避免重绘开销
具体样例
将 CustomPaint 基础知识结合 anitaion 动画实现如下demo ：
我们把实现分为两个部分：
- 实现扇形绘制，弧度由构造方法传入
class _PacmanPainter extends CustomPainter {
final double angle;
final Color color;
Paint _paint = Paint()..style = PaintingStyle.fill;
_PacmanPainter(this.angle, this.color) {
_paint.color = color;
}
@override
void paint(Canvas canvas, Size size) {
final _radius = min(size.width, size.height) / 2;
///根据 angle 绘制扇形
canvas.drawArc(Rect.fromLTWH(0, 0, _radius * 2, _radius * 2), angle / 2,
2 * pi - angle, true, _paint);
}
@override
bool shouldRepaint(covariant _PacmanPainter old) {
return color != old.color || angle != old.angle;
}
}
- 封装动画层，根据进度控制
_PacmanPainter进行重绘
class _TestPacmanWidgetState extends State<TestPacmanWidget>
with TickerProviderStateMixin {
AnimationController _controller, _controller1;
Animation<double> _animation;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 800),
)..repeat(reverse: true);
//执行 repeat 动画就开始了，reverse 设置动画正序倒序循环
_animation = Tween(begin: 0.0, end: pi / 2).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.linear,
),
);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 200,
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return CustomPaint(
painter: _PacmanPainter(
_animation.value,
Colors.blue,
),
);
},
),
);
}
}
AnimatedBuilder内部实现监听动画进度，并触发setState，在builder: (context, child)中响应重绘。_pacmanPainter使用_animation.value这个变化值作为入参，最终实现动画效果。
快捷代码笔记：
- 画点
Paint _paint = Paint()
..color = Colors.red
..strokeWidth = 3;
@override
void paint(Canvas canvas, Size size) {
var points = [
Offset(0, 0),
Offset(size.width / 2, size.height / 2),
Offset(size.width, size.height),
];
canvas.drawPoints(PointMode.points, points, _paint);
}
- 画线
canvas.drawLine(Offset(0, 0),Offset(size.width, size.height), _paint); - 画路径
Paint _paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 3;
@override
void paint(Canvas canvas, Size size) {
var _path = Path()
..moveTo(0, 0)
..lineTo(size.width, 0)
..lineTo(size.width, size.height)
..close();
canvas.drawPath(_path, _paint);
}
- 画圆形
canvas.drawCircle(Offset(size.width/2, size.height/2), 20, _paint); - 画扇形（圆弧）
canvas.drawArc( Rect.fromLTRB(0, 0, size.width, size.height), 0, pi/2, true, _paint);
drawArc 方法参数说明：
rect构造矩形
startAngle开始角度
sweepAngle绘制的弧形占用角度弧度(360°角=2π)
userCenter扇形或圆弧段（true或false）
