drawImage 绘制图片
drawImage 用于绘制图片,此时的 Image 并非日常所用的图片加载,而是用的 dart.ui 类中的 ui.Image 并转换成字节流 ImageStream 方式传递,包括本地图片或网络图片,获取Image主要代码
// 获取图片 本地为false 网络为true
Future<UI.Image> loadImage(var path, bool isUrl) async {
ImageStream stream;
if (isUrl) {
stream = NetworkImage(path).resolve(ImageConfiguration.empty);
} else {
stream =
AssetImage(path, bundle: rootBundle).resolve(ImageConfiguration.empty);
}
Completer<UI.Image> completer = Completer<UI.Image>();
void listener(ImageInfo frame, bool synchronousCall) {
final UI.Image image = frame.image;
completer.complete(image);
stream.removeListener(ImageStreamListener(listener));
}
stream.addListener(ImageStreamListener(listener));
return completer.future;
}
上面 Paint 实现了绘制本地图片和网络图,主要代码如下:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:ui' as UI;
class PaintTest extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return PaintTestState();
}
}
// 获取图片 本地为false 网络为true
Future<UI.Image> loadImage(var path, bool isUrl) async {
ImageStream stream;
if (isUrl) {
stream = NetworkImage(path).resolve(ImageConfiguration.empty);
} else {
stream =
AssetImage(path, bundle: rootBundle).resolve(ImageConfiguration.empty);
}
Completer<UI.Image> completer = Completer<UI.Image>();
void listener(ImageInfo frame, bool synchronousCall) {
final UI.Image image = frame.image;
completer.complete(image);
stream.removeListener(ImageStreamListener(listener));
}
stream.addListener(ImageStreamListener(listener));
return completer.future;
}
class PaintTestState extends State<PaintTest> {
UI.Image image1;
UI.Image image2;
String _stringImg ='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3571988019,3638490584&fm=26&gp=0.jpg';
@override
void initState() {
loadImage("images/base_phone.webp", false)
.then((value) => image1 = value)
.whenComplete(() {
loadImage(_stringImg, true)
.then((value1) => image2 = value1)
.whenComplete(() => setState(() {}));
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
height: 210,
child: Stack(
children: <Widget>[
Container(
child: CustomPaint(
painter: TestPainter(image1, image2),
size: Size(600,1000),
),
),
],
),
);
}
}
class TestPainter extends CustomPainter {
UI.Image image1;
UI.Image image2;
TestPainter(this.image1, this.image2) {
}
@override
paint(Canvas canvas, Size size) {
canvas.drawImage(image1, UI.Offset(60.0, 60.0), Paint());
canvas.drawImage(image2, UI.Offset(20.0, 200.0), Paint());
canvas.drawImageNine(
this.image2,
Rect.fromLTWH(0, 0, 200, 200),
Rect.fromLTWH(
60, 200,200, 200),
Paint());
}
@override
bool shouldRepaint(TestPainter oldDelegate) => false;
}