前言

之前我們提到了 CustomPaint er 的 Paint 可以使用漸變（GradientShader）來填充繪制的圖形，本篇我們來介紹使用圖片填充，并且配合動畫實現(xiàn)“立體”旋轉效果，之所以給“立體”加上引號，是因為實際是通過填充圖片自身的光影效果旋轉后看起來像是立體效果一樣。下面是實現(xiàn)的效果圖。

ImageShader 簡介

ImageShader 的定義如下，我們來看看各個參數(shù)的用途。

• image：用于填充的圖像，是 Image 類，注意這個 Image 類定義在 dart:ui 庫中，并不是我們用于構建圖像組件的 Widget 下面的 Image 類。
• tmx：圖形在 x 軸的處理方式，即當被填充的寬度與圖片寬度不匹配時，在橫軸方向如何填充。
• tmy：圖形在y 軸的處理方式，即當被填充的高度與圖片高度不匹配時，在縱軸方向如何填充。
• matrix4：對填充圖像的三維空間的平移、旋轉等變換操作。
• filterQuality：當圖片尺寸和被填充圖形的尺寸不一致時，采樣的質量，有高（high）、中 (medium)、低（low）三類。

ImageShader(
  Image image, 
  TileMode tmx, 
  TileMode tmy, 
  Float64List matrix4, 
  {
    FilterQuality? filterQuality,
  }
)

tmx 和 tmy 是 TileMode 枚舉，有以下幾種取值：

clamp：圖片不能完整填充圖形時，使用最接近圖形邊緣的顏色進行填充，其實就是邊緣的延伸。比如同時這是 tmx 和 tmy 都為 TileMode.clamp 的時候的效果圖如下。

repeated：這個好理解，就是在各自方向重復。

decal：就是這個方向不做任何處理，使用透明填充，比如我們將上面的 tmy 改成 decal，就只會在 x 軸重復了。

mirror：顧名思義，就是鏡像填充，下面是 tmx 為 mirror，tmy 為 repeated的效果圖。

構建 ui.Image對象

要使用 ImageShader，我們首先要從圖片資源中構建ui.Image 對象。這需要將圖片文件按ByteData 二進制方式讀取，在將二進制文件解碼成為 ui.Image 對象。這個操作是異步的，因此在操作沒完成前不能使用圖像資源，我們設置了一個isImageLoaded布爾值標識圖像是否加載完成。

final ByteData data = await rootBundle.load('images/beauty.jpg');
fillImage = await loadImage(Uint8List.view(data.buffer));

Future<ui.Image> loadImage(Uint8List img) async {
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(img, (ui.Image img) {
    setState(() {
      isImageLoaded = true;
    });
    return completer.complete(img);
  });
  return completer.future;
}

使用 ImageShader 填充形狀

使用 ImageShader 填充和 GradientShader 類似，按我們上面說的參數(shù)構建一個 ImageShader 對象就可以了，代碼如下。注意，Paint 對象的填充方式必須是 fill，如果是空心的話是看不到效果的。

@override
void paint(Canvas canvas, Size size) {
  var paint = Paint();
  paint.style = PaintingStyle.fill;

  paint.shader = ImageShader(
    image,
    TileMode.mirror,
    TileMode.repeated,
    Matrix4.identity().storage,
    filterQuality: FilterQuality.high,
  );
  canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height), paint);
}

立體旋轉效果實現(xiàn)

立體效果需要利用填充圖像的光影效果，因此我們需要找一張圖片，比如明暗不同，或色彩不同的，這樣旋轉起來就會感覺是立體的。旋轉的話使用 Matrix4的旋轉變換就行。同時，為了讓旋轉過程展示的圖像不固定，我們旋轉的時候可以通過Matrix4的平移顯示不同圖形的區(qū)域。下面是我們用于測試的兩張圖片。

實現(xiàn)的代碼如下所示，其中animationValue是動畫過程中 Animation 對象的值，我們的動畫時長設置為10秒。這里我們繪制的其實是一個圓形，只是因為填充圖像在不停的旋轉，且展示的圖像不同就看起來有了立體效果。

void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.style = PaintingStyle.fill;
    paint.shader = ImageShader(
      image,
      TileMode.mirror,
      TileMode.mirror,
      (Matrix4.identity()
            ..translate(5 * animationValue, 5 * animationValue)
            ..scaled(0.5)
            ..rotateZ(2 * pi * animationValue))
          .storage,
      filterQuality: FilterQuality.high,
    );
    Offset center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 200, paint);
}

下圖是換了星球圖片的運行效果，大家也可以調整 ImageShader 的參數(shù)看看其他參數(shù)的效果。

總結

源碼已經提交至：繪圖相關源碼，文件名為：image_shader_demo.dart。本篇介紹了 Flutter 繪圖使用 ImageShader 填充圖形，并且利用 Matrix4的三維變換加上動畫實現(xiàn)了立體旋轉的動畫效果。隨著對 Flutter 繪圖的深入，我們會發(fā)現(xiàn)繪圖覆蓋的面非常廣，也能夠實現(xiàn)更多有趣的效果。

以上就是Android利用Flutter實現(xiàn)立體旋轉效果的詳細內容，更多關于Android Flutter立體旋轉的資料請關注腳本之家其它相關文章！

最新評論