读完本篇你将收获以下知识
- [x] 画笔的基础用法
- [x] 画笔的着色器效果
- [x] 画笔的滤镜效果
一.画笔的基础用法
本小节所涉及的属性
属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
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
代码语言：javascript复制
style用来控制是线框类型还是全部填充，有PaintingStyle.fill和PaintingStyle.fill两种。
color用来控制绘制时图形的颜色，注意不能控制图层的颜色。
isAntiAlias为true是启用抗锯齿，这样图形边缘就会比较光滑。
举个例子来测试下这些基础属性，如下图
可以看到红色圆环并且是抗锯齿的，右边蓝色圆形边缘粗糙. strokeWidth只有在style为stroke时才有效，从图中可以看到，圆环有一半（strokeWidth的一般）是在外面，所以实际使用是需要根据要求调整大小
核心代码如下
代码语言：javascript复制/// 创建画笔 并设置颜色、样式、锯齿
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 - 两端是方头，并且出头
效果见下图
线接类型strokeJoin
两条线段连接处的形状。⚠️：strokeJoin在Canvas.drawPoints 画点时不起作用。
代码语言：javascript复制/// 有三种类型
enum StrokeJoin {
miter, // 尖角
round, // 圆角
bevel, // 斜角
}
主要代码
代码语言：javascript复制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显示。如下图
主要代码
代码语言：javascript复制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。
- ImageShader : 图片着色器ImageShader 使用 ImageShader 可以加载一张图片，绘制时使用图片对图形进行着色。
2.blendMode
颜色叠合模式 BlendMode 在组件中的应用有 Image 组件和 ColorFilter 组件 用于将目标与一个颜色叠合,一共有 29 种叠合模式，这里看一下效果。
3.invertColors
true 时，会将一个颜色在绘制时变成在色相环中相反的位置。
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 对象可以使用变换矩阵或颜色叠合模式对绘制的对象进行滤色处理。
代码语言：javascript复制const ColorFilter.mode(Color color, BlendMode blendMode) #颜色模式
const ColorFilter.matrix(List<double> matrix) #颜色矩阵变换
2. 遮罩滤镜maskFilter
使图片进行模糊，可以指定模糊的类型, 只有一个 MaskFilter.blur 构造
代码语言：javascript复制const MaskFilter.blur(
this._style, //类型
this._sigma, //高斯模糊的偏差
)
3. 图片滤镜imageFilter
可以通过 ImageFilter.blur 来让图片模糊， 或通过 ImageFilter.matrix 进行变换
代码语言：javascript复制ImageFilter.blur(
{ double sigmaX = 0.0,
double sigmaY = 0.0
})
ImageFilter.matrix(
Float64List matrix4,
{ FilterQuality filterQuality = FilterQuality.low })
4. 滤镜质量filterQuality
共四种类型
代码语言：javascript复制enum FilterQuality {
none,
low,
medium,
high,
}
