Flutter CustomPaint 与 Canvas
封面图
•
2025-11-13
•
Flutter
0
0
0
0
在 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` 绘制图形 | --- 如果你有具体的绘图需求或想实现某个效果,可以告诉我,我可以帮你写出对应的代码 😊
上一篇:
Flutter 组合实例:TurnBox
下一篇:
Flutter 自绘组件:CustomCheckbox
标题录入,一次不能超过6条
留言
评论