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 案例源碼

    小菜主要是想設定一個黑白照片，由此簡單延伸了一下 ShaderMask 遮罩着色器的小知識；小菜對于深層的原理還沒探究，如有錯誤，請多多指導！

來源： 阿策小和尚