【Flutter 专题】118 图解特殊利器 ShaderMask 着色器
【Flutter 专题】118 图解特殊利器 ShaderMask 着色器
和尚在尝试把图片做成黑白色时，了解到 ShaderMask 这个利器，今天和尚简单学习和尝试一下；
ShaderMask
ShaderMask 是为子类 Widget 添加一个遮罩层，以展示不同的遮罩效果，同时可以配合 BlendMode 以展示图片的不同混合效果；
源码分析
const ShaderMask({
Key key,
@required this.shaderCallback,
this.blendMode = BlendMode.modulate,
Widget child,
})分析源码可得，ShaderMask 继承自 SingleChildRenderObjectWidget，主要用于渲染；shaderCallback 用于生成遮罩蒙版的回调；blendMode 用于调整遮罩层展示效果；
案例尝试
ShaderCallback
ShaderCallback 用于 Widget 调用着色器的回调，以便可以根据子 Widget 的大小和位置自定义着色器；可以利用 Gradients 类来定义着色器的效果；其中对于文字进行遮罩效果设置时，建议把文字颜色设置为白色；
1. LinearGradient 线性渐变
const LinearGradient({
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
@required List<Color> colors,
List<double> stops,
this.tileMode = TileMode.clamp,
GradientTransform transform,
})LinearGradient 用于 2D 线性渐变，其中 begin 和 end 用于开始时与结束时的两个锚点；colors 为渐变过程中设置的颜色列表；stops 为颜色列表中渐变色的转换比例；其中注意，colors 和 stops 列表长度要一致；
return ShaderMask(
shaderCallback: (rect) => LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [ Colors.deepOrange.withOpacity(0.6), Colors.yellow, Colors.green ],
stops: [0.2, 0.5, 0.9],
).createShader(rect),
child: _itemText(_paraStr));
2. RadialGradient 径向渐变
const RadialGradient({
this.center = Alignment.center,
this.radius = 0.5,
@required List<Color> colors,
List<double> stops,
this.tileMode = TileMode.clamp,
this.focal,
this.focalRadius = 0.0,
GradientTransform transform,
})RadialGradient 用于 2D， 径向渐变，以 center 为圆环中心，radius 为半径宽度逐层渐变；
return ShaderMask(
shaderCallback: (Rect bounds) {
return RadialGradient(
center: Alignment.center, radius: 0.5,
colors: [ Colors.deepOrange.withOpacity(0.6), Colors.yellow, Colors.green ],
stops: [0.1, 0.5, 0.9],
tileMode: TileMode.mirror)
.createShader(bounds);
},
child: _itemText(_paraStr));
3. SweepGradient 镭射渐变
const SweepGradient({
this.center = Alignment.center,
this.startAngle = 0.0,
this.endAngle = math.pi * 2,
@required List<Color> colors,
List<double> stops,
this.tileMode = TileMode.clamp,
GradientTransform transform,
})SweepGradient 为 2D 镭射扫描渐变，其中 center 为镭射扫描中心；startAngle 和 endAngle 分别为扫描的开始和结束的弧度；其余属性均相同；
return ShaderMask(
shaderCallback: (Rect bounds) {
return SweepGradient(
colors: [ Colors.deepOrange.withOpacity(0.6), Colors.yellow, Colors.green ],
stops: [0.3, 0.6, 0.9],
center: Alignment.center,
).createShader(bounds);
},
child: _itemText(_paraStr));
return ShaderMask(
shaderCallback: (Rect bounds) {
return SweepGradient(
colors: [ Colors.deepOrange.withOpacity(0.6), Colors.yellow, Colors.green ],
startAngle: pi * 0.5,
endAngle: 2 * pi * 0.6,
center: Alignment.center,
).createShader(bounds);
},
child: _itemText(_paraStr));
BlendMode
BlendMode 为绘制的混合模式，可以用来创建其他效果；例如黑白模式，X 透视模式等；
return ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(colors: [Color(0xFF704214), Colors.brown]).createShader(bounds);
},
blendMode: BlendMode.color,
child: Container(width: 100, height: 100, child: Image.asset('images/icon_hzw01.jpg')));
return ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(colors: [Colors.black, Colors.white]).createShader(bounds);
},
blendMode: BlendMode.hue,
child: Container(width: 100, height: 100, child: Image.asset('images/icon_hzw01.jpg')));
和尚主要是想设置一个黑白照片，由此简单延伸了一下 ShaderMask 遮罩着色器的小知识；和尚对于深层的原理还没探究，如有错误，请多多指导！
腾讯云开发者
