在Flutter中，绘图需要用到 CustomPaint 和 CustomPainter， CustomPainter可理解为画板，承载画布，CustomPaint可理解为画布，承载绘制的具体内容。
画布（Canvas）顾名思义就是用来在上面画图形，如绘制点、线、路径、矩形、圆形、以及添加图像等。
画笔（Paint）用来决定在画布上绘制图形的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等等。
基本图片包括点、线、矩形（正方形、长方形）、弧、椭圆等等，绘制功能需要结合CustomPaint 和 CustomPainter来实现。
通过canvas画布的方法drawRect可以用来绘制矩形，如下图所示是绘制的一个矩形：
核心实现代码如下：
class RectPainter extends CustomPainter {
//[定义画笔]
final Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 2.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
//创建一个矩形
Rect rect = buildRect1();
//绘制矩形
canvas.drawRect(rect, _paint);
}
//创建矩形方式一
Rect buildRect1() {
//根据以屏幕左上角为坐标系圆点，分别设置上下左右四个方向距离
//left, top, right, bottom
return const Rect.fromLTRB(20, 40, 150, 100);
}
}
绘制矩形的核心内容主要是创建Rect矩形，方式二是通过Rect的静态方法fromLTWH根据设置左上角的点与矩形宽高来绘制，坐标分析如下图所示，这样创建出来的矩形实际width为参数三配置的值150，height为参数四配置的值100，代码如下：
//创建矩形方式二
Rect buildRect2() {
//根据设置左上角的点与矩形宽高来绘制；
//left, top, width, height
return const Rect.fromLTWH(20, 40, 150, 100);
}
方式三是通过Rect的静态方法fromCircle根据圆形来绘制正方形，如下图所示，这里参考的圆形为所要绘制的正方形的内切圆，代码实现如下：
//创建矩形方式三
Rect buildRect3() {
//根据根据圆形绘制正方形
//参数一 center Offset类型，参考圆形的中心
//参数二 radius 以center为圆心，以radius为半径
return const Rect.fromCircle(center: Offset(100, 100), radius: 50);
}
方式四是通过Rect的静态方法fromCenter根据中心点来绘制矩形，如下图所示，代码如下：
//创建矩形方式四
Rect buildRect4() {
//根据根据中心点绘制正方形
//参数一 center Offset类型，参考圆形的中心
//参数二 width
//参数三 height
return Rect.fromCenter(center: Offset(100, 100), width: 100, height: 100);
}
方式五是通过Rect的静态方法fromPoints来创建矩形，fromPoints需要两个点，矩形的左上角的点与右下角的点：
//创建矩形方式五
Rect buildRect5() {
//根据根对角点来绘制矩形
//参数一 矩形的左上角的点
//参数二 矩形右下角的点
return Rect.fromPoints(Offset(60, 50), Offset(200, 100));
}
通过canvas的drawRRect方法来绘制圆角矩形，如下图所示，是绘制圆角矩形，基本使用代码如下：
class RRectPainter extends CustomPainter {
//[定义画笔]
final Paint _paint = Paint()
//画笔颜色
..color = Colors.red
//画笔的宽度
..style = PaintingStyle.stroke
..strokeWidth = 3.0;
@override
void paint(Canvas canvas, Size size) {
//创建圆角矩形
RRect rect = buildRect3();
//绘制
canvas.drawRRect(rect, _paint);
}
//创建圆角矩形方式一
RRect buildRect1() {
//根据以画板左上角为坐标系圆点，分别设置上下左右四个方向距离来创建矩形
//left, top, right, bottom
//最后两个参数来设置圆角的大小
return const RRect.fromLTRBXY(20, 40, 250, 200, 60, 40);
}
}
创建圆角矩形的方法RRect.fromLTRBXY最后两个参数radiusX与radiusY，是用来设置圆角的两个半径的，如下图所示的圆角半径分析图。
完毕
