Flutter 绘制Paint

Flutter 的绘制主要涉及两个Widget： CustomPainter, CustomPaint

CustomPainter：提供画布的组件； 有几个主要的参数：

a. painter : 绘制的对象，是一个CustomPaint。它的绘制是在children之前。如果设置了children，该painter绘制的内容会被覆盖。 
b. foregroundPainter： 绘制的对象，是一个CustomPaint。它的绘制是在children之后。该painter绘制的内容会覆盖children 。 
c. size： 绘制区域的大小，如果有child就忽略此属性直接用child的size。
d. child :

CustomPaint：是一个抽象类，要实现绘制的逻辑必须继承该抽象类，并实现它的paint和shouldRepaint方法。

void paint(Canvas canvas, Size size);: 里边实现具体的绘制逻辑。

– canvas: 画布
– size: 画布的大小

bool shouldRepaint(covariant CustomPainter oldDelegate); : 控制是否重绘

绘制

Paint 画笔

介绍几个常用的参数： 
（1） color: 画笔的颜色
（2）strokeWidth: 线的宽度
（3）style： 填充模式，有两种： PaintingStyle.fill : 填充； PaintingStyle.stroke: 空心
（4）strokeCap：
（5）blendMode： 重叠部分的处理，一般在截取Image后合并Image用。
a. src: 只显示源图
b. dst: 只显示目标图
c. srcOver: 都显示，重叠部分是src覆盖在dst的上边；
d. dstOver: 都显示，重叠部分是dst覆盖在src的上边；
e. srcIn; // 只显示重叠部分的src图，透明部分也是不显示的。
f. dstIn; // 只显示重叠部分的dst图，透明部分也是不显示的。
… 还有好多不说了，用的时候自己看注释。

p = Paint()
  ..color = Colors.orange // 画笔的颜色
  ..strokeWidth = 2.0 // 线的宽度
  ..style = PaintingStyle.stroke // fill: 填充， stroke: 空心
  ..strokeCap = StrokeCap.butt // 转折处的处理
  ..blendMode = BlendMode.dstIn; // 重叠处的处理模式，clear,src, dst, srcIn,dstIn等等。

绘制线段

// 第一个参数表示起点坐标
// 第二个参数表示终点坐标
// 第三个参数是画笔
canvas.drawLine(Offset(10, 10), Offset(100, 100), p);

绘制矩形

绘制矩形需要用到Rect， 而React的创建可以通过Offset和Size来完成，Offset 决定他左上角的坐标    Size 决定他的大小。Rect rect = offset & size;

// 矩形的长宽
Size size = Size(200, 300);
// 矩形左上角的坐标
Offset offset = Offset(200, 200);
// 合成Rect，为什么可以这样合成？ 官方给的！看下边---> 
Rect rect = offset & size;
canvas.drawRect(
    rect,
    Paint()
      ..color = Colors.red
      ..strokeWidth = 3.0);

/// A Rect can be created with one its constructors or from an [Offset] and a /// [Size] using the `&` operator: /// ///dart
/// Rect myRect = const Offset(1.0, 2.0) & const Size(3.0, 4.0);
/// ```

#### 绘制多边形
绘制多变形要用到Path的moveTo和lineTo放发，
void moveTo(double x, double y)： 将画笔的起点移动到（x,y)坐标。
void lineTo(double x, double y)： 从当前点绘制一条直线到(x,y)坐标。

canvas.drawPath(
    Path()
      …moveTo(30, 200)
      …lineTo(200, 200)
      …lineTo(100, 300)
      …lineTo(50, 330)
      …lineTo(30, 300)
      …close(),
    Paint()
      …color = Colors.lightBlue
      …strokeWidth = 1.0);

#### 绘制圆

// 第一个参数是原点坐标
// 第二个参数是半径
// 第三个参数是画笔
canvas.drawCircle(Offset(100, 100), 50, p);

#### 绘制阴影
``` 
// Path 的用法在上边绘制多变形的时候已经说过了 moveTo, lineTo .
canvas.drawShadow(
    Path()
      ..moveTo(30.0, 30.0)
      ..lineTo(320.0, 30.0)
      ..lineTo(120.0, 160.0)
      ..lineTo(30.0, 160.0)
      ..close(),
// 阴影的颜色
    Colors.blue, 
// 阴影扩散的范围
    3,
    false);

绘制文本

ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
  textAlign: TextAlign.left, // 对齐方式
  fontWeight: FontWeight.w600, // 粗体
  fontStyle: FontStyle.normal, // 正常 or 斜体
  fontSize: 18,
))
  ..pushStyle(dartUi.TextStyle(color: Colors.black26))
  ..addText('''
  // 测试文本的绘制
  // 绘制阴影
  canvas.drawShadow(
    Path()
      ..moveTo(30.0, 30.0)
      ..lineTo(320.0, 30.0)
      ..lineTo(120.0, 160.0)
      ..lineTo(30.0, 160.0)
      ..close(),
    Colors.blue,
    3,
    false);
      ''');
// 绘制的宽度
ParagraphConstraints pc =
    ParagraphConstraints(width: 350.0);  
Paragraph paragraph = pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(30, 300));

绘制Image

绘制的代码如下，当然他有好几种绘制方式（drawImage， drawImageRect， drawImageNine）。代码看起来很简单，但是如果你直接这样写的话，是会报错的。折腾了我很久，最后找出的原因是 图片的加载是耗时的，不要放在这里边加载，放到外边加载完成后通过参数传进 CustomPainter 就不会报错了。 不信你直接在这里加载image然后在Future的then里去调用下面的代码，也是不行的！！！
一般用 canvas.drawImageRect 来绘制而不用canvas.drawImage。 canvas.drawImageRect可以指定宽高，可以截图。看一下源码你会发现drawImage 的内部也是调用drawImageRect 来实现的。
使用如下：

canvas.drawImage(
    image, dartUi.Offset(0, image.height.toDouble() + 30), Paint());
canvas.drawImageRect(
    image,
    // 本次要截取的区域--相对于原图（该坐标以原图的左上角为原点0，0, 截图一个宽高都为60的区域）
    Rect.fromLTWH(0, 0, 60, 60), 
         // 要被截取的原图所在的区域
    Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
    Paint());

通过绘制实现图片的截图功能

// 裁剪画布，区域为(60, 60, 190, 90)
canvas.clipRect(Rect.fromLTWH(60, 60, 190, 90));

类似Android， 可以通过裁剪画布的功能做一些特殊的绘制。 一般裁剪之前会调用canvas.store ()来保存当前的画布，等到在裁剪过的画布上做完相关的操作之后可以通过 canvas.restore()来恢复之前的画布。 
canvas.store(): 保存当前的画布
canvas.restore ():恢复裁剪之前的画布（之前保存的） 
这俩要成对出现。 
可以跑的代码：

import 'package:flutter/material.dart';


void main() =>
    runApp(
        StartPage()
    );

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}


class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("flutter 绘制demo"),),
      body: CustomPaint(foregroundPainter: PaintDemo(),),
    );
  }
}

class PaintDemo extends CustomPainter {
  Paint _paint;

  PaintDemo() {
    _paint = Paint()
      ..color = Colors.orange // 画笔的颜色
      ..strokeWidth = 2.0 // 线的宽度
      ..style = PaintingStyle.fill // fill: 填充， stroke: 空心
    ;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset(10, 10), Offset(60, 10), _paint);

    canvas.drawCircle(Offset(100, 100), 50, _paint);

    Size size = Size(200, 300);
    // 可以通过Offset和Size来创建一个Rect，Offset 决定他右上角的坐标    Size 决定他的大小
    Rect rect = Offset(200, 200) & size;
    canvas.drawRect(
        rect,
        Paint()
          ..color = Colors.red
          ..strokeWidth = 3.0);

    // 绘制阴影
    canvas.drawShadow(
        Path()
          ..moveTo(30.0, 500.0)
          ..lineTo(320.0, 500.0)..lineTo(120.0, 660.0)..lineTo(30.0, 660.0)
          ..close(),
        Colors.blue,
        3,
        false);
  }

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

到此， 关于Flutter的绘制就介绍的差不多了，欢迎指正。
关于图片的绘制，代码稍微多一些，没放上去，有需要留言。