Flutter自定义View 之 CustomPainter (二) 绘制图片

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