【Flutter 专题】32 图解自定义 View 之 Paint
Flutter 提供了与 Android 相似的 Paint 和 Canvas 来实现自定义 View,使应用更方便完善。小菜尝试学习和使用自定义 View。
自定义 View 包括 Paint 画笔与 Canvas 画布,两部分缺一不可;两者通过 CustomPainter 衔接使用。需要实现 paint() 绘制方法与 shouldRepaint() 在刷新布局的时是否需要重绘。
Paint 画笔
Paint 画笔有很多属性,小菜介绍如下常用属性;小菜以一条线和一个圆来测试。一目了然的属性小菜就暂且略过,主要尝试其他属性。
color -> 画笔颜色
strokeWidth -> 画笔粗细
isAntiAlias -> 是否抗锯齿
filterQuality -> 颜色渲染模式质量:高 / 中 / 低
shader -> 着色器,一般用来绘制渐变效果或 ImageShader
strokeCap -> 笔触线帽类型:round / butt / square
笔触类型包括三种,默认为 butt 即从初始点到终止点;square 在初试点与终止点绘制一个方块;round 即在初试点与终止点绘制一个圆角;
strokeJoin -> 线结合处:锐角 / 圆弧 / 直线
在线的交汇点处,可以设置交叠时样式,包括:锐角,圆弧和直角样式,官方效果更直接。
style -> 画笔样式:填充 / 描边
style 包括两种样式,默认 PaintingStyle.fill 为填充,PaintingStyle.stroke 为描边;用圆来绘制效果更明显;
maskFilter -> 模糊遮照效果
模糊效果包括:nomal 内外模糊;solid 内部填充外边模糊,类似于荧光灯效果;outer 内部透明外边模糊;inner 内部模糊,外边正常;小菜建议大家多尝试效果;
blendMode -> 颜色混合模式,类型很多
colorFilter -> 颜色渲染模式,一般是矩阵效果来改变
颜色混合与颜色渲染是两个很神奇的属性,可以通过众多模式调整颜色叠加效果,并与背景色衔接,小菜还无法准确的说明其中叠加的原理;
小菜对自定义 View 的了解还并不深入,有很多需要继续学习研究的东西,如有问题,请多多指教!
来源:阿策小和尚
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/9a1a2b9a49efb9ec207358af6】。文章转载请联系作者。
评论