自定义UI系列专栏
画笔 Paint
所谓 “工欲善其事,必先利其器”,在了解画布 Canvas 之前,需要先了解画笔 Paint。
Paint 的作用
在 Canvas 上绘图时使用的样式的描述。Canvas 上的大多数 API 都采用 Paint 对象来描述用于该操作的样式。
Paint 常用属性
var paint = Paint()
..maskFilter = MaskFilter.blur(BlurStyle.normal, 0)
..color = Colors.black
..colorFilter = ColorFilter.linearToSrgbGamma()
..invertColors = true
..shader = ui.Gradient.linear(Offset.zero, Offset(100, 0), [Colors.black, Colors.white])
..strokeMiterLimit = 0
..strokeJoin = StrokeJoin.bevel
..strokeWidth = 10
..isAntiAlias = true
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..blendMode = BlendMode.clear
..filterQuality = FilterQuality.high
..imageFilter = ColorFilter.srgbToLinearGamma();
线条相关
isAntiAlias
: 抗锯齿
是否对画布上绘制的线条和图像应用抗锯齿,默认true
strokeWidth
: 线条宽度
当style设置为PaintingStyle.stroke时绘制边缘的宽度,默认 0.0
style
: 填充效果
PaintingStyle.stroke
: 将Paint应用到形状的边缘PaintingStyle.fill
: 将Paint在形状的内部
class _MyCustomPainter extends CustomPainter {
final Paint _paint = Paint()
..style = PaintingStyle.fill;
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), _paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return this != oldDelegate;
}
}
strokeCap
:端点类型
butt
: 平头round
: 圆头square
: 方头 当style设置为PaintingStyle.stroke时,在绘制的线条末端放置的类型。默认为StrokeCap.but
同样的绘制线条,round 和 square 比 butt 多出一些,多出的长度为 strokeWidth 的一半
strokeJoin
: 拐角的形状
miter
: 尖角round
: 圆角bevel
: 斜角
适用于style设置为PaintingStyle.stroke时绘制的路径,不适用于使用Canvas.drawPoints绘制为线条的点。 默认为StrokeJoin.miter ,即尖角
strokeMiterLimit
:链接点斜接的限制
当拐角设置为StrokeJoin.miter并且style设置为PaintingStyle.stroke时,在段上绘制斜接的限制。
具体效果可以参考官方的视频
色彩相关
color
: 画笔颜色
shader
: 设置渐变和图片着色器
linear
: 线性渐变radial
: 径向渐变sweep
: 扫描渐变
在 dart.ui.Gradient 下提供了三种命名构造函数,方便快速的构建渐变
var paint = Paint()
..style = PaintingStyle.fill
// 线性渐变
..shader = ui.Gradient.linear(Offset.zero, Offset(100, 0), [Colors.red, Colors.blue], [0, 1]);
三种渐变的构造函数的参数基本一样,默认两种颜色并且停靠点为0.0-1.0的渐变方式
Gradient.linear(
Offset from,
Offset to,
List<Color> colors, [
List<double>? colorStops,
TileMode tileMode = TileMode.clamp,
Float64List? matrix4,
])
from
: 渐变色起始点to
: 渐变色终止点colors
: 渐变色,至少两种colorStops
: 如果设置该值,则必须与colors
值的数组长度一致。标识每种颜色分布情况,取值范围 0~1tileMode
: 端点范围之外的着色规则
tileMode
的效果clamp
: 在端点之外延续端点处的颜色repeated
: 端点之外重复模式mirror
: 端点之外镜像模式decal
: 端点之外用黑色透明覆盖
以下是几种延伸模式的官方例子
colorFilter
:着色器
系统提供很多命名构造函数,比较常用的是
ColorFilter.mode(Color color, BlendMode blendMode)
colorFilter 更多的用在处理图片颜色上,类似 ColorFiltered 组件的效果,可以融合图片的颜色,colorFilter 比较简单,其中
blendMode
比较重要,系统提供很多融合模式,可以参考 官方介绍 或者 Flutter BlendMode混合模式详解
invertColors
:颜色反转
绘制时图像的颜色是否反转。
反转图像的颜色会应用一个新的滤色器,该滤色器将与任何用户提供的滤色器组合在一起
图片相关
imageFilter
:图片处理的过滤器,可以实现图片模糊、矩阵变换等效果
-
ImageFilter.blur 高斯模糊
-
代码
class _MyDrawImageCustomPainter extends CustomPainter { final ui.Image? image; final Paint _paint = Paint()..imageFilter = ui.ImageFilter.blur(sigmaX: 2, sigmaY: >5); _MyDrawImageCustomPainter(this.image); @override void paint(Canvas canvas, Size size) { canvas.drawImage(image!, Offset.zero, _paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return this != oldDelegate || this.image != (oldDelegate as >_MyDrawImageCustomPainter).image; } }
- 效果
-
-
ImageFilter.matrix 矩阵变换
- 代码
final Paint _paint = Paint() ..imageFilter = ui.ImageFilter.matrix(Matrix4.rotationY(2).storage);
- 效果,右侧为沿Y轴旋转的效果
-
ImageFilter.compose 混合效果
- 代码
final Paint _paint = Paint() ..imageFilter = ui.ImageFilter.compose( outer: ImageFilter.blur(sigmaY: 2, sigmaX: 2), inner: ui.ImageFilter.matrix(Matrix4.rotationY(2).storage), );
- 效果
结束语
以上就是 Paint 常用的一些属性,下一篇文章将讲解 Canvas 绘制。