Flutter CustomPaint 与 Canvas

封面图 • 2025-11-13 • Flutter

在 Flutter 中，`CustomPaint` 和 `Canvas` 是用于自定义绘制图形的核心组件。它们常用于实现复杂的 UI 效果、动画、游戏、图表等。

---

## ✅ 一、`CustomPaint` 简介

`CustomPaint` 是一个 Flutter 的小部件（Widget），它允许你通过自定义的 `Painter` 来绘制内容。你可以使用 `Canvas` 在 `CustomPaint` 中进行绘图操作。

### 基本结构：

```dart
CustomPaint(
  size: Size(width, height),
  painter: MyPainter(),
)
```

其中 `MyPainter` 是一个继承自 `CustomPainter` 的类，并重写 `paint` 方法。

---

## ✅ 二、`Canvas` 简介

`Canvas` 是 Flutter 中用于绘图的类，它提供了丰富的绘图方法，如画线、画圆、画矩形、填充颜色、绘制文本等。

### 使用方式：

在 `CustomPainter` 的 `paint` 方法中，你可以获取到 `Canvas` 对象：

```dart
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 在这里使用 canvas 进行绘图
  }

@override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 是否需要重新绘制
  }
}
```

---

## ✅ 三、常用 Canvas 绘图方法

| 方法 | 功能 |
|------|------|
| `canvas.drawColor(...)` | 填充整个画布 |
| `canvas.drawLine(...)` | 画一条线 |
| `canvas.drawRect(...)` | 画一个矩形 |
| `canvas.drawCircle(...)` | 画一个圆形 |
| `canvas.drawPath(...)` | 画一个路径（比如曲线） |
| `canvas.drawText(...)` | 绘制文本 |
| `canvas.save()` / `canvas.restore()` | 保存和恢复画布状态 |
| `canvas.translate(...)` | 移动坐标系 |
| `canvas.rotate(...)` | 旋转坐标系 |
| `canvas.scale(...)` | 缩放坐标系 |

---

## ✅ 四、示例：绘制一个红色圆形

```dart
class RedCirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

final center = Offset(size.width / 2, size.height / 2);
    final radius = 50.0;

canvas.drawCircle(center, radius, paint);
  }

@override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

// 在 Widget 中使用：
CustomPaint(
  size: Size(200, 200),
  painter: RedCirclePainter(),
)
```

---

## ✅ 五、进阶技巧

### 1. **路径绘制（Path）**

```dart
final path = Path();
path.moveTo(50, 50);
path.lineTo(150, 150);
path.lineTo(50, 150);
path.close();

canvas.drawPath(path, paint);
```

### 2. **渐变色（Gradient）**

```dart
final gradient = LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [Colors.blue, Colors.green],
);

final shader = gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height));
final paint = Paint()..shader = shader;

canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
```

### 3. **文字绘制**

```dart
final textPainter = TextPainter(
  text: TextSpan(text: 'Hello, Flutter!', style: TextStyle(color: Colors.black, fontSize: 20)),
  textAlign: TextAlign.center,
  textDirection: TextDirection.ltr,
);

textPainter.layout(maxWidth: size.width);
textPainter.paint(canvas, Offset(size.width / 2 - textPainter.width / 2, size.height / 2 - textPainter.height / 2));
```

---

## ✅ 六、注意事项

- `CustomPaint` 的性能问题：频繁的重绘可能导致性能下降，建议合理使用 `shouldRepaint`。
- `Canvas` 是基于 Skia 渲染引擎的，性能较高，适合复杂图形绘制。
- 可以结合 `AnimationController` 实现动画效果。

---

## ✅ 总结

| 概念 | 说明 |
|------|------|
| `CustomPaint` | 用于自定义绘制的 Flutter 小部件 |
| `Canvas` | 提供绘图功能的类，支持多种图形绘制 |
| `CustomPainter` | 需要实现的抽象类，包含 `paint` 方法 |
| `paint` 方法 | 在其中使用 `Canvas` 绘制图形 |

---

如果你有具体的绘图需求或想实现某个效果，可以告诉我，我可以帮你写出对应的代码 😊