老孟导读：CustomPaint能够称之为动画鼻祖，它能够实现任何酷炫的动画和效果。CustomPaint自己没有动画属性，仅仅是绘制属性，通常状况下，CustomPaint会和动画控制配合使用，达到理想的效果。javascript
基本用法
CustomPaint的基本用法中包含绘制点、线、各类形状和各类曲线，用法以下：css
CustomPaint( painter: MyCustomPainter(),)
MyCustomPainter定义以下：java
class MyCustomPainter extends CustomPainter { void paint(Canvas canvas, Size size) {}
bool shouldRepaint(MyCustomPainter oldDelegate) { return this != oldDelegate; }}
上面的MyCustomPainter为了看起来清晰，什么也没有作，一般状况下，在paint方法内绘制自定义的效果。shouldRepaint方法一般在当前实例和旧实例属性不一致时返回true。canvas
paint经过canvas绘制，size为当前控件的大小，下面看看canvas的方法。微信
绘制点
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); }
PointMode有3种模式：app
points：点编辑器
lines：将2个点绘制为线段，若是点的个数为奇数，最后一个点将会被忽略ide
polygon：将整个点绘制为一条线函数
绘制线
canvas.drawLine(Offset(0, 0),Offset(size.width, size.height), _paint);
绘制路径
Paint _paint = Paint() ..color = Colors.red ..style = PaintingStyle.stroke ..strokeWidth = 3;
@overridevoid paint(Canvas canvas, Size size) { print('size:$size'); var _path = Path() ..moveTo(0, 0) ..lineTo(size.width, 0) ..lineTo(size.width, size.height) ..close(); canvas.drawPath(_path, _paint);}
这里注意Paint.style，还能够设置为PaintingStyle.fill，效果以下：动画
此时Path的路径不要在一条直线上，不然会看不到效果。
绘制各类形状
绘制圆形
canvas.drawCircle(Offset(size.width/2, size.height/2), 20, _paint);
绘制椭圆
canvas.drawOval(Rect.fromLTRB(0, 0, size.width, size.height/2), _paint);
若是给定的Rect为正方形，那么椭圆将会变为圆形。
绘制弧
canvas.drawArc( Rect.fromLTRB(0, 0, size.width, size.height), 0, pi/2, true, _paint);
绘制圆角矩形
canvas.drawRRect( RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(10)), _paint)
canvas还有不少绘制函数，好比贝塞尔曲线、三次贝塞尔曲线、画布的反转等操做，这里不在一一介绍。
这些函数和Android的Canvas基本同样，若是你有Android基础，直接套用便可。
最后奉上一个绘制玫瑰的动画效果:
这个效果是否是很酷炫，咱们看下绘制花骨朵代码：
////// 绘制花骨朵///_drawFlower(Canvas canvas, Size size) { //将花变为红色 if (flowerPaths.length >= RoseData.flowerPoints.length) { var path = Path(); for (int i = 0; i < flowerPaths.length; i++) { if (i == 0) { path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy); } else { path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy); } } _paint.style = PaintingStyle.fill; _paint.color = _flowerColor; canvas.drawPath(path, _paint); } //绘制线 _paint.style = PaintingStyle.stroke; _paint.color = _strokeColor; //去掉最后2个点，最后2个点为了绘制红色 var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2)); canvas.drawPoints(PointMode.polygon, points, _paint);}
花骨朵的绘制只经过canvas.drawPath就实现了，其实整个玫瑰花的绘制都是经过canvas.drawPath加上动画控制实现的。
CustomPaint能够实现任何你想要的动画的效果，好比绘画版就能够经过此控件实现。
获取完整绘制玫瑰代码关注公众号回复：rose
本文分享自微信公众号 - 老孟Flutter（lao_meng_qd）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。