Flutter Custompainter canvas drawimage 不起作用

Question

我尝试使用 Canvas 和 CustomPainter 绘制图像，但它不起作用。这是针对使用 Flutter 框架的 Android 应用程序。

我只是flutter build apk在 Windows cmd 中使用命令来构建应用程序。

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Title!')),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: CustomPaint(
            painter: ImageEditor(),
          ),
        ),
      ),
    );
  }
}

class ImageEditor extends CustomPainter {
  @override
  Future paint(Canvas canvas, Size size) async {
    canvas.save();

    ByteData bd = await rootBundle.load("assets/sampleImagees.jpg");

    final Uint8List bytes = Uint8List.view(bd.buffer);

    final ui.Codec codec = await ui.instantiateImageCodec(bytes);

    final ui.Image image = (await codec.getNextFrame()).image;

    canvas.drawImage(image, Offset(0.0, 0.0), Paint());

    canvas.save();
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

没有任何错误，但应用程序中没有发生任何事情。这只是一个白屏。我的代码有什么问题？

构建的应用程序的白屏

Answer 1

在绘制画布之前，您的图像需要可用。通过将加载代码移到画家之外，画家现在可以按预期工作：

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  ui.Image _image;

  @override
  void initState() {
    _loadImage();
  }

  _loadImage() async {
    ByteData bd = await rootBundle.load("assets/sampleImagees.jpg");

    final Uint8List bytes = Uint8List.view(bd.buffer);

    final ui.Codec codec = await ui.instantiateImageCodec(bytes);

    final ui.Image image = (await codec.getNextFrame()).image;

    setState(() => _image = image);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Title!')),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: CustomPaint(
                painter: ImageEditor(_image),
              )
        ),
      ),
    );
  }
}

class ImageEditor extends CustomPainter {
  ui.Image image;

  ImageEditor(this.image) : super();

  @override
  Future paint(Canvas canvas, Size size) async {
    if (image != null) {
      canvas.drawImage(image, Offset(0.0, 0.0), Paint());
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return image != (oldDelegate as ImageEditor).image;
  }
}

请注意，您可以使用Image.asset代替 a轻松绘制图像CustomPainter：

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Title!')),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Image.asset('assets/sampleImagees.jpg'),
        ),
      ),
    );
  }