Flutter实现图片裁剪

• 在这一篇中我们来实现图片的裁剪

1. 这里我们使用到canvas的drawImageRect()方法

void drawImageRect(Image image, Rect src, Rect dst, Paint paint)

• 第一个参数Image image为需要image图片(UI.Image类型)
• 第二个参数Rect src为需要截取的矩形Rect

Rect.fromLTRB(0, 0, width/2, height/2)

意思就是从原图片中截取一个矩形，矩形的坐标从(0.0)到（宽的一半, 高的一半)
fromLTRB是指定left，top，right，bottom坐标，通过指定四个点来获取矩形
第三个为目标矩形Rect，即你想要在canvas上绘制的区域，

• 第三个参数设置为

Rect.fromLTWH(0, 0, 150, 150)

截取的矩形，在canvas的（0，0）坐标开始绘制,宽和高各为150，
fromLTWH是指定left和top坐标，并设置宽高来获取矩形

• 第四个参数paint为画笔

2. 自定义图片裁剪

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

/// 图片裁剪
class ImageClipper extends CustomPainter {
  final ui.Image image;
  final double left;
  final double top;
  final double right;
  final double bottom;

  ImageClipper(this.image,{this.left = 0.3,this.top = 0.3,this.right = 0.6,this.bottom = 0.6});
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    Paint paint = Paint();
    canvas.drawImageRect(
        image,
        Rect.fromLTRB(image.width * left, image.height * top,
            image.width * right, image.height * bottom),
        Rect.fromLTWH(0, 0, size.width, size.height),
        paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false;
  }
}

3. 将图片转化为流，并添加监听，在图片流加载完成之后获取到ui.Image

 Future<ui.Image> _loadImge() async {
    ImageStream imageStream = NetworkImage(pic).resolve(ImageConfiguration());
    Completer<ui.Image> completer = Completer<ui.Image>();
    void imageListener(ImageInfo info, bool synchronousCall) {
      ui.Image image = info.image;
      completer.complete(image);
      imageStream.removeListener(imageListener);
    }
    imageStream.addListener(imageListener);
    return completer.future;
  }

4.得到image之后我们使用自定义的裁剪类代码如下

 clip() async {
    ui.Image uiImage;
    _loadImge().then((image){uiImage = image;}).whenComplete(() {
      clipper = ImageClipper(uiImage);
      setState(() {});
    });
  }

• 完整代码

import 'package:flutter/material.dart';
import 'package:flutter_trip/util/ImageClipper.dart';
import 'dart:ui' as ui;
import 'dart:async';

const String pic =
    'http://pic75.nipic.com/file/20150821/9448607_145742365000_2.jpg';

class ImageClipperTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ImageClipperTestState();
  }
}

class _ImageClipperTestState extends State<ImageClipperTest> {
  ImageClipper clipper;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageClipper'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              child: Container(color: Colors.grey, child: Image.network(pic,fit: BoxFit.fill,)),
              width: 200,
              height: 150,
            ),
            SizedBox(
              height: 50,
            ),
            Container(
                color: Colors.green,
                child: CustomPaint(
                  painter: clipper,
                  size: Size(100, 100),
                )),
            RaisedButton(child: Text('Clip'), onPressed: () => clip())
          ],
        ),
      ),
    );
  }

  Future<ui.Image> _loadImge() async {
    ImageStream imageStream = NetworkImage(pic).resolve(ImageConfiguration());
    Completer<ui.Image> completer = Completer<ui.Image>();
    void imageListener(ImageInfo info, bool synchronousCall) {
      ui.Image image = info.image;
      completer.complete(image);
      imageStream.removeListener(imageListener);
    }

    imageStream.addListener(imageListener);
    return completer.future;
  }

  clip() async {
    ui.Image uiImage;
    _loadImge().then((image){uiImage = image;}).whenComplete(() {
      clipper = ImageClipper(uiImage);
      setState(() {});
    });
  }
}

效果图片