Flutter之Canvas和Paint

class DrawLinePainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black //画笔颜色
    ..strokeCap = StrokeCap.square //画笔笔触类型
    ..isAntiAlias = true //抗锯齿
    ..style = PaintingStyle.fill //画笔样式，默认是填充
    ..strokeWidth = 5; //画笔粗细

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

  //重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset(20.0, 20.0), Offset(100.0, 20.0), _paint);
  }

}

class DrawCirclePainter extends CustomPainter {

  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke
    ..strokeCap = StrokeCap.round;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(50.0, 50.0), 40.0, _paint);
  }

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

}

class DrawOvalPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke
    ..strokeWidth = 3.0;

  @override
  void paint(Canvas canvas, Size size) {
//    Rect.fromPoints 使用左上角坐标和右下角坐标确定
    var rect = Rect.fromPoints(Offset(100, 100), Offset(300, 200));
//    Rect.fromLTRB使用左上角坐标和右下角坐标
//    var rect = Rect.fromLTRB(100.0, 100.0, 300.0, 200.0);
//    使用左上角坐标和宽、高确定
//    var rect = Rect.fromLTWH(100.0, 100.0, 200.0, 100.0);
//    使用圆中心坐标和半径确定圆，然后获取外切矩形
//    var rect = Rect.fromCircle(center: Offset(200.0, 150.0), radius: 50.0);

    //用矩形来限制椭圆的大小，椭圆为矩形的内切图形
    canvas.drawOval(rect, _paint);
  }

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

}

class DrawRRectPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 3.0
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Rect.fromPoints(Offset(100.0, 100.0), Offset(250.0, 250.0));
    //把矩形转成圆角矩形
    var rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

    canvas.drawRRect(rRect, _paint);
  }

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

}

class DrawDRRectPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 3.0
    ..isAntiAlias = true
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    //需要先画大的，再画小的
    var rect1 = Rect.fromCircle(center: Offset(150, 150.0), radius: 70.0);
    var rect2 = Rect.fromCircle(center: Offset(150.0, 150.0), radius: 50.0);

    var rRect1 = RRect.fromRectAndRadius(rect1, Radius.circular(20.0));
    var rRect2 = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));
    //画嵌套矩形
    canvas.drawDRRect(rRect1, rRect2, _paint);
  }

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

}

class DrawPointsPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 20.0
    ..isAntiAlias = true
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    //PointMode.points 点
    //PointMode.lines 隔点连接线线
    //PointMode.polygon 相邻连接线线
    canvas.drawPoints(
        PointMode.polygon,
        [
          Offset(20.0, 20.0),
//          Offset(50.0, 50.0),
//          Offset(80.0, 80.0),

          Offset(80.0, 40.0),
          Offset(110.0, 110.0),
          Offset(150.0, 200.0),
        ],
        _paint);
  }

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

}

class DrawArcPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 2.0
    ..isAntiAlias = true
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    const PI = 3.1415926;
    var rect1 = Rect.fromCircle(center: Offset(70, 70), radius: 100);
    canvas.drawArc(rect1, 0, PI / 2, true, _paint);
    var rect2 = Rect.fromCircle(center: Offset(200, 200), radius: 80);
    canvas.drawArc(rect2, 0, PI, true, _paint);
  }

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

}

class DrawPathPainter extends CustomPainter {
  var _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 2.0
    ..isAntiAlias = true
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.moveTo(100.0, 100.0);
    path.lineTo(200, 250);
    path.lineTo(300, 280);
    path.lineTo(250, 100);
    canvas.drawPath(path, _paint);
  }

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

}

body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  child: SizedBox(
                    width: 500.0,
                    height: 300.0,
                    child: CustomPaint(
                      painter: painter,
                    ),
                  ),
                ),
                MyRowText("画线", () =>
                    setState(() {
                      painter = DrawLinePainter();
                    })
                ),
                MyRowText("画圆", () =>
                    setState(() {
                      painter = DrawCirclePainter();
                    })
                ),
                MyRowText("画椭圆", () =>
                    setState(() {
                      painter = DrawOvalPainter();
                    })
                ),
                MyRowText("画圆角矩形", () =>
                    setState(() {
                      painter = DrawRRectPainter();
                    })
                ),
                MyRowText("画双矩形", () =>
                    setState(() {
                      painter = DrawDRRectPainter();
                    })
                ),
                MyRowText("画点", () =>
                    setState(() {
                      painter = DrawPointsPainter();
                    })
                ),
                MyRowText("画扇形", () =>
                    setState(() {
                      painter = DrawArcPainter();
                    })
                ),
                MyRowText("画路径", () =>
                    setState(() {
                      painter = DrawPathPainter();
                    })
                ),
              ],
            ),
          )