3

我目前正在尝试在颤动的画布上绘制图像，然后在图像上绘制矩形以覆盖特定数据。我遇到了一个问题，矩形画得很好，但图像没有画在后面。它看起来好像根本没有被绘制。

我正在将图像从字节加载到 Dart UI Image 对象中。加载图像后，我创建一个 PictureRecorder 并将其传递给 Canvas 对象。然后我尝试首先绘制图像对象，然后是顶部的矩形。完整代码如下：

import 'dart:async';
import 'dart:typed_data';

import 'dart:ui' as ui;

import 'package:common/ocr/scraped_card_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class ObfuscatedCardRenderer {
  ui.Image _backgroundImage;

  ///
  ///
  ///
  Future<ByteData> renderImage(
      Uint8List imageBytes, List<ScrapedCardField> fields) async {
    await _loadImageBackground(imageBytes);
    var obfuscatedImage = await _obfuscateImage(fields);

    var byteD =
        await obfuscatedImage.toByteData(format: ui.ImageByteFormat.png);

    return byteD;
  }

  ///
  ///
  ///
  Future<ui.Image> _obfuscateImage(List<ScrapedCardField> fields) async {
    ui.PictureRecorder recorder = ui.PictureRecorder();
    ui.Canvas c = ui.Canvas(recorder);

    var paint = ui.Paint();

    c.drawImage(_backgroundImage, ui.Offset(0.0, 0.0), new Paint());
    for (ScrapedCardField field in fields) {
      paint.color = Colors.white;
      c.drawRect(field.boundingBox, paint);
    }

    var picture = recorder.endRecording();
    return picture.toImage(_backgroundImage.width, _backgroundImage.height);
  }

  ///
  ///
  ///
  Future<void> _loadImageBackground(Uint8List imageBytes) async {
    if (imageBytes != null) {
      _backgroundImage = await _getImageFromBytes(imageBytes);
    } else {
      return null;
    }
  }

  ///
  ///
  ///
  Future<ui.Image> _getImageFromBytes(Uint8List imageBytes) async {
    var completer = Completer<ui.Image>();
    ui.decodeImageFromList(imageBytes, (image) {
      completer.complete(image);
    });

    return completer.future;
  }
}

结果如下：

在此处输入图像描述

如您所见，矩形绘制得非常好，但是，背景中的图像不可见。我还应该做些什么来绘制图像，还是有其他方法可以做到这一点？

谢谢！

4

1 回答 1

1

我在我的应用程序的工作代码下面发布了一个加载图像并将其显示在颤动画布中的工作代码。希望对以后的读者有所帮助。

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

class ImageInsideCanvasPage extends StatefulWidget {
  @override
  _ImageInsideCanvasPageState createState() => _ImageInsideCanvasPageState();
}

class _ImageInsideCanvasPageState extends State<ImageInsideCanvasPage> {
  ui.Image? image;

  @override
  void initState() {
    // Add your own asset image link
    _load('assets/img.png');
    super.initState();
  }

  void _load(String path) async {
    var bytes = await rootBundle.load(path);
    image = await decodeImageFromList(bytes.buffer.asUint8List());
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: CustomPaint(
            painter: ImageInsideCanvas(image: image),
            child: SizedBox.expand(),
          ),
        ),
      ),
    );
  }
}

class ImageInsideCanvas extends CustomPainter {
  ImageInsideCanvas({required this.image});
  ui.Image? image;

  @override
  void paint(Canvas canvas, Size size) async {
    Paint greenBrush = Paint()..color = Colors.greenAccent;
    canvas.save();
    canvas.drawImage(image!, Offset(0, 0), greenBrush);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
于 2021-08-15T08:17:43.237 回答