最近在学习中需要用到裁剪图片，记录一下解决方法
思路：
使用canvas的drawImageRect()方法，对Image进行裁剪，这里的Image需要 'dart:ui' 库中的Image。
1. canvas的drawImageRect()方法
drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void
①第一个参数是'dart:ui' 库中的Image。
②第二个参数为你需要截取的矩形Rect，举个栗子：截取一张图片，原图的宽高分别为w和h，
将第二个参数设置为：
Rect.fromLTRB(0, 0, w/2, h/2)
意思就是从原图片中截取一个矩形，矩形的坐标从(0.0)到（w/2, h/2)。
扫描二维码关注公众号，回复：
6226526 查看本文章
这里的是fromLTWH意思是指定left，top，right，bottom坐标，通过指定四个点来获取矩形
③第三个为目标矩形Rect，即你想要在canvas上绘制的区域，
举个栗子：接着上面所讲的，将第三个参数设置为
Rect.fromLTWH(0, 0, 100, 100), paint);
意思就是将上面截取的矩形，在canvas的（0，0）坐标开始绘制，绘制的宽和高为100，
这里的是fromLTWH意思是指定left和top坐标，并设置宽高来获取矩形
④第四个参数为画笔。
2.'dart:ui' 库中的Image
这里我们要引入'dart:ui' 取别名为ui，避免库里的方法与'package:flutter/material.dart'中的方法重名冲突
import 'dart:ui' as ui;
从我们平常用的图片去获取ui库下的Image的方法如下：
将图片转化为流，并添加监听，在图片流加载完成之后获取到ui.Image
Future<ui.Image> imageLoader() {
ImageStream imageStream = NetworkImage(
'https://avatars0.githubusercontent.com/u/45789654?s=460&v=4')
.resolve(ImageConfiguration.empty);
Completer<ui.Image> imageCompleter = Completer<ui.Image>();
void imageListener(ImageInfo info, bool synchronousCall) {
ui.Image image = info.image;
imageCompleter.complete(image);
imageStream.removeListener(imageListener);
}
imageStream.addListener(imageListener);
return imageCompleter.future;
}
clip() async {
ui.Image _image;
imageLoader().then((image) => _image = image).whenComplete(() {
clipper = ImageClipper(_image,left: 0,top: 0,right: 0.5,bottom: 0.5);
setState(() {});
});
}
通过clip()方法得到ImageClipper对象，并且setState通知界面更新Container的内容，
Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size(50, 50),)),
ImageClipper中的核心方法
@override
void paint(Canvas canvas, Size size) {
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);
}