Flutter - 如何使用Canvas绘图！

这里先写个简单的实例，具体内容后面补上:
先上图

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;
}