Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle

最新推荐文章于 2024-04-08 01:10:40 发布

️ 邪神

最新推荐文章于 2024-04-08 01:10:40 发布

阅读量5.5k

点赞数 54

本文链接：https://blog.csdn.net/u013491829/article/details/108311427

版权

天才出于勤奋。——高尔基

CustomPaint(
            size: Size(300, 300), //指定画布大小
            painter: MyPainter(),
          ),

drawCircle(Offset c, double radius, Paint paint)（绘制圆）

c	相对于圆点偏移量
radius	半径
paint	画笔

PaintingStyle.fill（用画笔填充绘制）

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);
    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2.5, paint..color=Colors.red);
    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/4, paint..color=Colors.deepPurpleAccent);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint);
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint..color=Colors.deepPurpleAccent);
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint..color=Colors.deepOrange);
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint..color=Colors.amber);
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint..color=Colors.blue);
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.purple);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.red
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint..color=Colors.red.withOpacity(0.1));
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint..color=Colors.red.withOpacity(0.14));
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint..color=Colors.red.withOpacity(0.18));
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint..color=Colors.red.withOpacity(0.22));
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint..color=Colors.red.withOpacity(0.26));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.30));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.34));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.38));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.42));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.46));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.46));
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

PaintingStyle.fill（用画笔绘制边框）

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);
    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2.5, paint..color=Colors.red);
    canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/4, paint..color=Colors.deepPurpleAccent);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke
      ..color = Colors.green
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint);
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint..color=Colors.deepPurpleAccent);
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint..color=Colors.deepOrange);
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint..color=Colors.amber);
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint..color=Colors.blue);
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.purple);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke
      ..color = Colors.red
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/2, size.height/6), size.width/6, paint..color=Colors.red.withOpacity(0.1));
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.4), size.width/6, paint..color=Colors.red.withOpacity(0.14));
    canvas.drawCircle(Offset(size.width/2, size.height/6*1.8), size.width/6, paint..color=Colors.red.withOpacity(0.18));
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.2), size.width/6, paint..color=Colors.red.withOpacity(0.22));
    canvas.drawCircle(Offset(size.width/2, size.height/6*2.6), size.width/6, paint..color=Colors.red.withOpacity(0.26));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.30));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.34));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.38));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.42));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.46));
    canvas.drawCircle(Offset(size.width/2, size.height/6*3.0), size.width/6, paint..color=Colors.red.withOpacity(0.46));
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

奥运5环

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke
      ..color = Colors.red
      ..invertColors = false;

    canvas.drawCircle(Offset(size.width/6, size.height/4), size.width/6, paint..color=Colors.indigo);
    canvas.drawCircle(Offset(size.width/6*3.2, size.height/4), size.width/6, paint..color=Colors.black);
    canvas.drawCircle(Offset(size.width/6*5.4, size.height/4), size.width/6, paint..color=Colors.red);
    canvas.drawCircle(Offset(size.width/6*2.2, size.height/4*1.8), size.width/6, paint..color=Colors.orange);
    canvas.drawCircle(Offset(size.width/6*4.4, size.height/4*1.8), size.width/6, paint..color=Colors.green);

  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

️ 邪神

关注

54
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
26
评论
Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle

CustomPaint( size: Size(300, 300), //指定画布大小 painter: MyPainter(), ),drawCircle(Offset c, double radius, Paint paint)（绘制圆）c 相对于圆点偏移量 radius 半径 paint 画笔 PaintingStyle.fill（用...
复制链接

扫一扫