Flutter绘画实例(一)

我就是我 2022-12-25 01:54 204阅读 0赞

### 一，概述 ###

*  **画布**（**Canvas**）
    
    画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容
    
    **Canvas** 拥有多种**绘制点**、**线**、**路径**、**矩形**、**圆形**、以及**添加图像**等的方法，结合这些方法我们可以绘制出千变万化的画面。
    
    **Canvas**中有多个与绘制相关的方法，如**drawLine()**、**drawRect()**、**drawOval()**、**drawOval()**、等方法。

*  **画笔**（**Paint**）
    
    虽然，画布可以画**点**，**线**，**路径**，**矩形**，**圆形**等，但是决定这些图形**颜色**、**粗细**表现的还是画笔  
    Paint非常好理解，就是我们用来画图形的工具，我们可以设置画笔的**颜色**、**粗细**、是否**抗锯齿**、**笔触形状**以及**作画风格**。
    
    通过这些属性我们可以很方便的来定制自己的UI效果，当然我们在“作画”的过程中可以定义多个画笔，这样更方便我们对图形的绘制
    
    画笔**Paint**的属性：
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        ///[定义画笔]
          Paint _paint = Paint()
          ..color = Colors.blueAccent //画笔颜色
          ..strokeCap = StrokeCap.round//画笔笔触类型
          ..isAntiAlias = true //是否启动抗锯齿
          ..blendMode = BlendMode.exclusion//颜色混合模式
          ..style = PaintingStyle.fill //绘画风格，默认为填充
          ..colorFilter = ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)///颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
          ..maskFilter = MaskFilter.blur(BlurStyle.inner,3.0)//模糊遮罩效果
          ..filterQuality = FilterQuality.high //颜色渲染模式质量
          ..strokeWidth = 15.0; //画笔的宽度
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

### 二，绘制实例 ###

*  自定义组件
    
    　　Flutter中如果想要自定义绘制，那么你需要用到 CustomPaint 和 CustomPainter ;  CustomPaint是Widget的子类。
    
     *  构造方法
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            const CustomPaint({
                Key key,
                this.painter,
                this.foregroundPainter,
                this.size = Size.zero,
                this.isComplex = false,
                this.willChange = false,
                Widget child,
              }) :super(key: key, child: child);
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
        　　我们只需要关心三个参数，**painter**，**foregroundPainter** 和 **child**  ， 这里需要说明一下，**painter** 是绘制的 **backgroud** 层，而**child** 是在**backgroud**之上绘制，**foregroundPainter** 是在 **child** 之上绘制，所以这里就有了个层级关系，这跟**android**里面的**backgroud**与**foreground**是一个意思，那这两个**painter**的应用场景是什么呢？假如你只是单纯的想绘制一个**图形**，只用**painter**就可以了，但是如果你想给绘制区域添加一个背景（**颜色**，**图片**，等等），这时候如果使用 **painter**是会有问题的，**painter**的绘制会被**child** 层覆盖掉，此时你只需要将**painter**替换成**foregroundPainter**,然会颜色或者图片传递给**child**即可。
        
              如果是**Android**绘制几何图形，应该是重写**View**的**onLayout()** 和 **onDraw**方法，但是**Flutter**实现绘制，必须继承**CustomPainter**并重写 **paint**（**Canvas****canvas**, **Size size**）和 **shouldRepaint** (**CustomPainter****oldDelegate**) 方法 ，第一个参数**canvas**就是我们绘制的画布了（跟**Android**一模一样），**paint**第二个参数**Size**就是上面**CustomPaint**构造方法传入的**size**, 决定绘制区域的宽高信息
        
               既然**Size**已经确定了，现在就定义下绘制区域的边界,一般我做类似的UI，都会定义一个最基本的**padding**, 一般取值为**16** ， 因为绘制的内容与坐标轴之间需要找到一个基准线，这样更容易绘制，而且调试边距也很灵活
     *  工程构建
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            import 'package:flutter/material.dart';
            
            void main() => runApp(MyApp());
            
            class MyApp extends StatelessWidget {
              @override
              Widget build(BuildContext context) {
                return MaterialApp(
                  title: 'Flutter Demo',
                  theme: ThemeData(
                    primarySwatch: Colors.blue,
                  ),
                  home: MyHomePage(title: 'Painter绘制直线'),
                );
              }
            }
            
            class MyHomePage extends StatefulWidget {
              MyHomePage({Key key, this.title}) : super(key: key);
              final String title;
        
            @override
              _MyHomePageState createState() => _MyHomePageState();
            }
            
            class _MyHomePageState extends State<MyHomePage> {
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    title: Text(widget.title),
                  ),
                  body: Center(
                    child: CustomPaint(
                      size: Size(300, 300),
                      painter:MyPainter() ,
                    ),
                  )
                );
              }
            }
            
            class MyPainter extends CustomPainter {
              ///[定义画笔]
              Paint _paint = Paint()
              ..color = Colors.blueAccent //画笔颜色
              ..strokeCap = StrokeCap.round//画笔笔触类型
              ..isAntiAlias = true //是否启动抗锯齿
              ..style = PaintingStyle.fill //绘画风格，默认为填充
              ..strokeWidth = 5.0; //画笔的宽度
            
              @override
              void paint(Canvas canvas, Size size) {
                 canvas.drawLine(Offset(20, 20), Offset(100,100), _paint);
              }
            
              @override
              bool shouldRepaint(CustomPainter oldDelegate) {
                return null;
              }
            }
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
 *  定义画笔
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        ///[定义画笔]
          Paint _paint = Paint()
          ..color = Colors.blueAccent //画笔颜色
          ..strokeCap = StrokeCap.round//画笔笔触类型
          ..isAntiAlias = true //是否启动抗锯齿
          ..style = PaintingStyle.fill //绘画风格，默认为填充
          ..strokeWidth = 5.0; //画笔的宽度
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
 *  内容绘制
    
     *  绘制直线（drawLine）
        
        使用给定的涂料在给定点之间绘制一条线。 该行被描边，此调用忽略\[Paint.style\]的值。`p1`和`p2`参数为两个点的坐标 , 在这两点之间绘制一条直线。
        
         *  系统方法
            
                void drawLine(Offset p1, Offset p2, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
            class MyPainter extends CustomPainter \{
            
            ///\[定义画笔\]
            
            Paint \_paint = Paint()
            
            ..color = Colors.blueAccent //画笔颜色
            
            ..strokeCap = StrokeCap.round//画笔笔触类型
            
            ..isAntiAlias = true //是否启动抗锯齿
            
            ..style = PaintingStyle.fill //绘画风格，默认为填充
            
            ..strokeWidth = 5.0; //画笔的宽度
            
             
            
            @override
            
            void paint(Canvas canvas, Size size) \{
            
             canvas.drawLine(Offset(20, 20), Offset(100,100), \_paint);
            
            \}
            
             
            
            @override
            
            bool shouldRepaint(CustomPainter oldDelegate) \{
            
            return null;
            
            \}
            
            \}
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  效果示例  
             
            
            ![26606c9cf405f69637d20e89a5fc1b2a.png][]
     *  绘制点（drawPoints）
        
        绘制点也是非常的简单，3个参数分别为: PointMode枚举，坐标 list 和 paint。PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）
        
         *  系统方法
            
                void drawPoints(PointMode pointMode, List points, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.fill //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                    ///PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）
                     canvas.drawPoints(
                       PointMode.points,
                       [
                         Offset(20.0,  40.0),
                         Offset(100.0, 120.0),
                         Offset(100.0, 220.0),
                         Offset(200.0, 220.0),
                         Offset(200.0, 120.0),
                         Offset(280.0, 40.0),
                         Offset(20,    40.0),
                       ], 
                       _paint
                       );
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  示例
            
             *  PointMode改为points
                
                 *  示例效果图  
                    ![9f1abcbe3b4bd3b3a4ac9a9da7c05295.png][]
             *  PointMode改为polygon  
                PointMode改为polygon，相邻点互相连接
                
                 *  示例效果  
                    ![c924f903c12e53050d0f7ec7a796aa76.png][]
             *  PointMode改为lines。  
                PointMode为lines时，两个点相互连接，也就是说第一个和第二个点连接，第三个跟第四个连接，如果最后只有一个点就舍弃不连接了，在我们的例子中有7个点，所以图中只有三条连线。
                
                 *  示例效果  
                      
                    ![685532084d8d97a882b5871014fd31df.png][]
     *  绘制圆rawCircle
        
        参数分别为:圆心的坐标、半径和paint即可。圆形是否填充或描边(或两者)由`Paint.style`控制。
        
         *  系统方法
            
                void drawCircle(Offset c, double radius, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.stroke //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                    //绘制圆 参数(圆心，半径，画笔)
                    canvas.drawCircle(Offset(140,80), 80,_paint..color = Colors.green);
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  示例　
            
             *  PaintStyle.stroke 不填充
                
                ..style = PaintingStyle.stroke //绘画风格，默认为不填充
                
                 *  示例效果　　
                    
                    ![3f47d4ca96bba641b619f1e976a55ea9.png][]
             *  PaintStyle.stroke 填充
                
                将画笔Paint的style改成了stroke，然后我们将画笔style改成fill (填充) ,fill也是画笔的style的默认值
                
                 
                
                 *  示例效果　　  
                    ![e57360b7aace38f60e0fd41a2428cd25.png][]
     *  绘制椭圆drawOval
        
        绘制一个轴对称的椭圆形，参数为一个矩形和画笔paint.
        
         *  系统方法
            
                void drawOval(Rect rect, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.fill //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                    //使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的
                    Rect rect = Rect.fromPoints(Offset(100.0, 40.0), Offset(220.0, 100.0));
                    canvas.drawOval(rect, _paint..color=Colors.green);
                  }
            
            \}
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  示例  
            Rect也有多种构建方式
            
             *  fromLTWH(double left, double top, double width, double height)  
                使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
                
                 *  使用方法
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            //使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
                            Rect rect = Rect.fromLTWH(100, 20, 100, 60);
                            canvas.drawOval(rect, _paint..color=Colors.green);
                          }
                 *  示例效果  
                    ![e271d28acf1b06fc7230dee53197bd8e.png][]
             *  fromLTRB(double left, double top, double right, double bottom)  
                使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
                
                 *  使用方法
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            //使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
                            Rect rect = Rect.fromLTRB(30, 30, 160, 140);
                            canvas.drawOval(rect, _paint..color=Colors.green);
                          }
                 *  示例效果  
                    ![691b05510214a70a25d7d36419607c91.png][]
             *  fromCircle(\{ Offset center, double radius \})  
                使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
                
                 *  使用方法
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            //使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
                            Rect rect = Rect.fromCircle(center: Offset(100, 40),radius: 60);
                            canvas.drawOval(rect, _paint..color=Colors.green);
                          }
                 *  示例效果  
                    ![d66f00cf95f199be74ffc0a86176cff3.png][]
             *  fromPoints(Offset a, Offset b)  
                使用左上和右下角坐标来确定矩形的大小和位置
                
                 *  使用方法
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            //使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的
                            Rect rect = Rect.fromPoints(Offset(100.0, 40.0), Offset(220.0, 100.0));
                            canvas.drawOval(rect, _paint..color=Colors.green);
                          }
                 *  示例效果  
                    ![a983131d9d0e18868e20bf57bfb36172.png][]
     *  绘制圆弧drawArc
        
        首先还是需要Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制(圆弧是否向中心闭合)、以及paint.
        
         *  系统方法
            
                void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.fill //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                    // Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
                    Rect rect = Rect.fromCircle(center: Offset(100, 40),radius:80);
                    canvas.drawArc(rect,0.0,0.8,false,_paint);
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  拓展
            
             *  弧度  
                根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17’44.806’’，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。
             *  特殊弧度
                
                <table> 
                 <thead> 
                  <tr> 
                   <th>度</th> 
                   <th>弧度</th> 
                  </tr> 
                 </thead> 
                 <tbody> 
                  <tr> 
                   <td>0°</td> 
                   <td>0</td> 
                  </tr> 
                  <tr> 
                   <td>30°</td> 
                   <td>π/6</td> 
                  </tr> 
                  <tr> 
                   <td>45°</td> 
                   <td>π/4</td> 
                  </tr> 
                  <tr> 
                   <td>60°</td> 
                   <td>π/3</td> 
                  </tr> 
                  <tr> 
                   <td>90°</td> 
                   <td>π/2</td> 
                  </tr> 
                  <tr> 
                   <td>120°</td> 
                   <td>2π/3</td> 
                  </tr> 
                  <tr> 
                   <td>180°</td> 
                   <td>π</td> 
                  </tr> 
                  <tr> 
                   <td>270°</td> 
                   <td>3π/2</td> 
                  </tr> 
                  <tr> 
                   <td>360°</td> 
                   <td>2π</td> 
                  </tr> 
                 </tbody> 
                </table>
                
                 *  使用方法
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            // Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
                            const PI = 3.1415926;
                            Rect rect2 = Rect.fromCircle(center: Offset(200.0, 50.0), radius: 80.0);
                            canvas.drawArc(rect2, 0.0, PI / 2, false, _paint);
                          }
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                 *  示例效果  
                    ![cb499f8d4ce0f8b41f8a94e2e66604f1.png][]
             *  圆弧向中心点闭合  
                将useCenter改成true，圆弧向中心点闭合了
                
                 *  使用方法
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                            // Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
                            const PI = 3.1415926;
                            Rect rect2 = Rect.fromCircle(center: Offset(100.0, 50.0), radius: 80.0);
                            canvas.drawArc(rect2, 0.0, PI / 2, true, _paint);
                          }
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                 *  示例效果  
                    ![f488920ffd31b6b679244470b915447e.png][]
     *  绘制圆角矩形drawDRRect
        
        使用RRect确定矩形大小及弧度，使用paint来完成绘制。RRect构建起来也非常的方便，直接使用fromRectAndRadius即可
        
         *  系统方法  
            RRect构建
            
                RRect.fromRectAndRadius(rect, radius)
            
            RRect确定矩形大小及弧度，使用paint来完成绘制
            
                void drawRRect(RRect rrect, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.stroke //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                     //用Rect构建一个边长50,中心点坐标为100,100的矩形
                    Rect rect = Rect.fromCircle(center: Offset(140.0, 50.0), radius: 50.0);
                    //根据上面的矩形,构建一个圆角矩形
                    RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
                    canvas.drawRRect(rrect, _paint);
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  示例
            
             *  rect依然用来表示矩形的位置和大小，radius用来表示圆角的大小
                
                 *  使用方法
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                             //用Rect构建一个边长50,中心点坐标为100,100的矩形
                            Rect rect = Rect.fromCircle(center: Offset(140.0, 50.0), radius: 50.0);
                            //根据上面的矩形,构建一个圆角矩形
                            RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
                            canvas.drawRRect(rrect, _paint);
                          }
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                 *  示例效果  
                    ![1288e175598a3aa26887f7c5d5dd3899.png][]
             *  将圆角的半径设置为边长(从20改成50)
                
                 *  使用方法
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                             //用Rect构建一个边长50,中心点坐标为100,100的矩形
                            Rect rect = Rect.fromCircle(center: Offset(140.0, 50.0), radius: 50.0);
                            //根据上面的矩形,构建一个圆角矩形
                            RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(50.0));
                            canvas.drawRRect(rrect, _paint);
                          }
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                 *  示例效果  
                    ![6fe17a6c950956f6d602a6ee641ef099.png][]
     *  绘制双圆角矩形drawRRect
        
        和drawRRect类似，使用RRect确定内部、外部矩形大小及弧度，使用paint来完成绘制。
        
         *  系统方法
            
                void drawDRRect(RRect outer, RRect inner, Paint paint)
         *  使用方法  
            使用Rect.fromCircle来创建Rect，使用RRect.fromRectAndRadius来创建RRect
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.stroke //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                      
                   //绘制两个矩形
                    Rect rect1 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 60.0);
                    Rect rect2 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 40.0);
                
                    //分别绘制外部圆角矩形和内部的圆角矩形
                    RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(10.0));
                    RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));
                    canvas.drawDRRect(outer, inner, _paint);
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
         *  示例
            
             *  示例效果  
                ![3b2f958261aaa223b8d83e62f8679787.png][]
             *  尝试调整角度的度数大小
                
                 *  使用方法
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                    
                        @override
                          void paint(Canvas canvas, Size size) {
                              
                           //绘制两个矩形
                            Rect rect1 = Rect.fromCircle(center: Offset(150.0, 40.0), radius: 60.0);
                            Rect rect2 = Rect.fromCircle(center: Offset(150.0, 40.0), radius: 40.0);
                        
                            //分别绘制外部圆角矩形和内部的圆角矩形
                            RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(30.0));
                            RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));
                            canvas.drawDRRect(outer, inner, _paint);
                          }
                    
                    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                 *  示例效果  
                    ![e81c366971f645ee1564d5928cc00769.png][]
     *  绘制路径drawPath
        
        绘制路径，首先需要一个要绘制的路径path，然后就是这个paint了。
        
        Path的常用方法：
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            方法名            作用
            moveTo    将路径起始点移动到指定的位置
            relativeMoveTo    相对于当前位置移动到
            lineTo    从当前位置连接指定点
            relativeLineTo    相对当前位置连接到
            arcTo    曲线
            conicTo    贝塞尔曲线
            add**    添加其他图形，如addArc，在路径是添加圆弧
            contains    路径上是否包括某点
            transfor    给路径做matrix4变换
            combine    结合两个路径
            close    关闭路径，连接路径的起始点
            reset    重置路径，恢复到默认状态
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
         *  系统方法
            
                void drawPath(Path path, Paint paint)
         *  使用方法
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
                class MyPainter extends CustomPainter {
                  
                  ///[定义画笔]
                  Paint _paint = Paint()
                  ..color = Colors.blueAccent //画笔颜色
                  ..strokeCap = StrokeCap.round//画笔笔触类型
                  ..isAntiAlias = true //是否启动抗锯齿
                  ..style = PaintingStyle.stroke //绘画风格，默认为填充
                  ..strokeWidth = 5.0; //画笔的宽度
                
                  @override
                  void paint(Canvas canvas, Size size) {
                      
                   //新建了一个path,然后将路径起始点移动到坐标(100,100)的位置
                    Path path = new Path()..moveTo(100.0, 100.0);
                    path.lineTo(200.0, 200.0);
                    canvas.drawPath(path, _paint);
                  }
                
                  @override
                  bool shouldRepaint(CustomPainter oldDelegate) {
                    return null;
                  }
                }
            
            ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
            
             *  示例
                
                 *  绘制直线　　  
                    首先新建了一个path,然后将路径起始点移动到坐标(100,100)的位置,  
                    然后从这个位置连接(200,200)的点.
                    
                     *  使用方法
                        
                        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                        
                            @override
                              void paint(Canvas canvas, Size size) {
                                  
                               //新建了一个path,然后将路径起始点移动到坐标(100,100)的位置
                                Path path = new Path()..moveTo(100.0, 100.0);
                                path.lineTo(200.0, 200.0);
                                canvas.drawPath(path, _paint);
                              }
                        
                        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                     *  效果图  
                        ![81cdae5bce801687752717eb198daa1e.png][]
                 *  绘制多个路径
                    
                     *  使用方法
                        
                        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                        
                            @override
                              void paint(Canvas canvas, Size size) {
                                  
                               Path path = new Path()..moveTo(100.0, 100.0);
                            
                                path.lineTo(200.0, 200.0);
                                path.lineTo(100.0, 300.0);
                                path.lineTo(150.0, 350.0);
                                path.lineTo(150.0, 500.0);
                                
                                canvas.drawPath(path, _paint);
                              }
                        
                        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
                     *  示例效果  
                        ![037505416d2f63a4650061f2d1ee0f14.png][]

参看：[https://www.cnblogs.com/Free-Thinker/p/10218829.html][https_www.cnblogs.com_Free-Thinker_p_10218829.html]

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221120/01c7e9eda4344ec488b73ca50de5a55f.png
[26606c9cf405f69637d20e89a5fc1b2a.png]: /images/20221120/9d47b08a26ba408b902d5b57129d2ceb.png
[9f1abcbe3b4bd3b3a4ac9a9da7c05295.png]: /images/20221120/46e8686eaa264660a3002d2f9243d5d5.png
[c924f903c12e53050d0f7ec7a796aa76.png]: /images/20221120/b91647fe0399483188248640e9642faa.png
[685532084d8d97a882b5871014fd31df.png]: /images/20221120/7c7da93ee2554996b83c8499701edeac.png
[3f47d4ca96bba641b619f1e976a55ea9.png]: /images/20221120/5b7547be0bab44dfbacea9180891e682.png
[e57360b7aace38f60e0fd41a2428cd25.png]: /images/20221120/0852ed55f4ae4f66be9fd24cceb3557d.png
[e271d28acf1b06fc7230dee53197bd8e.png]: /images/20221120/2c92584fe92446589774c2316736b3d2.png
[691b05510214a70a25d7d36419607c91.png]: /images/20221120/367ac2912a9c4f469509b1682dee22ab.png
[d66f00cf95f199be74ffc0a86176cff3.png]: /images/20221120/b01b6ca25ef543a9a5b02c42a642f918.png
[a983131d9d0e18868e20bf57bfb36172.png]: /images/20221120/b25d026838d54ef08d1c868db4fe9d58.png
[cb499f8d4ce0f8b41f8a94e2e66604f1.png]: /images/20221120/d6ff722c899f47df97045e861f0c0821.png
[f488920ffd31b6b679244470b915447e.png]: /images/20221120/0eeec5ffc3f04ed2ba7ef4c73ce53d03.png
[1288e175598a3aa26887f7c5d5dd3899.png]: /images/20221120/4a082bb88bb74e7ca3efc65b9af38f69.png
[6fe17a6c950956f6d602a6ee641ef099.png]: /images/20221120/0f45db4be9bf44fba71deb8243319a14.png
[3b2f958261aaa223b8d83e62f8679787.png]: /images/20221120/ad1db0a59dfc41bda67ae049906bcd81.png
[e81c366971f645ee1564d5928cc00769.png]: /images/20221120/7a53b6952ea64e308f0510450658b8e8.png
[81cdae5bce801687752717eb198daa1e.png]: https://img-blog.csdnimg.cn/img_convert/81cdae5bce801687752717eb198daa1e.png
[037505416d2f63a4650061f2d1ee0f14.png]: https://img-blog.csdnimg.cn/img_convert/037505416d2f63a4650061f2d1ee0f14.png
[https_www.cnblogs.com_Free-Thinker_p_10218829.html]: https://www.cnblogs.com/Free-Thinker/p/10218829.html