Flutter 118: 图解特殊利器 ShaderMask 着色器

2021-12-02 19:36:44

小菜在尝试把图片做成黑白色时，了解到 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 遮罩着色器的小知识；小菜对于深层的原理还没探究，如有错误，请多多指导！

来源：阿策小和尚

码农公寓