Flutter教程使用CustomPainter绘制自定义图形

我正在学习Flutter的CustomPainter绘制自定义图形，但在实现过程中遇到几个问题：

  1. 如何正确重写paint()和shouldRepaint()方法？有没有最佳实践可以参考？
  2. 绘制复杂图形（如不规则多边形或曲线）时，路径(Path)的处理总是很混乱，该怎么优化绘制逻辑？
  3. 性能方面，当画布需要频繁重绘（比如动画场景），如何避免卡顿？是否需要考虑缓存或其他技巧？
  4. 有没有推荐的调试方法来可视化绘制过程？比如查看画布边界或路径的控制点。
    希望能得到有实际项目经验的同学指点！
3 回复

首先创建一个继承自CustomPainter的类，重写paint方法绘制图形。比如画一个矩形：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

然后在需要绘制的地方使用CustomPaint：

CustomPaint(
  painter: MyPainter(),
  child: Container(),
)

要绘制更复杂的图形，可以利用canvas.drawXXX系列方法，如drawCircle、drawArc等。记得设置好Paint的样式和颜色。

优化时可实现shouldRepaint方法，避免不必要的重绘。这是一个基础框架，你可以在此基础上扩展各种自定义图形。

更多关于Flutter教程使用CustomPainter绘制自定义图形的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


使用Flutter的CustomPainter可以绘制自定义图形。首先创建一个继承自CustomPainter的类，在其中实现paint方法和shouldRepaint方法。

import 'package:flutter/material.dart';

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(0, size.height / 2);
    path.quadraticBezierTo(size.width / 2, 0, size.width, size.height / 2);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

然后在Widget树中使用CustomPaint：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CustomPainter Demo')),
      body: Center(
        child: CustomPaint(
          painter: MyPainter(),
          child: Container(),
        ),
      ),
    );
  }
}

这段代码会绘制一个蓝色的自定义形状。你可以根据需要调整Path和Paint的属性来改变图形样式。

使用Flutter的CustomPainter绘制自定义图形

CustomPainter是Flutter中用于绘制自定义2D图形的强大工具。以下是基本使用方法和示例：

基本结构

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 在此处绘制你的图形
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // 返回true表示需要重绘，false表示不需要
    return false;
  }
}

// 使用
CustomPaint(
  painter: MyCustomPainter(),
  child: Container(), // 可选
)

常见绘制操作示例

  1. 绘制矩形:
final paint = Paint()
  ..color = Colors.blue
  ..style = PaintingStyle.fill;

canvas.drawRect(
  Rect.fromLTWH(50, 50, 200, 100),
  paint,
);
  1. 绘制圆形:
canvas.drawCircle(
  Offset(size.width/2, size.height/2), // 中心点
  50, // 半径
  Paint()..color = Colors.red,
);
  1. 绘制路径:
final path = Path()
  ..moveTo(0, size.height/2)
  ..lineTo(size.width/2, 0)
  ..lineTo(size.width, size.height/2)
  ..lineTo(size.width/2, size.height)
  ..close();

canvas.drawPath(
  path,
  Paint()..color = Colors.green,
);
  1. 绘制文本:
final textPainter = TextPainter(
  text: TextSpan(
    text: 'Hello Flutter',
    style: TextStyle(color: Colors.black, fontSize: 24),
  ),
  textDirection: TextDirection.ltr,
)..layout();

textPainter.paint(canvas, Offset(50, 50));

进阶技巧

  • 使用..strokeWidth设置线条宽度
  • 使用..shader添加渐变效果
  • 使用..maskFilter添加模糊效果
  • 使用..blendMode控制混合模式

CustomPainter非常适合创建自定义图表、特殊形状UI元素或任何标准Widget无法实现的视觉效果。

回到顶部