我目前正在尝试在 flutter canvas 上绘制图像,然后在图像上绘制矩形以覆盖特定数据。我遇到了一个问题,矩形绘制得很好,但图像没有被绘制在后面。它看起来好像根本没有被绘制。
我正在将图像从字节加载到 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;
}
}
结果如下:
如您所见,矩形绘制得非常好,但是背景中的图像不可见。我还应该做些什么来绘制图像,还是有其他方法可以做到这一点?
谢谢!
最佳答案
我在下面发布了我的应用程序的工作代码,该代码加载图像并将其显示在 flutter Canvas 中。希望对以后的读者有所帮助。
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;
}
}
关于flutter - 无法在 Flutter Canvas 上绘制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60546928/