【Flutter】【基础】CustomPaint 绘画功能，绘制各种图形（二）

CustomPaint

使用实例和代码：

1.canvas.drawColor 绘制背景颜色

class MyPainter1 extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {//绘制背景颜色，整个UI 现在就是红色的canvas.drawColor(Colors.red, BlendMode.srcATop);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}

2.canvas.drawCircle 绘制圆

    final whitePaint = Paint()..color = Colors.red;//offset 位置，半径canvas.drawCircle(const Offset(100, 100), 100, whitePaint);

3.canvas.drawRect绘四边形

    //绘制四边形final redPaint = Paint()..color = Colors.red;// left:距离左边的距离, top：距离右边的距离, width, heightcanvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), redPaint);//center 中心点的位置， 宽高，canvas.drawRect(Rect.fromCenter(center: Offset(50, 50), width: 100, height: 100),redPaint);//radius 半径canvas.drawRect(Rect.fromCircle(center: const Offset(50, 50), radius: 50), redPaint);canvas.drawRect(Rect.fromPoints(const Offset(50, 50), Offset(100, 100)), redPaint);

4.canvas.drawRRect 绘制圆角矩形

其他的方法可以自行尝试，参数大同小异

// left, top, right, bottom, radiuscanvas.drawRRect(RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(20)), redPaint);
//可以设定不同边角弧度的canvas.drawRRect(RRect.fromLTRBAndCorners(100, 100, 200, 200,topLeft: const Radius.circular(20)),redPaint);

5.canvas.drawRRect 嵌套绘制

canvas.drawDRRect(RRect.fromLTRBR(100, 100, 300, 300, const Radius.circular(20)),RRect.fromLTRBR(150, 150, 200, 200, const Radius.circular(20)),redPaint);

6.canvas.drawOval 绘制椭圆形

//椭圆形canvas.drawOval(Rect.fromLTRB(100, 80, 400, 300), redPaint);

7.canvas.drawPath 绘制路径

    final redPaint = Paint()..color = Colors.red..strokeWidth = 2.0..style = PaintingStyle.stroke;// final path = Path()//   ..moveTo(100, 100) //起始点//   ..lineTo(200, 200) //链接到点//   ..lineTo(400, 400) //链接到点//   ..close(); //关闭// canvas.drawPath(path, redPaint);final path1 = Path()..moveTo(400, 400) //起始点..lineTo(400, 500) //链接到点..lineTo(400, 400) //链接到点..addRect(Rect.fromLTRB(500, 500, 100, 100)) //新增一个矩形，或者其他的也可以..close(); //关闭//或者在这边添加也可以// path1.addRect(Rect.fromLTRB(500, 500, 100, 100));// path1.close();canvas.drawPath(path1, redPaint);