【Flutter 专题】33 自定义 View 之 Paint

2019-08-12 16:24:18 浏览数 (1)

Flutter 提供了与 Android 相似的 Paint 和 Canvas 来实现自定义 View，使应用更方便完善。和尚尝试学习和使用自定义 View。

自定义 View 包括 Paint 画笔与 Canvas 画布，两部分缺一不可；两者通过 CustomPainter 衔接使用。需要实现 paint() 绘制方法与 shouldRepaint() 在刷新布局的时是否需要重绘。

代码语言：javascript复制
class PaintCustom extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Paint 画笔

Paint 画笔有很多属性，和尚介绍如下常用属性；和尚以一条线和一个圆来测试。一目了然的属性和尚就暂且略过，主要尝试其他属性。

color -> 画笔颜色
strokeWidth -> 画笔粗细
isAntiAlias -> 是否抗锯齿
filterQuality -> 颜色渲染模式质量：高 / 中 / 低
shader -> 着色器，一般用来绘制渐变效果或 ImageShader
strokeCap -> 笔触线帽类型：round / butt / square

笔触类型包括三种，默认为 butt 即从初始点到终止点；square 在初试点与终止点绘制一个方块；round 即在初试点与终止点绘制一个圆角；

代码语言：javascript复制
canvas.drawLine(
    Offset(30.0, 30.0), Offset(Screen.width - 30.0, 30.0), Paint());
canvas.drawLine(
    Offset(30.0, 60.0), Offset(Screen.width - 30.0, 60.0), Paint()..strokeWidth = 8.0..isAntiAlias = true);
canvas.drawLine(
    Offset(30.0, 120.0), Offset(Screen.width - 30.0, 120.0), Paint() ..strokeWidth = 8.0 ..isAntiAlias = true..strokeCap = StrokeCap.round);
canvas.drawLine(
    Offset(30.0, 90.0), Offset(Screen.width - 30.0, 90.0), Paint()..strokeWidth = 8.0..isAntiAlias = true..strokeCap = StrokeCap.square);

如图：

strokeJoin -> 线结合处：锐角 / 圆弧 / 直线

在线的交汇点处，可以设置交叠时样式，包括：锐角，圆弧和直角样式，官方效果更直接。

style -> 画笔样式：填充 / 描边

style 包括两种样式，默认 PaintingStyle.fill 为填充，PaintingStyle.stroke 为描边；用圆来绘制效果更明显；

代码语言：javascript复制
canvas.drawCircle(Offset(100.0, 200.0), 50.0, Paint()..strokeWidth = 8.0);
canvas.drawCircle(Offset(260.0, 200.0), 50.0, Paint()..strokeWidth = 8.0..style = PaintingStyle.stroke);

如图：

maskFilter -> 模糊遮照效果

模糊效果包括：nomal 内外模糊；solid 内部填充外边模糊，类似于荧光灯效果；outer 内部透明外边模糊；inner 内部模糊，外边正常；和尚建议大家多尝试效果；

代码语言：javascript复制
canvas.drawLine(Offset(30.0, 280.0), Offset(Screen.width - 30.0, 280.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0));
canvas.drawLine(Offset(30.0, 310.0), Offset(Screen.width - 30.0, 310.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.outer, 3.0));
canvas.drawLine(Offset(30.0, 340.0), Offset(Screen.width - 30.0, 340.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.solid, 3.0));
canvas.drawLine(Offset(30.0, 370.0), Offset(Screen.width - 30.0, 370.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0));

如图：

blendMode -> 颜色混合模式，类型很多
colorFilter -> 颜色渲染模式，一般是矩阵效果来改变

颜色混合与颜色渲染是两个很神奇的属性，可以通过众多模式调整颜色叠加效果，并与背景色衔接，和尚还无法准确的说明其中叠加的原理；

代码语言：javascript复制
canvas.drawLine(Offset(30.0, 400.0), Offset(Screen.width - 30.0, 400.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.white, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 430.0), Offset(Screen.width - 30.0, 430.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 460.0), Offset(Screen.width - 30.0, 460.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.red, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 490.0), Offset(Screen.width - 30.0, 490.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.green, BlendMode.exclusion));

如图：

和尚对自定义 View 的了解还并不深入，有很多需要继续学习研究的东西，如有问题，请多多指教！如下是和尚公众号，欢迎闲来吐槽～ Flutter 提供了与 Android 相似的 Paint 和 Canvas 来实现自定义 View，使应用更方便完善。和尚尝试学习和使用自定义 View。

自定义 View 包括 Paint 画笔与 Canvas 画布，两部分缺一不可；两者通过 CustomPainter 衔接使用。需要实现 paint() 绘制方法与 shouldRepaint() 在刷新布局的时是否需要重绘。

代码语言：javascript复制
class PaintCustom extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Paint 画笔

Paint 画笔有很多属性，和尚介绍如下常用属性；和尚以一条线和一个圆来测试。一目了然的属性和尚就暂且略过，主要尝试其他属性。

color -> 画笔颜色
strokeWidth -> 画笔粗细
isAntiAlias -> 是否抗锯齿
filterQuality -> 颜色渲染模式质量：高 / 中 / 低
shader -> 着色器，一般用来绘制渐变效果或 ImageShader
strokeCap -> 笔触线帽类型：round / butt / square

笔触类型包括三种，默认为 butt 即从初始点到终止点；square 在初试点与终止点绘制一个方块；round 即在初试点与终止点绘制一个圆角；

代码语言：javascript复制
canvas.drawLine(
    Offset(30.0, 30.0), Offset(Screen.width - 30.0, 30.0), Paint());
canvas.drawLine(
    Offset(30.0, 60.0), Offset(Screen.width - 30.0, 60.0), Paint()..strokeWidth = 8.0..isAntiAlias = true);
canvas.drawLine(
    Offset(30.0, 120.0), Offset(Screen.width - 30.0, 120.0), Paint() ..strokeWidth = 8.0 ..isAntiAlias = true..strokeCap = StrokeCap.round);
canvas.drawLine(
    Offset(30.0, 90.0), Offset(Screen.width - 30.0, 90.0), Paint()..strokeWidth = 8.0..isAntiAlias = true..strokeCap = StrokeCap.square);
strokeJoin -> 线结合处：锐角 / 圆弧 / 直线

在线的交汇点处，可以设置交叠时样式，包括：锐角，圆弧和直角样式，官方效果更直接。

style -> 画笔样式：填充 / 描边

style 包括两种样式，默认 PaintingStyle.fill 为填充，PaintingStyle.stroke 为描边；用圆来绘制效果更明显；

代码语言：javascript复制
canvas.drawCircle(Offset(100.0, 200.0), 50.0, Paint()..strokeWidth = 8.0);
canvas.drawCircle(Offset(260.0, 200.0), 50.0, Paint()..strokeWidth = 8.0..style = PaintingStyle.stroke);
maskFilter -> 模糊遮照效果

模糊效果包括：nomal 内外模糊；solid 内部填充外边模糊，类似于荧光灯效果；outer 内部透明外边模糊；inner 内部模糊，外边正常；和尚建议大家多尝试效果；

代码语言：javascript复制
canvas.drawLine(Offset(30.0, 280.0), Offset(Screen.width - 30.0, 280.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0));
canvas.drawLine(Offset(30.0, 310.0), Offset(Screen.width - 30.0, 310.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.outer, 3.0));
canvas.drawLine(Offset(30.0, 340.0), Offset(Screen.width - 30.0, 340.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.solid, 3.0));
canvas.drawLine(Offset(30.0, 370.0), Offset(Screen.width - 30.0, 370.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0));
blendMode -> 颜色混合模式，类型很多
colorFilter -> 颜色渲染模式，一般是矩阵效果来改变

颜色混合与颜色渲染是两个很神奇的属性，可以通过众多模式调整颜色叠加效果，并与背景色衔接，和尚还无法准确的说明其中叠加的原理；

代码语言：javascript复制
canvas.drawLine(Offset(30.0, 400.0), Offset(Screen.width - 30.0, 400.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.white, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 430.0), Offset(Screen.width - 30.0, 430.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 460.0), Offset(Screen.width - 30.0, 460.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.red, BlendMode.exclusion));
canvas.drawLine(Offset(30.0, 490.0), Offset(Screen.width - 30.0, 490.0),
    Paint()..strokeWidth = 8.0..blendMode = BlendMode.exclusion..colorFilter = ColorFilter.mode(Colors.green, BlendMode.exclusion));

和尚对自定义 View 的了解还并不深入，有很多需要继续学习研究的东西，如有问题，请多多指教！

渲染 canvas

0 人点赞