使用ImageShader时图像尺寸过大的调整需求

核心思路 #

当前问题源于ImageShader默认以原始图像尺寸填充Shader的bounds区域，而你传入的Matrix4.identity()是无变换矩阵，导致图像相对于遮罩Widget（_hoge）过大。解决关键是通过矩阵变换对图像做等比例缩放，搭配居中偏移，让图像适配遮罩大小。

修改后的完整代码 #

完善状态处理避免空指针，同时在shaderCallback中计算缩放矩阵：

import 'dart:ui' as ui;
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'dart:async';

// 图像加载方法
Future<ui.Image> _loadUiImage(String url) async {
  final response = await http.get(Uri.parse(url));
  final completer = Completer<ui.Image>();
  ui.decodeImageFromList(response.bodyBytes, completer.complete);
  return completer.future;
}

// 使用示例
Widget build(BuildContext context) {
  return FutureBuilder<ui.Image>(
    future: _loadUiImage("https://img.freepik.com/free-photo/peak-bamboo-lijiang-rural-mist_1417-410.jpg"),
    builder: ((context, snapshot) {
      // 处理加载状态
      if (!snapshot.hasData) {
        return const Center(child: CircularProgressIndicator());
      }
      final ui.Image image = snapshot.data!;
      
      return ShaderMask(
        blendMode: BlendMode.srcATop,
        shaderCallback: (Rect bounds) {
          // 计算等比例缩放因子，取宽高缩放的最小值避免拉伸，乘以0.8留出边距
          final double scaleX = bounds.width / image.width;
          final double scaleY = bounds.height / image.height;
          final double scale = scaleX < scaleY ? scaleX * 0.8 : scaleY * 0.8;
          
          // 构建变换矩阵：先平移到遮罩中心，再缩放
          final Matrix4 matrix = Matrix4.identity()
            ..translate(bounds.center.dx - (image.width * scale)/2, bounds.center.dy - (image.height * scale)/2)
            ..scale(scale);
          
          return ImageShader(
            image,
            TileMode.clamp,
            TileMode.clamp,
            matrix.storage,
          );
        },
        child: _hoge, // 你的自定义形状Widget
      );
    }),
  );
}

代码说明 #

1. 缩放逻辑：通过对比遮罩区域与图像的宽高，取最小缩放因子保证图像完整显示；乘以0.8是为了预留边距，可根据需求调整为1（完全填充遮罩）或其他数值。
2. 矩阵变换：
   • translate：将缩放后的图像平移到遮罩中心，避免偏移。
   • scale：等比例缩放图像，防止拉伸变形。
3. 状态处理：添加加载指示器，避免snapshot.data为空时触发异常。

可选简化调整 #

如果不需要自适应，只想固定缩小到某个比例，可直接替换缩放逻辑：

final double scale = 0.5; // 固定缩小到原尺寸的50%

内容的提问来源于stack exchange，提问作者yolo