Невозможно нарисовать изображение на холсте Flutter - PullRequest
Новая
       28

Невозможно нарисовать изображение на холсте Flutter

0 голосов
/ 05 марта 2020

В настоящее время я пытаюсь нарисовать изображение на холсте флаттера, а затем нарисовать прямоугольники поверх изображения, чтобы покрыть определенные c данные. Я сталкиваюсь с проблемой, когда прямоугольники рисуются хорошо, но изображение не рисуется сзади. Похоже, что он вообще не рисуется.

Я загружаю изображение в объект изображения 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;
  }
}

Вот результат:

enter image description here

Как видите, прямоугольники нарисованы идеально хорошо, однако, изображение на заднем плане не видно. Что-то еще, что я должен сделать, чтобы нарисовать изображение, или есть другой способ сделать это?

Спасибо!

...