前言
上一篇 初识 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),