flutter 画布 canvas(一)

flutter 的canvas的操作和js 的差不多，简单看一下flutter中怎么使用canvas 吧

画笔 paint

paint 画笔决定你的绘画的线条的粗细，颜色，风格，抗锯齿，笔触等等

Paint的属性

1. color // 画笔颜色
2. strokeWidth // 画笔线宽
3. strokeCapd // 画笔笔触类型
4. isAntiAlias = true // 是否抗锯齿
5. style // 绘画风格
6. BlendMode // 颜色混合模式
7. strokeJoin // 线段之间的连接上的饰面类型。
8. maskFilter = MaskFilter.blur(BlurStyle.inner,3.0) // 遮罩过滤器（例如，模糊），用于在绘制形状之后但在将其合成到图像中之前应用于该形状。
9. filterQuality // 颜色渲染模式质量

属性还是挺多的，知道就好了。

CustomPaint() 自定义绘制 widget.

CustomPaint({
    super.key,
    this.painter, // 类型 CustomPainter，会画在childern 的前面  
    this.foregroundPainter, // 类型 CustomPainter，画在childern的后面  
    this.size = Size.zero, // 画板尺寸，在没有child的情况下，会按照布局的大小，默认是Size.zero，如果有子项，则忽略此项，而使用子项的大小。
    this.isComplex = false, // 绘画是否足够复杂以从缓存中获益。
    this.willChange = false, // 是否应告知光栅缓存此绘画可能在下一帧中发生更改
    super.child,
  }) 

CustomPainter()

CustomPainter是一个抽象类，看一下它的构造方法，

const CustomPainter({ Listenable? repaint }) : _repaint = repaint; 抽象并不能直接调用构造方法创建，需要继承抽象类，实现抽象类的抽象方法。CustomPainter类 有两个抽象方法

1. void paint(Canvas canvas, Size size) { } // 绘画方法
2. bool shouldRepaint(covariant CustomPainter oldDelegate) { } // 是否重新绘制

画布 Canvas的方法

1. void drawLine( Offset p1, Offset p2, Paint paint, ) // 画线
2. void translate(double dx, double dy); // 平移
3. void scale(double sx, [double? sy])； // 放大缩小
4. void rotate(double radians); // 旋转
5. void skew(double sx, double sy); // 歪曲
6. void transform(Float64List matrix4); // 变换
7. void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true }) // 剪切成一个长方形，
8. void clipRRect(RRect rrect, {bool doAntiAlias = true}) // 剪切成一个圆角的长方形
9. void clipPath(Path path, {bool doAntiAlias = true}) // 按照路径进行剪切
10. void drawColor(Color color, BlendMode blendMode) // 使用纯色填充画布
11. void drawPaint(Paint paint) // 用给定的[Paint]填充画布。
12. void drawRect(Rect rect, Paint paint) // 画个长方形
13. void drawRRect(RRect rrect, Paint paint) // 圆角长方形
14. void drawDRRect(RRect outer, RRect inner, Paint paint) //
15. void drawOval(Rect rect, Paint paint) // 画椭圆
16. void drawCircle(Offset c, double radius, Paint paint) // 画圆
17. void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) // 圆弧
18. void drawPath(Path path, Paint paint) // 路径
19. void drawImage(Image image, Offset offset, Paint paint) // 图片

使用

class MYCanvas extends StatefulWidget {
  const MYCanvas({super.key});

  @override
  State<MYCanvas> createState() => _MYCanvasState();
}

class _MYCanvasState extends State<MYCanvas> {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(),
      child: SizedBox.expand(),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
                        ..color = Colors.red // 颜色
                        ..strokeWidth = 5.0 // 线宽
                        ..strokeCap = StrokeCap.round // 画笔笔触类型
                        ..isAntiAlias = true // 抗锯齿
                        ..style = PaintingStyle.fill; // 风格
    canvas.drawLine(Offset(20.0,20.0), Offset(60, 20), paint);

    canvas.drawPoints(PointMode.polygon , [
      Offset(30, 30),
      Offset(50, 50),
      Offset(30, 70),
      Offset(90, 70),
      Offset(70, 50),
      Offset(90, 30)
    ], paint);
  }

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

}