Flutter 的自定义 UI 系列(二)-- 画笔 Paint

2,287 阅读3分钟


自定义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;
  }
}

style.png

strokeCap :端点类型
  • butt: 平头
  • round: 圆头
  • square: 方头 当style设置为PaintingStyle.stroke时,在绘制的线条末端放置的类型。默认为StrokeCap.but
    同样的绘制线条,round 和 square 比 butt 多出一些,多出的长度为 strokeWidth 的一半

strokeCap.png

strokeJoin : 拐角的形状
  • miter: 尖角
  • round: 圆角
  • bevel: 斜角
    适用于style设置为PaintingStyle.stroke时绘制的路径,不适用于使用Canvas.drawPoints绘制为线条的点。 默认为StrokeJoin.miter ,即尖角

strokeJoin.png

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

Gradient.png

三种渐变的构造函数的参数基本一样,默认两种颜色并且停靠点为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~1
  • tileMode: 端点范围之外的着色规则

Gradient_2.png

  • tileMode的效果
    • clamp: 在端点之外延续端点处的颜色
    • repeated: 端点之外重复模式
    • mirror: 端点之外镜像模式
    • decal: 端点之外用黑色透明覆盖

以下是几种延伸模式的官方例子

Gradient_3.png

colorFilter:着色器

系统提供很多命名构造函数,比较常用的是

ColorFilter.mode(Color color, BlendMode blendMode)

colorFilter 更多的用在处理图片颜色上,类似 ColorFiltered 组件的效果,可以融合图片的颜色,colorFilter 比较简单,其中 blendMode 比较重要,系统提供很多融合模式,可以参考 官方介绍 或者 Flutter BlendMode混合模式详解

colorFilter.png

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 绘制。