【Flutter 專題】118 圖解特殊利器 ShaderMask 著色器

阿策小和尚發表於2021-06-04
Flutter圖解

    小菜在嘗試把圖片做成黑白色時，瞭解到 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 遮罩著色器的小知識；小菜對於深層的原理還沒探究，如有錯誤，請多多指導！

來源： 阿策小和尚

相關文章