使用 ImageShader 的 Flutter ShaderMask

Question

我想得到一个 ShaderMask使用图像作为着色器。我正在从内存中读取图像，所以我的图像是 File .如何使用内存中的图像创建 ImageShader？

File imageFile;
Image image = Image.file(imageFile)

ShaderMask(
   shaderCallback: (bounds) {
      Float64List matrix4 = new Matrix4.identity().storage; // <--- DO I NEED THIS OR THE BOUNDS?
      return ImageShader(image, TileMode.mirror, TileMode.mirror, matrix4);
   },
   child: child
)

ImageShader 出现错误因为图像是错误的类型(我需要 ui.Image，我不明白如何创建)。
我如何创建 ImageShader来自 File图片？
PS:是 matrix4正确还是我应该以某种方式使用边界？

Answer 1

重要的是要知道ImageShader使用来自 dart:ui 的图像包而不是 Image 的实例小部件。没有直接操作或构造函数可用于创建 ui.Image 的实例。来自网络位置、文件或 Assets ，因此您需要一些代码来完成它。
在查找了许多资源并深入研究代码后，我想出了最好的通用解决方案 Image小部件正在加载原始图像，是使用 ImageProvider作为来源。摘要ImageProvider有类似 NetworkImage 的实现, FileImage , ExactAssetImage和 MemoryImage从您想要的任何资源加载您的图像。
首先你会得到一个 ImageStream使用 ImageProvider.resolve方法。 resolve方法采用 ImageConfiguration 类型的参数，应该填充与您在代码位置可用的尽可能多的信息。您可以使用全局createLocalImageConfiguration大多数情况下都可以使用，但请注意，当您在 initState 中创建着色器时，这将不起作用。 StatefulWidget 的方法。
已解决ImageStream您可以附上 ImageStreamListener ，这需要一个 ImageListener回调作为第一个参数。加载图像后，将使用 ImageInfo 调用回调。 ，它在 image 上提供请求的图像属性(property)。
您可以构建 ImageShader两种平铺模式为 TileMode.clamp和一个简单的单位矩阵，您可以手动创建或采用 Matrix4 提供的矩阵。类(class)。如果您需要图像着色器小于所提供图像的大小，您可以将您的提供者包装在 ResizeProvider 中。并指定所需的宽度和高度。
下面是我对 ImageMask 的实现小部件作为引用，可用于屏蔽任何类型的小部件。

class ImageMask extends StatefulWidget {
  final ImageProvider image;
  final double width;
  final double height;
  final Widget child;

  const ImageMask({@required this.image, this.width, this.height, @required this.child});

  @override
  _ImageMaskState createState() => _ImageMaskState();
}

class _ImageMaskState extends State<ImageMask> {
  Future<Shader> _shader;

  @override
  void initState() {
    super.initState();
    _shader = _loadShader(context);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _shader,
      builder: (_, AsyncSnapshot<Shader> snapshot) {
        return snapshot.connectionState != ConnectionState.done || snapshot.hasError
            ? SizedBox(width: widget.width, height: widget.height)
            : ShaderMask(
                blendMode: BlendMode.dstATop,
                shaderCallback: (bounds) => snapshot.data,
                child: widget.child,
              );
      },
    );
  }

  Future<Shader> _loadShader(BuildContext context) async {
    final completer = Completer<ImageInfo>();

    // use the ResizeImage provider to resolve the image in the required size
    ResizeImage(widget.image, width: widget.width.toInt(), height: widget.height.toInt())
        .resolve(ImageConfiguration(size: Size(widget.width, widget.height)))
        .addListener(ImageStreamListener((info, _) => completer.complete(info)));

    final info = await completer.future;
    return ImageShader(
      info.image,
      TileMode.clamp,
      TileMode.clamp,
      Float64List.fromList(Matrix4.identity().storage),
    );
  }
}