#头条创作挑战赛#

在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，是用来设置圆角的两个半径的，如下图所示的圆角半径分析图。

完毕

（此处已添加书籍卡片，请到今日头条客户端查看）