Flutter绘画实例(二)

我会带着你远行 2022-12-25 01:54 303阅读 0赞

### 一，画路径 - drawPath(Path path, Paint paint) 　 ###

Path 主要有方法如下：

直接描述路径的方法还可以细分为两组：添加子图形和画线（直线或曲线）

*  ### addXXX() - 添加子图形（由于此类方法参数与上面介绍的画简单图形一样，就不多赘述了） ###

1.  addArc(Rect oval, double startAngle, double sweepAngle) - 添加圆弧
2.  addOval(Rect oval) - 添加圆
3.  addPolygon(List<Offset> points, bool close) - 添加一个由点的集合描述的多边形
4.  addRect(Rect rect) - 添加矩形
5.  addRRect(Rect rect) - 添加圆角矩形
6.  addPath(Path path, Offset offset) - 添加子路径

*  ### XXXTo() - 画线（直线或曲线） ###

这个方法通过描述路径的方式来绘制图形，用法大概是这样：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

Path _path = Path();
      @override
      void paint(Canvas canvas, Size size) {
        _paint.style = PaintingStyle.stroke; // 画线模式
        _path.addArc(new Rect.fromLTWH(50, 50, 50, 50), 135.0 * (pi / 180.0), 225.0 * (pi / 180.0));
        _path.addArc(new Rect.fromLTWH(100, 50, 50, 50), 180.0 * (pi / 180.0), 225.0 * (pi / 180.0));
        _path.lineTo(100, 140);
        _path.lineTo(58, 93);
        canvas.drawPath(_path, _paint);
      }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

![e2bcca1c9d8377e1e513d8a629fed640.png][]

*  ### 向目标位置画直线 - lineTo(double x, double y) / relativelineTo(double x, double y)   从**当前位置**向目标位置画一条直线， x 和 y 是目标位置的坐标。这两个方法的区 别是， lineTo(x, y) 的参数是**绝对坐标**，而 relativeLineTo(x, y) 的参数是相对**当前位置**的**相对坐标** ； ###
 *      _paint.style = PaintingStyle.stroke; // 画线模式
        _path.lineTo(100, 100); // 由当前位置 (0, 0) 向 (100, 100) 画一条直线
        _path.relativeLineTo(100, 0); // 由当前位置 (100, 100) 向正右方画100像素的位置
        canvas.drawPath(_path, _paint);

![64e24347c770160c20ad87926bc745ce.png][]

*  ### 画二阶贝塞尔曲线 - quadraticBezierTo(double x1, double y1, double x2, double y2) /  relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)  ###
    
    x1，y1是控制点的坐标；x2，y2是结束点的坐标；relativeQuadraticBezierTo()同上面相对直线方法
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        _paint.style = PaintingStyle.stroke; // 画线模式
        List<Offset> points = new List();
        points.add(new Offset(100, 50)); // 画出控制点位置，方便理解
        canvas.drawPoints(PointMode.points, points, _paint);
        _path.moveTo(0, 100); // 移动起点到（0,100）
        _path.quadraticBezierTo(100, 50, 200, 100);
        canvas.drawPath(_path, _paint);
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
    ![fd2aff33203e98ec205a339913b1902d.png][]

*  ### 画三阶贝塞尔曲线 - cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) / relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)  ###
    
    和上面这个 quadraticBezierTo()和relativeQuadraticBezierTo() 的二阶贝塞尔曲线同理，就不多说了。
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        @override
          void paint(Canvas canvas, Size size) {
              
           Path path = new Path()..moveTo(100.0, 100.0);
            List<Offset> points = new List();
            points.add(new Offset(100, 50)); // 画出控制点位置，方便理解
            canvas.drawPoints(PointMode.points, points, _paint);
            path.moveTo(0, 100); // 移动起点到（0,100）
            path.cubicTo(100, 100, 200, 200, 300, 300);
            canvas.drawPath(path, _paint);
          }
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
    ![05b907114e2a8c9336d435734313fa36.png][]

*  ### 移动到某点 - moveTo(double x, double y) / relativeMoveTo(double dx, double dy)  ###
    
    不论是直线还是贝塞尔曲线，都是以当前位置作为起点，而不能指定起点。但可以通过 moveTo(x, y) 或 relativeMoveTo(x, y) 来改变当前位置，从而间接地设置这些方法的起点。
    
        _paint.style = PaintingStyle.stroke; // 画线模式
        _path.moveTo(20, 40); // 移动起点到（20,40）
        _path.lineTo(80, 100); // 画条斜线
        _path.moveTo(100, 40); // 移动起点到（100,20）
        _path.lineTo(100, 100); // 画条直线
        canvas.drawPath(_path, _paint);
    
    但凡事都有例外 arcTo() 这个方法并不从当前位置开始绘制  
    ![658b10c1bae7b812e628d5fd2c6f7932.png][]

*  ### 画弧线 - arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)  ###
    
    前三个参数，我们已经很熟悉了，最后一个参数的意思是，画这个弧的时候是**拖着笔到起点**还是**抬下笔到起点**
    
        _paint.style = PaintingStyle.stroke; // 画线模式
        _path.moveTo(20, 40); // 移动起点到（20,40）
        _path.lineTo(80, 100); // 画条斜线
        _path.arcTo(new Rect.fromLTWH(60, 60, 100, 100), 0.0 * (pi / 180.0), 90.0 * (pi / 180.0), false);
        canvas.drawPath(_path, _paint);
    
    拖着笔：
    
    ![718d4037d5194c1a41462b7533f4575f.png][]
    
    抬下笔：
    
    ![4a74fc0173c62181e1709d5bd79dc955.png][]

*  ### 封闭当前路径 - close()  ###
    
         
    
        _paint.style = PaintingStyle.stroke; // 画线模式
        _path.moveTo(20, 40); // 移动起点到（20,20）
        _path.lineTo(80, 100); // 画条斜线
        _path.arcTo(new Rect.fromLTWH(60, 60, 100, 100), 0.0 * (pi / 180.0), 90.0 * (pi / 180.0), false);
        _path.close(); // 封闭当前路径
        canvas.drawPath(_path, _paint);
    
    ![661b1c5d948020b12b3ba074dae7e2c4.png][]

到这里Canvas图形的绘制就讲的差不多了，图形简单时，使用 drawCircle() drawRect() 等方法来直接绘制；图形复杂时，使用 drawPath() 来绘制自定义图形。 除此之外， Canvas 还可以绘制图片和文字。

### 二，画图片 - drawImage(Image image, Offset p, Paint paint) / drawImageRect(Image image, Rect src, Rect dst, Paint paint)  ###

*  系统方法
    
    drawImage() 从指定点开始将图片宽高按像素绘制，由于无法控制图片的大小，并不常用；第一个参数是**ui包下的Image**,并不是**Image Widge**
 *  使用方法
    
    Image 可以通过以下代码获取
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        ui.Image image;
        /**
         * 初始化图片
         *
          Future<VoidCallback> initImage() async {
            image = await _loadImage("./assets/images/img.jpg");
            return null;
          }
        
          /**
           * 通过assets路径，获取资源图片
           */
          Future<Image> _loadImage(String assets) async {
            final ByteData data = await rootBundle.load(assets);
            if (data == null) throw 'Unable to read data';
            Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
            FrameInfo frame = await codec.getNextFrame();
            return frame.image;
          }
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
    然后在initState() 方法中初始化（  **shouldRepaint() **方法一定要记得返回 **true ** ，否则**无法重绘**）
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        void initState() {
          super.initState();
          painter.initImage().then((val) {
            setState(() {
            });
          });
        }
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
    最后在 paint() 方法中填入以下代码：
    
        canvas.drawImage(image, new Offset(0, 0), _paint);
    
    drawImageRect() 这个方法经常使用；主要了解第二个参数与第三个参数：
    
     *  Rect src - 原图的区域，一般传图片的宽高
     *  Rect dst - 显示的区域， 指图片显示的区域，如果原图区域**宽高比**与显示区域不一致，原图会被**拉伸**或**压缩**
    
        canvas.drawImageRect(image, Offset(0.0, 0.0) & Size(image.width.toDouble(), image.height.toDouble()), Offset(0.0, 0.0) & Size(200, 200), _paint);
    
    正常比例：
    
    ![8054e0c7c19d5969085ea6a31412ade3.png][]
    
    拉伸：
    
    ![ffe55e87e31b7ff414a28a24308a922a.png][]

### 三，画文字 - drawParagraph(Paragraph paragraph, Offset offset) ###

*  系统方法
    
        drawParagraph(Paragraph paragraph, Offset offset)
 *  使用方法
    
    代码注释的很清楚，这里循环画了5段文字
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
        for (int i = 0; i<5 ;i++){
          // 新建一个段落建造器，然后将文字基本信息填入;
          ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
            textAlign: TextAlign.left,
            fontWeight: FontWeight.w300,
            fontStyle: FontStyle.normal,
            fontSize: 15.0+i,
          ));
          pb.pushStyle(ui.TextStyle(color: Colors.black87));
          pb.addText('Flutter一统移动端');
          // 设置文本的宽度约束
          ParagraphConstraints pc = ParagraphConstraints(width: 300);
          // 这里需要先layout,将宽度约束填入，否则无法绘制
          Paragraph paragraph = pb.build()..layout(pc);
          // 文字左上角起始点
          Offset offset = Offset(50, 50+i*40.0);
          canvas.drawParagraph(paragraph, offset);
        }
    
    ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
     
 *  示例
    
    ![5fa82c4adab9148ee8b5932bc238fcdc.png][]

参考：[https://juejin.im/post/5c67a6a0f265da2dae510fa2\#heading-14][https_juejin.im_post_5c67a6a0f265da2dae510fa2_heading-14]

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221120/855f1432d61d43fc819671bc16ac086a.png
[e2bcca1c9d8377e1e513d8a629fed640.png]: /images/20221120/893a663d09a04a42a1986b17fa4dcb89.png
[64e24347c770160c20ad87926bc745ce.png]: /images/20221120/4c256a0f2d6e46659bb55ea71498368d.png
[fd2aff33203e98ec205a339913b1902d.png]: /images/20221120/8a4aec01aa0e4beb9dfb1a9c9e8bb44b.png
[05b907114e2a8c9336d435734313fa36.png]: /images/20221120/ac408a99c266485e92781f59154408db.png
[658b10c1bae7b812e628d5fd2c6f7932.png]: /images/20221120/147073f32e484ed9a9bbe891063c75cd.png
[718d4037d5194c1a41462b7533f4575f.png]: /images/20221120/eed0d5c20ee34506a7f49791ecbd0a50.png
[4a74fc0173c62181e1709d5bd79dc955.png]: /images/20221120/718fbe4730104c04b0578ef6d27690c9.png
[661b1c5d948020b12b3ba074dae7e2c4.png]: /images/20221120/a06afd29c62d49aeaac38cefe49a5c8f.png
[8054e0c7c19d5969085ea6a31412ade3.png]: /images/20221120/1f42c3f3a14b4a0b8990e46b9e17d4f4.png
[ffe55e87e31b7ff414a28a24308a922a.png]: /images/20221120/1f5cddb7bdb348989b534938f10bbdda.png
[5fa82c4adab9148ee8b5932bc238fcdc.png]: https://img-blog.csdnimg.cn/img_convert/5fa82c4adab9148ee8b5932bc238fcdc.png
[https_juejin.im_post_5c67a6a0f265da2dae510fa2_heading-14]: https://juejin.im/post/5c67a6a0f265da2dae510fa2#heading-14