Flutter - 如何使用Canvas绘图!
2019-11-21 本文已影响0人
Cosecant
这里先写个简单的实例,具体内容后面补上:
先上图
QQ截图20191121145249.jpg
ImageStreamListener imageStreamListener =
ImageStreamListener((info, synchronousCall) async {
if (synchronousCall) {
try {
double realSizeRatio = 2,
imageWidth = 376 * realSizeRatio,
imageHeight = 667 * realSizeRatio,
bgStartDrawX = 27.5 * realSizeRatio,
bgStartDrawY = 97.5 * realSizeRatio,
bgDrawWidth = 320 * realSizeRatio,
bgDrawHeight = 540.5 * realSizeRatio;
final paint = Paint()..isAntiAlias = true;
Rect targetRect = Rect.fromLTWH(0, 0, imageWidth, imageHeight);
var recorder = UI.PictureRecorder();
Canvas canvas = Canvas(recorder, targetRect);
canvas.drawColor(Colors.black, BlendMode.color);
// 绘制背景图片
canvas.drawImageRect(
info.image,
Rect.fromLTWH(0, 0, 960, 1622),
Rect.fromLTWH(
bgStartDrawX, bgStartDrawY, bgDrawWidth, bgDrawHeight),
paint);
// 绘制大标题文本
var paragraphBuilder = UI.ParagraphBuilder(UI.ParagraphStyle(
fontSize: 16 * realSizeRatio, textAlign: TextAlign.center))
..pushStyle(UI.TextStyle(color: Colors.white))
..addText('为你寻找深藏于世的好物');
var paragraph = paragraphBuilder.build()
..layout(UI.ParagraphConstraints(width: imageWidth));
canvas.drawParagraph(paragraph, Offset(0, 42.5 * realSizeRatio));
// 绘制小标题文本
var paragraphBuilder1 = UI.ParagraphBuilder(UI.ParagraphStyle(
fontSize: 7 * realSizeRatio, textAlign: TextAlign.center))
..pushStyle(UI.TextStyle(color: Colors.white))
..addText('Search for hidden in the world of good for you');
var paragraph1 = paragraphBuilder1.build()
..layout(UI.ParagraphConstraints(width: imageWidth));
canvas.drawParagraph(paragraph1, Offset(0, 66.5 * realSizeRatio));
var picture = recorder.endRecording();
var image =
await picture.toImage(imageWidth.toInt(), imageHeight.toInt());
var imageBuffer =
await image.toByteData(format: UI.ImageByteFormat.png);
UI.Codec codec = await UI.instantiateImageCodec(
imageBuffer.buffer.asUint8List(),
targetWidth: imageWidth.toInt(),
targetHeight: imageHeight.toInt());
var frameInfo = await codec.getNextFrame();
onDrawCompleted(frameInfo.image);
} on Error catch (e) {
print('===>$e');
}
}
});
var bgImage = AssetImage('asset/img/bg_invitation_customer.png');
bgImage.resolve(ImageConfiguration()).addListener(imageStreamListener);
一些处理图片的方法
import 'dart:typed_data';
import 'dart:ui' as UI;
import 'package:flutter/material.dart';
/// 从项目中的AssetBundle中获取图片
/// + [imageAssetPath]-资源图片在项目中的位置
/// + [onCompleted]-图片加载完成事件
void fetchImageFromAssetBundle(
String imageAssetPath, void onCompleted(UI.Image image, double scale),
{void onError(dynamic exception)}) =>
AssetImage(imageAssetPath)
.resolve(ImageConfiguration())
.addListener(ImageStreamListener((info, synchronousCall) async {
if (synchronousCall) onCompleted(info.image, info.scale);
}, onError: (exception, stackTrace) {
if (onError != null) onError(exception);
debugPrint('获取资源图片失败:$exception,${stackTrace.toString()}');
}));
/// 处理图片解码(字节到Image对象)
/// + [imageUnit8List]-图片字节码
/// + [targetWidth]-目标宽度
/// + [targetHeight]-目标高度
Future<UI.Image> handleImageCodec(Uint8List imageUnit8List,
{int targetWidth, int targetHeight}) async {
UI.Codec codec = await UI.instantiateImageCodec(imageUnit8List,
targetWidth: targetWidth, targetHeight: targetHeight);
return (await codec.getNextFrame()).image;
}