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

时间:2021-7-21 作者:qvyue

    小菜在尝试把图片做成黑白色时,了解到 ShaderMask 这个利器,今天小菜简单学习和尝试一下;

ShaderMask

    ShaderMask 是为子类 Widget 添加一个遮罩层,以展示不同的遮罩效果,同时可以配合 BlendMode 以展示图片的不同混合效果;

源码分析

const ShaderMask({
    Key key,
    @required this.shaderCallback,
    this.blendMode = BlendMode.modulate,
    Widget child,
})

    分析源码可得,ShaderMask 继承自 SingleChildRenderObjectWidget,主要用于渲染;shaderCallback 用于生成遮罩蒙版的回调;blendMode 用于调整遮罩层展示效果;

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

案例尝试

ShaderCallback

    ShaderCallback 用于 Widget 调用着色器的回调,以便可以根据子 Widget 的大小和位置自定义着色器;可以利用 Gradients 类来定义着色器的效果;其中对于文字进行遮罩效果设置时,建议把文字颜色设置为白色;

1. LinearGradient 线性渐变
const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List colors,
    List stops,
    this.tileMode = TileMode.clamp,
    GradientTransform transform,
})

    LinearGradient 用于 2D 线性渐变,其中 beginend 用于开始时与结束时的两个锚点;colors 为渐变过程中设置的颜色列表;stops 为颜色列表中渐变色的转换比例;其中注意,colorsstops 列表长度要一致;

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));
Flutter 118: 图解特殊利器 ShaderMask 着色器
2. RadialGradient 径向渐变
const RadialGradient({
    this.center = Alignment.center,
    this.radius = 0.5,
    @required List colors,
    List 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));
Flutter 118: 图解特殊利器 ShaderMask 着色器
3. SweepGradient 镭射渐变
const SweepGradient({
    this.center = Alignment.center,
    this.startAngle = 0.0,
    this.endAngle = math.pi * 2,
    @required List colors,
    List stops,
    this.tileMode = TileMode.clamp,
    GradientTransform transform,
})

    SweepGradient2D 镭射扫描渐变,其中 center 为镭射扫描中心;startAngleendAngle 分别为扫描的开始和结束的弧度;其余属性均相同;

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));
Flutter 118: 图解特殊利器 ShaderMask 着色器

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')));
Flutter 118: 图解特殊利器 ShaderMask 着色器

    ShaderMask 案例源码


    小菜主要是想设置一个黑白照片,由此简单延伸了一下 ShaderMask 遮罩着色器的小知识;小菜对于深层的原理还没探究,如有错误,请多多指导!

来源: 阿策小和尚

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。