Flutter繪製-05-shader專項

天色將變發表於2021-03-11

Flutter

是什麼

Paint有個屬性叫shader，也就是著色器，用於：

畫或填充一個圖形時增加特殊效果，如drawCircle時，新增顏色漸變效果。
優先順序：colorFilter > shader > color,當共同存在時，優先順序高的生效，優先順序低的無效。
Gradient，繪製顏色漸變的著色器。
ImageShader，對圖片做處理的著色器。

直白來講，shader就是設定一個紋理圖案，然後貼到要畫的內容上。

Gradient

linear,線性漸變
radial,徑向漸變，指的是圓圈，由內而外
sweep,掃描漸變，雷達掃描效果

linear

建構函式：

Gradient.linear(
    Offset from,
    Offset to,
    List<Color> colors, [
    List<double>? colorStops,
    TileMode tileMode = TileMode.clamp,
    Float64List? matrix4,
  ])
複製程式碼

from,to, 確定Gradient影響的範圍。
colors,指定線性漸變的顏色值陣列.colors 與 colorStops的長度要相同。
colorStops，陣列中每個值是0.0-1.0之間。colorStops[i]確定colors[i]從哪兒開始，指的是從from to中哪兒開始。
TileMode，colors的渲染模式。針對的是超出from to後怎麼處理。
- clamp，超出from to邊界後用最近的顏色渲染，直到最後。如果不顯示設定，此是預設值。
- repeated，超出from to邊界後重復
- mirror，超出from to邊界後映象顯示

TileMode.clamp

void _testGradientLinear(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.stroke;
    _paint.strokeWidth = 30;
    _paint.shader = ui.Gradient.linear(
        Offset(-150, 0),
        Offset(100, 0),
        [Colors.red, Colors.blue, Colors.green],
        [0.2, 0.4, 0.6],
        TileMode.clamp,
        Float64List.fromList([
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1,
        ])
//      TileMode.repeated,
//        TileMode.mirror
    );
    canvas.drawLine(Offset(-150, 0), Offset(200, 0), _paint);
  }
複製程式碼

TileMode.repeated

效果一直重複往前疊加

void _testGradientLinear(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.stroke;
    _paint.strokeWidth = 30;
    _paint.shader = ui.Gradient.linear(
        Offset(-100, 0),
        Offset(100, 0),
        [Colors.red, Colors.blue, Colors.green],
        [0.2, 0.4, 0.6],
//        TileMode.clamp,
      TileMode.repeated,
//        TileMode.mirror,
        Float64List.fromList([
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1,
        ]),

//
    );
    canvas.drawLine(Offset(-150, 0), Offset(150, 0), _paint);
  }
複製程式碼

TileMode.mirror

void _testGradientLinear(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.stroke;
    _paint.strokeWidth = 30;
    _paint.shader = ui.Gradient.linear(
        Offset(-100, 0),
        Offset(100, 0),
        [Colors.red, Colors.blue, Colors.green],
        [0.2, 0.4, 0.6],
//        TileMode.clamp,
//      TileMode.repeated,
        TileMode.mirror,
        Float64List.fromList([
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1,
        ]),
    );
    canvas.drawLine(Offset(-150, 0), Offset(150, 0), _paint);
  }
複製程式碼

radial

建構函式：

Gradient.radial(
    Offset center,
    double radius,
    List<Color> colors, [
    List<double>? colorStops,
    TileMode tileMode = TileMode.clamp,
    Float64List? matrix4,
    Offset? focal,
    double focalRadius = 0.0
  ])
複製程式碼

center 中心點
radius 半徑，類似於linear的from to
colors,指定線性漸變的顏色值陣列.colors 與 colorStops的長度要相同。
colorStops，陣列中每個值是0.0-1.0之間。colorStops[i]確定colors[i]從哪兒開始，指的是從center 到 radius中哪兒開始。
TileMode，colors的渲染模式。針對的是超出radius後怎麼處理。
- clamp，超出radius邊界後用最近的顏色渲染，直到最後。如果不顯示設定，此是預設值。
- repeated，超出radius邊界後重復
- mirror，超出radius邊界後映象顯示
focal 設定shader圓心的偏移量，該圓心向focal的xy方向擠壓效果
focalRadius 半徑

下面這個例子，是畫了一條線，然後設定上shader：

void _testGradientRadial(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.stroke;
    _paint.strokeWidth = 200;
    _paint.shader = ui.Gradient.radial(
      Offset(0, 0),
      150,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.6],
        TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
      Float64List.fromList([
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1,
      ]),
    );
    canvas.drawLine(Offset(-100, 0), Offset(100, 0), _paint);
  }
複製程式碼

TileMode.clamp

void _testGradientRadial(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;
    _paint.shader = ui.Gradient.radial(
      Offset(-80, -100),
      100,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
        TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
    );
    canvas.drawCircle(Offset(-80, -100), 70, _paint);

    _paint.shader = ui.Gradient.radial(
      Offset(-80, 100),
      100,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
      TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
    );
    canvas.drawCircle(Offset(-80, 100), 120, _paint);
  }
複製程式碼

void _testGradientRadial(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;
    _paint.shader = ui.Gradient.radial(
      Offset(-60, -100),
      100,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
        TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
    );
    canvas.drawCircle(Offset(-80, -100), 70, _paint);

    _paint.shader = ui.Gradient.radial(
      Offset(-80, 100),
      100,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
      TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
    );
    canvas.drawCircle(Offset(-80, 100), 120, _paint);
  }
複製程式碼

TileMode.repeated

超過shader的radius後重復

void _testGradientRadial(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.radial(
      Offset(0, 0),
      80,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
//      TileMode.clamp,
      TileMode.repeated,
//      TileMode.mirror,
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }
複製程式碼

TileMode.mirror

超過shader的radius後映象顯示

void _testGradientRadial(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.radial(
      Offset(0, 0),
      80,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
//      TileMode.clamp,
//      TileMode.repeated,
      TileMode.mirror,
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }
複製程式碼

focal

focal偏向哪裡就向哪裡擠壓，換個描述就是，從shader的center到focal延長線的擠壓

void _testGradientRadialFocol(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.radial(
      Offset(0, 0),
      80,
      [Colors.red, Colors.blue, Colors.green],
      [0.2, 0.4, 0.8],
//      TileMode.clamp,
      TileMode.repeated,
//      TileMode.mirror,
      Float64List.fromList([
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1,
      ]),
      Offset(40,1),
      5
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }

複製程式碼

sweep

建構函式：

Gradient.sweep(
    Offset center,
    List<Color> colors, [
    List<double>? colorStops,
    TileMode tileMode = TileMode.clamp,
    double startAngle = 0.0,
    double endAngle = math.pi * 2,
    Float64List? matrix4,
  ])
複製程式碼

center 圓心
colors 漸變色
colorStops colors[i]漸變起點
tileMode 模式
startAngle 起始角度，類似於linear的from
endAngle 結束角度，類似於linear的to，設定的是漸變範圍

TileMode.clamp

void _testGradientSweep(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.sweep(
      Offset(0, 0),
      [Colors.red, Colors.blue, Colors.green],
      [0.3, 0.5, 1],
      TileMode.clamp,
//      TileMode.repeated,
//      TileMode.mirror,
      0,
      pi/2
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }
複製程式碼

TileMode.repeated


void _testGradientSweep(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.sweep(
      Offset(0, 0),
      [Colors.red, Colors.blue, Colors.green],
      [0.3, 0.5, 1],
//      TileMode.clamp,
      TileMode.repeated,
//      TileMode.mirror,
      0,
      pi/2
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }
複製程式碼

TileMode.mirror

void _testGradientSweep(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _paint.strokeWidth = 1;

    _paint.shader = ui.Gradient.sweep(
      Offset(0, 0),
      [Colors.red, Colors.blue, Colors.green],
      [0.3, 0.5, 1],
//      TileMode.clamp,
//      TileMode.repeated,
      TileMode.mirror,
      0,
      pi/2
    );
    canvas.drawCircle(Offset(0, 0), 200, _paint);
  }
複製程式碼

ImageShader

用圖片當做紋理。

建構函式：

ImageShader(Image image, TileMode tmx, TileMode tmy, Float64List matrix4) 
複製程式碼

image 當做紋理的圖片
tmx 在x方向的渲染方式 TimeMode 效果跟前面一樣，不再細說
tmy 在y方向的渲染方式

TileMode.clamp

void _testImageShader(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.shader = ImageShader(_src, TileMode.clamp,
        TileMode.clamp,
//      TileMode.repeated,
//        TileMode.mirror,
        Float64List.fromList([
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1,
    ]));

    canvas.drawCircle(Offset.zero, 200, _paint);
  }
複製程式碼

TileMode.repeated

void _testImageShader(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.shader = ImageShader(_src, TileMode.repeated, TileMode.repeated, Float64List.fromList([
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1,
    ]));

    canvas.drawCircle(Offset.zero, 200, _paint);
  }
複製程式碼

TileMode.mirror

void _testImageShader(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.shader = ImageShader(_src, TileMode.mirror,
        TileMode.mirror,
//      TileMode.repeated,
//        TileMode.mirror,
        Float64List.fromList([
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1,
    ]));

    canvas.drawCircle(Offset.zero, 200, _paint);
  }
複製程式碼

Flutter繪製-12-動畫專項-基礎使用篇
2021-05-14
Flutter動畫
Flutter繪製-13-動畫專項-多種多樣的Tween
2021-05-14
Flutter動畫
Flutter繪製barchart
2021-03-04
Flutter
Flutter自定義繪製（1）- 繪製基礎
2019-02-18
Flutter
Flutter 自定義繪製 View
2019-03-17
FlutterView
Flutter框架分析（七）-- 繪製
2019-05-30
Flutter框架
Flutter渲染之繪製上屏
2021-08-04
Flutter
Flutter的渲染繪製概述
2018-09-13
Flutter
Flutter 中如何繪製動畫
2018-12-13
Flutter動畫
一、Flutter 之影象繪製原理
2020-01-20
Flutter
Flutter之UI繪製流程二
2020-04-05
FlutterUI
Flutter RenderBox指南——繪製篇
2020-05-17
Flutter
Flutter的繪製流程簡述
2019-11-24
Flutter
Flutter 圖表繪製解密(charts_flutter 的使用)
2020-03-29
Flutter解密
[譯]Flutter是如何繪製文字的
2020-04-01
Flutter
flutter: 視窗初始與繪製流程
2019-07-14
Flutter
Flutter自定義繪製Widget初探
2019-04-17
Flutter
紛爭再起：Flutter-UI繪製解析
2019-03-11
FlutterUI
Flutter繪製-08-龍捲風效果
2021-03-25
Flutter
Flutter佈局和繪製流程淺析
2021-04-01
Flutter
Flutter渲染之繪製啟動及layout
2021-07-21
Flutter
資料流圖繪製例項
2019-02-19
canvas繪製扇形程式碼例項
2018-08-10
Canvas
canvas繪製星星程式碼例項
2017-03-24
Canvas
canvas 繪製雞蛋程式碼例項
2017-05-04
Canvas
PixiJS 專案例項以及繪製流程的簡單介紹
2019-03-06
JS
使用 Flutter 繪製圖表（二）餅狀圖?
2020-06-10
Flutter
使用 Flutter 繪製圖表（一）柱狀圖?
2020-06-02
Flutter
flutter 用 CustomPaint 繪製自定義圖案
2019-07-17
FlutterAI
canvas繪製網格程式碼例項
2018-06-05
Canvas
css繪製圓形程式碼例項
2018-07-03
CSS
svg繪製半圓程式碼例項
2017-02-01
SVG
canvas繪製笑臉程式碼例項
2017-02-20
Canvas
canvas繪製圓環效果程式碼例項
2017-02-21
Canvas
Flutter小小實踐——KLine 繪製篇（三）
2020-07-19
Flutter
Flutter小小實踐——KLine 繪製篇（一）
2020-07-14
Flutter
Flutter小小實踐——KLine 繪製篇（二）
2020-07-16
Flutter
flutter 自定義view 繪製曲線統計圖
2019-09-19
FlutterView

Flutter繪製-05-shader專項

是什麼

Gradient

linear

TileMode.clamp

TileMode.repeated

TileMode.mirror

radial

TileMode.clamp

TileMode.repeated

TileMode.mirror

focal

sweep

TileMode.clamp

TileMode.repeated

TileMode.mirror

ImageShader

TileMode.clamp

TileMode.repeated

TileMode.mirror

相關文章