Flutter 使用 CustomPaint 绘制基本图形

前言

上一篇 初识 Flutter 的绘图组件 — CustomPaint 我们介绍了 CustomPaint 的基本概念和使用，可以看到 CustomPaint 其实和 前端的 Canvas基本上是一样的，实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持，毕竟 CustomPaint 其实也是基于 Canvas 实现的。本篇我们来介绍 CustomPaint 基本图形的绘制。

绘制矩形

绘制矩形比较简单，方法定义如下：

void drawRect(Rect rect, Paint paint)

其中 rect 为要绘制矩形，paint 即画笔配置对象。比如我们要水平居中绘制一个宽度200 x 120的矩形，可以使用如下代码：

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
var center = size / 2;
// 绘制矩形
var paint = Paint()..color = Color(0xFF2080E5);
paint.strokeWidth = 2.0;
canvas.drawRect(
  Rect.fromLTWH(center.width - 100, 60, 200, 120),