读完本篇你将收获以下知识

• 画笔的基础用法
• 画笔的着色器效果
• 画笔的滤镜效果

一.画笔的基础用法

本小节所涉及的属性

1. style、strokeWidth、isAntiAlias和color

style用来控制是线框类型还是全部填充，有PaintingStyle.fill和PaintingStyle.fill两种。
color用来控制绘制时图形的颜色，注意不能控制图层的颜色。
isAntiAlias为true是启用抗锯齿，这样图形边缘就会比较光滑。

举个例子来测试下这些基础属性，如下图

可以看到红色圆环并且是抗锯齿的，右边蓝色圆形边缘粗糙.
strokeWidth只有在style为stroke时才有效，从图中可以看到，圆环有一半（strokeWidth的一般）是在外面，所以实际使用是需要根据要求调整大小

1.png

核心代码如下

/// 创建画笔 并设置颜色、样式、锯齿
    final paint = Paint()
      ..color = Colors.red // 定义颜色
      ..style = PaintingStyle.stroke // 定义样式
      ..strokeWidth = 10
      ..isAntiAlias = true; // 是否抗锯齿

    /// 画个圆形
    canvas.drawCircle(Offset(100, 100), 50, paint);
    
    /// 创建画笔 并设置颜色、样式、锯齿
    final paint = Paint()
      ..color = Colors.blue // 定义颜色
      ..style = PaintingStyle.fill // 定义样式
      ..strokeWidth = 10
      ..isAntiAlias = false; // 是否抗锯齿

    /// 画个圆形
    canvas.drawCircle(Offset(100, 100), 50, paint);

2. strokeCap、strokeJoin和strokeMiterLimit

这些属性只有style为stroke时才会生效。

线帽类型strokeCap

就是控制显得两端的形状，有下面三种可选值

• StrokeCap.butt - 两段都是平的，并且不出头
• StrokeCap.round - 两端是半圆头
• StrokeCap.square - 两端是方头，并且出头

效果见下图

2.png

线接类型strokeJoin

两条线段连接处的形状。⚠️：strokeJoin在Canvas.drawPoints 画点时不起作用。

/// 有三种类型
enum StrokeJoin {
  miter,  // 尖角
  round, // 圆角
  bevel, // 斜角
}

3.png

主要代码

final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..color = Colors.blue
      ..strokeWidth = 20;
    final path = Path();
    path.moveTo(50, 50);
    path.lineTo(50, 150);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(
      path,
      paint..strokeJoin = StrokeJoin.miter,
    );

    path.reset();
    path.moveTo(50, 50 + 150.0);
    path.lineTo(50, 150 + 150.0);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(
      path,
      paint..strokeJoin = StrokeJoin.round,
    );

    path.reset();
    path.moveTo(50, 50 + 150.0 * 2);
    path.lineTo(50, 150 + 150.0 * 2);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(
      path,
      paint..strokeJoin = StrokeJoin.bevel,
    );

斜接限制strokeMiterLimit

只有当 strokeJoin 为miter时生效。它是一个对斜接的限定，如果超过阈值，会直接使用【StrokeJoin.bevel】类型。
这个限制是怎么算的呢？是根据两个夹角的角度来确定的。角度大于strokeMiterLimit就按miter显示尖角，超过后就StrokeJoin.bevel显示。
如下图

4.png

主要代码

final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..color = Colors.blue
      ..strokeWidth = 20;
    final path = Path();
    path.moveTo(50, 50);
    path.lineTo(50, 150);
    path.relativeLineTo(100, -50);
    canvas.drawPath(
      path,
      paint
        ..strokeJoin = StrokeJoin.miter
        ..strokeMiterLimit = 2,
    );

    path.reset();
    path.moveTo(50 + 150.0, 50);
    path.lineTo(50 + 150.0, 150);
    path.relativeLineTo(100, -100);
    canvas.drawPath(
      path,
      paint
        ..strokeJoin = StrokeJoin.miter
        ..strokeMiterLimit = 2,
    );

    path.reset();
    path.moveTo(50, 50 + 200.0);
    path.lineTo(50, 150 + 200.0);
    path.relativeLineTo(100, -50);
    canvas.drawPath(
      path,
      paint
        ..strokeJoin = StrokeJoin.miter
        ..strokeMiterLimit = 4,
    );

    path.reset();
    path.moveTo(50 + 150.0, 50 + 200.0);
    path.lineTo(50 + 150.0, 150 + 200.0);
    path.relativeLineTo(100, -100);
    canvas.drawPath(
      path,
      paint
        ..strokeJoin = StrokeJoin.miter
        ..strokeMiterLimit = 4,
    );

二.着色器

着色器相关的属性, 本节不具体展开，后面会有详细的文章专门介绍

1.shader

shader是一个抽象类，具体的实现有Gradient和ImageShader两种，shader不为null时color属性无效。

• Gradient : 渐变
  渐变有三种 liner、radial和sweep。

  
  
  线性渐变及反色.png

径向.png

扫描渐变.png

• ImageShader : 图片着色器ImageShader 使用 ImageShader 可以加载一张图片，绘制时使用图片对图形进行着色。

  
  
  image-shader.png

2.blendMode

颜色叠合模式
BlendMode 在组件中的应用有 Image 组件和 ColorFilter 组件
用于将目标与一个颜色叠合,一共有 29 种叠合模式，这里看一下效果。

会和模式.png

3.invertColors

true 时，会将一个颜色在绘制时变成在色相环中相反的位置。

反色.png

void drawInvertColors(Canvas canvas) {
  _paint..color = Color(0xff009A44);
  canvas.drawCircle(Offset(100, 100), 50, _paint..invertColors = false);
  canvas.drawCircle(Offset(100+120.0, 100), 50, _paint..invertColors = true);
}

三.滤镜

这部分内容比较复杂，会放在专门章节讲解

1. 颜色滤镜colorFilter

ColorFilter 对象可以使用变换矩阵或颜色叠合模式对绘制的对象进行滤色处理。

const ColorFilter.mode(Color color, BlendMode blendMode) #颜色模式
const ColorFilter.matrix(List<double> matrix) #颜色矩阵变换

2. 遮罩滤镜maskFilter

使图片进行模糊，可以指定模糊的类型, 只有一个 MaskFilter.blur 构造

const MaskFilter.blur(
    this._style, //类型
    this._sigma, //高斯模糊的偏差
  ) 

3. 图片滤镜imageFilter

可以通过 ImageFilter.blur 来让图片模糊，
或通过 ImageFilter.matrix 进行变换

ImageFilter.blur(
  { double sigmaX = 0.0, 
    double sigmaY = 0.0 
  })
  
ImageFilter.matrix(
  Float64List matrix4,
  { FilterQuality filterQuality = FilterQuality.low })

4. 滤镜质量filterQuality

共四种类型

enum FilterQuality {
  none,
  low,
  medium,
  high,
}