Flutter自定义绘制CustomPaint

const CustomPaint({
    super.key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    super.child,
})

abstract class CustomPainter extends Listenable {
    void paint(Canvas canvas, Size size);
    bool shouldRepaint(covariant CustomPainter oldDelegate);
}

class MyPainter extends CustomPainter {
    final Paint _paint = Paint()
      ..color = Colors.black87
      ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Size size) {
    // 纵向绘制
    final perWidth = size.width / 5;
    for (double i = 0; i <= size.width; i += perWidth) {
      canvas.drawLine(Offset(i, 0), Offset(i, size.height), _paint);
    }
    // 横向绘制
    final perHeight = size.height / 5;
    for (double i = 0; i <= size.height; i += perHeight) {
      canvas.drawLine(Offset(0, i), Offset(size.width, i), _paint);
    }
  }

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

CustomPaint(size: Size(300, 200), painter: MyPainter()),

CustomPaint(
    size: Size(300, 200),
    painter: MyPainter(),
    child: Center(child: Text('Hello')),
),

Stack(
  alignment: Alignment.center,
  children: [
    CustomPaint(
      size: Size(300, 200),
      painter: MyPainter(),
    ),
    Center(child: Text('Hello')),
  ],
)

final Paint _paint = Paint()
    // 画笔类型，默认填充fill，注意只有绘制一个封闭图形时才生效，
    // 绘制横线时是无效的
    ..style = PaintingStyle.stroke
    ..color = Colors.black87 // 画笔颜色
    ..isAntiAlias = true // 抗锯齿
    ..strokeWidth = 5 // 线宽
    // 端点形状，默认是butt, 普通矩形。
    // 可选round圆形，会凸出来一个半圆，半径是线宽的一半
    // 可选square矩形，会凸出来半个矩形，宽度是线宽的一半
    ..strokeCap = StrokeCap.square
    // 线段交互的角的形状，默认miter是一个尖角
    // 可选round，过渡为平滑的圆角
    // 可选bevel，是一个平角，类似于将miter切掉
    // 仅对于一体的绘制生效，如path和矩形等
    ..strokeJoin = StrokeJoin.bevel
    // 尖角的长度限制，超过长度后会自动变成bevel平角
    ..strokeMiterLimit = 5
    // 反转颜色
    ..invertColors = true;

class MyPainter extends CustomPainter {
  final int _index;
  MyPainter(this._index);

  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..isAntiAlias = true;
    double quarter = size.width / 4;
    // 新建图层，并绘制一个蓝色的矩形，该图层作为dst
    canvas.saveLayer(Offset.zero & size, paint);
    canvas.drawRect(Rect.fromLTRB(0, 0, quarter * 3, quarter * 3), paint..color = Colors.blue);
    // 新建图层，并绘制一个红色的矩形，该图层作为src。注意该图层设置了blendMode
    canvas.saveLayer(
      Offset.zero & size,
      Paint()..blendMode = BlendMode.values[_index],
    );
    canvas.drawRect(Rect.fromLTRB(quarter, quarter, size.width, size.height), paint..color = Colors.red);
    // 恢复图层
    canvas.restoreToCount(2);
  }

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

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 10,
          ),
          itemBuilder: (_, index) {
            return Container(
              decoration: BoxDecoration(border: Border.all(width: 1)),
              child: CustomPaint(
                painter: MyPainter(index),
                child: Text(BlendMode.values[index].name),
              ),
            );
          },
          itemCount: BlendMode.values.length,
          padding: EdgeInsets.all(15),
        ),
      ),
    );
}

// 水平渐变
Gradient.linear(
    Offset from,// 起始位置
    Offset to, // 结束位置
    List<Color> colors, [ // 渐变的几种颜色
    List<double>? colorStops,// 每种颜色开始的位置，取值0~1之间，表示的是进度
    // clamp: 终点颜色延伸
    // repeated：再次应用渐变
    // mirror：镜像渐变
    // decal: 不着色
    TileMode tileMode = TileMode.clamp,// 超出渐变范围的模式
    Float64List? matrix4,
])

// 雷达样式渐变，从中心往外渐变
Gradient.radial(
    Offset center,// 中心坐标
    double radius,// 渐变的半径
    List<Color> colors, [ 
    List<double>? colorStops,
    TileMode tileMode = TileMode.clamp,
    Float64List? matrix4,
    Offset? focal,
    double focalRadius = 0.0,
])
  // 扫描样式渐变
  Gradient.sweep(
    Offset center,
    List<Color> colors, [ 
    List<double>? colorStops,
    TileMode tileMode = TileMode.clamp,
    double startAngle = 0.0,// 起始角度
    double endAngle = math.pi * 2, // 终止角度
    Float64List? matrix4,
])

// 需要起个别名
import 'dart:ui' as ui;

Paint paint = Paint()
  ..isAntiAlias = true
  ..shader = ui.Gradient.linear(Offset(0, 0), Offset(50, 50), [
    Colors.blue,
    Colors.green,
  ]);

// 绘制颜色，通常是绘制背景。注意需要先saveLayer，否则会将整个屏幕都绘制颜色
void drawColor(Color color, BlendMode blendMode);
// 绘制颜色，和drawColor效果一样，也需要先saveLayer
void drawPaint(Paint paint);
// 绘制横线，起始点和终止点确定直线
void drawLine(Offset p1, Offset p2, Paint paint);
// 绘制矩形
void drawRect(Rect rect, Paint paint);
// 绘制圆角矩形
void drawRRect(RRect rrect, Paint paint);
// 绘制同心圆角矩形
void drawDRRect(RRect outer, RRect inner, Paint paint);
// 绘制一个椭圆，实际上和绘制圆角矩形差不多
void drawRSuperellipse(RSuperellipse rsuperellipse, Paint paint);
// 绘制椭圆
void drawOval(Rect rect, Paint paint);
// 绘制圆形，给定中心点和半径
void drawCircle(Offset c, double radius, Paint paint);
// 绘制圆弧
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint);
// 绘制路径
void drawPath(Path path, Paint paint);
// 绘制图片
void drawImage(Image image, Offset offset, Paint paint);
void drawImageRect(Image image, Rect src, Rect dst, Paint paint);
void drawPicture(Picture picture);
// 绘制文字段落
void drawParagraph(Paragraph paragraph, Offset offset);

ui.ParagraphBuilder builder = ui.ParagraphBuilder(ui.ParagraphStyle());

ParagraphStyle({
    TextAlign? textAlign,// 对齐方式
    TextDirection? textDirection, // RTL or LTR
    int? maxLines,// 最大行数
    String? fontFamily,// 字体
    double? fontSize,// 字体大小
    double? height,// 高度
    TextHeightBehavior? textHeightBehavior,// 控制高度如何显示
    FontWeight? fontWeight,// 字重
    FontStyle? fontStyle,//斜体
    StrutStyle? strutStyle,// .
    String? ellipsis,// 超出限制的占位符，通常是...
    Locale? locale,// 语言
})

// 入栈文本样式
void pushStyle(TextStyle style);
// 出栈文本样式
void pop();
// 添加文本，文本的样式由栈顶的TextStyle控制
void addText(String text);

// 构建builder
ui.ParagraphBuilder builder = ui.ParagraphBuilder(ui.ParagraphStyle(
  textAlign: TextAlign.left,
  fontSize: 30
));

// 添加文本样式
builder.pushStyle(ui.TextStyle(color: Colors.red));
// 添加文本
builder.addText('hello');
// 构建Paragraph
ui.Paragraph paragraph =  builder.build();
// 绘制前需要layout布局
paragraph.layout(ui.ParagraphConstraints(width: size.width));
// 最后才能进行绘制
canvas.drawParagraph(paragraph, Offset.zero);