小菜在尝试把图片做成黑白色时，了解到 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 案例源码
小菜主要是想设置一个黑白照片，由此简单延伸了一下 ShaderMask 遮罩着色器的小知识；小菜对于深层的原理还没探究，如有错误，请多多指导！
来源： 阿策小和尚
评论