flutter画笔paint的认识

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

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

一.画笔的基础用法

本小节所涉及的属性

属性名	类型	默认值	说明
style	PaintingStyle	PaintingStyle.fill	画笔类型，填充或者线框
isAntiAlias	bool	true	canvas上的图片和线条是否抗锯齿
color	Color	0xFF000000	当stroking 或者 filling 图形时使用
strokeWidth	double	0.0	线宽
strokeCap	StrokeCap	StrokeCap.butt	样式设置为PaintingStyle.stroke时，要在绘制的线条的末尾放置的结束点的种类。
strokeJoin	StrokeJoin	StrokeJoin.miter	在线段之间的连接上放置的类型
strokeMiterLimit	dobule	4.0	斜接限制

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,
    );

二.着色器

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

名称	类型	默认值	说明
shader	Shader	null	着色器
blendMode	BlendMode	BlendMode.srcOver	绘制形状或合成图层时要应用的混合模式
invertColors	bool	false	是否反色

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,
}