Flutter自定义View之Paint

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

  自定义  **View**  包括  **Paint**  画笔与  **Canvas**  画布,两部分缺一不可;两者通过  **CustomPainter**  衔接使用。需要实现  **paint()**  绘制方法与  **shouldRepaint()**  在刷新布局的时是否需要重绘。
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**  即在初试点与终止点绘制一个圆角;
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 为描边;用圆来绘制效果更明显;

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**  内部模糊,外边正常;和尚建议大家多尝试效果;
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 -> 颜色渲染模式,一般是矩阵效果来改变
  颜色混合与颜色渲染是两个很神奇的属性,可以通过众多模式调整颜色叠加效果,并与背景色衔接,和尚还无法准确的说明其中叠加的原理;
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()**  在刷新布局的时是否需要重绘。

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**  即在初试点与终止点绘制一个圆角;
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 为描边;用圆来绘制效果更明显;

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**  内部模糊,外边正常;和尚建议大家多尝试效果;
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 -> 颜色渲染模式,一般是矩阵效果来改变
  颜色混合与颜色渲染是两个很神奇的属性,可以通过众多模式调整颜色叠加效果,并与背景色衔接,和尚还无法准确的说明其中叠加的原理;
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**  的了解还并不深入,有很多需要继续学习研究的东西,如有问题,请多多指教!如下是和尚公众号,欢迎闲来吐槽~