Using Flutter's CustomPainter
to draw various Image
s in a Canvas
to then be rendered on screen. My expectation is that the depth order of any drawn overlapping Images to be as they were drawn on the Canvas (eg canvas.drawImage(image1,..); canvas.drawImage(image2,..); canvas.drawImage(image3,..);
would render the three images on the screen whith image1
appearing underneath image2
and image3
respectively). What I am finding however is that on certain occasions the order of the rendered images is not entirely preserved.
See example code below:
import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/services.dart' show rootBundle;
void main() => runApp(new ExampleApp());
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Ground Example',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: ExampleScreen(),
);
}
}
class ExampleScreen extends StatefulWidget {
final Offset initPos = Offset(0.0, 0.0);
@override
_ExampleScreenState createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> {
ui.Image _image1;
ui.Image _image2;
ui.Image _image3;
bool _prepDone;
@override
void initState() {
_prepDone = false;
super.initState();
//_draggedToOffset = widget.initPos;
}
_ExampleScreenState() {
_prepare();
}
_prepare() {
loadImage('assets/wfw_1.png').then((image1) {
_image1 = image1;
}).whenComplete(() {
loadImage('assets/wnfw_2.png').then((image2) {
_image2 = image2;
}).whenComplete(() {
loadImage('assets/wfw_1.png').then((image3) {
_image3 = image3;
}).whenComplete(() {
_prepDone = true;
_handle();
});
});
});
}
_handle() {
setState(() {});
}
@override
Widget build(BuildContext context) {
return new Container(
constraints: BoxConstraints.expand(),
color: Colors.grey,
child: new Stack(children: <Widget>[
_prepDone ? Container(child: buildPainter()) : Container()
]));
}
buildPainter() {
return Container(
child: CustomPaint(
painter: ExamplePainter(_image1, _image2, _image3),
));
}
}
class ExamplePainter extends CustomPainter {
ui.Image _image1;
ui.Image _image2;
ui.Image _image3;
Paint _paint = Paint();
ExamplePainter(this._image1, this._image2, this._image3);
@override
void paint(Canvas canvas, Size size) {
canvas.drawImage(_image1, Offset(100.0, 35.0), _paint);
canvas.drawImage(_image2, Offset(70.0, 50.0), _paint);
canvas.drawImage(_image3, Offset(40.0, 65.0), _paint);
}
@override
bool shouldRepaint(ExamplePainter oldDelegate) {
return true;
}
}
Future<ui.Image> loadImage(String assetPath) async {
ImageStream stream = new AssetImage(assetPath, bundle: rootBundle)
.resolve(ImageConfiguration.empty);
Completer<ui.Image> completer = new Completer<ui.Image>();
void listener(ImageInfo frame, bool synchronousCall) {
final ui.Image image = frame.image;
completer.complete(image);
stream.removeListener(listener);
}
stream.addListener(listener);
return completer.future;
}
Where: image1
and image3
are: wfw_1.png . image2
is: wnfw_2.png
The rendeder output is as follows on my laptop's Android Emulator device:
As can be seen, image2
is rendered on top of the last drawn image ( image3
) when I was expecting it to be rendered below image2
(ie in between image1
and image3
).
The only way I have been able to workaround the problem is by either: Adding a dummy drawRect(..)
call in between the drawImage(..)
calls or, by setting image2
's Offset.dy
to offset.dy+0.001
.
I am new to Dart and Flutter in general so I am not sure if it is a) My code that is wrong, b) My understanding of the Flutter rendering engine that is wrong or c) a bug in dart:ui somewhere?
我认为是c),因为在更新为flutter version 0.10.2
之后现在保持了顺序。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.